javascript - Takes at least 2 refreshes to load a page - Stack Overflow

admin管理员组

文章数量:1344207

Website is hosted on Firebase.

But the issue is, whenever we go to the website, let's say www.website we need to refresh it at least twice in order to load the website.

---

Update:

Not sure what possibly could be the issue

1. Using Firebase Hosting to host our website, we have a custom URL where it's being re-routed to. (*1)

2. npm run build to create production build

3. deploying via firebase deploy

---

Problem:

User tries to open the page in the 1st try it loads nothing but can see the following error:

Uncaught SyntaxError: Unexpected token < firebase-app.js:1

In the 2nd try the page loads correctly.

As listed by Frank in the ments it's not an issue from Firebase then is it something from React (Create-React-App)?

---

References:

*1 - Have tried both routes, custom route and route provided by Firebase hosting, and the issue happens in both.

Website is hosted on Firebase.

But the issue is, whenever we go to the website, let's say www.website. we need to refresh it at least twice in order to load the website.

---

Update:

Not sure what possibly could be the issue

1. Using Firebase Hosting to host our website, we have a custom URL where it's being re-routed to. (*1)

2. npm run build to create production build

3. deploying via firebase deploy

---

Problem:

User tries to open the page in the 1st try it loads nothing but can see the following error:

Uncaught SyntaxError: Unexpected token < firebase-app.js:1

In the 2nd try the page loads correctly.

As listed by Frank in the ments it's not an issue from Firebase then is it something from React (Create-React-App)?

---

References:

*1 - Have tried both routes, custom route and route provided by Firebase hosting, and the issue happens in both.

• javascript
• node.js
• reactjs
• firebase
• npm

Share Improve this question Follow edited Jun 6, 2019 at 0:35 Dhaval Jardosh asked May 11, 2019 at 15:28 Dhaval JardoshDhaval Jardosh 7,30955 gold badges3434 silver badges7474 bronze badges 12

• Try to access it by using the default firebase url. Then try to see if there is any dependency taking too long to load. And then contact support. – cutiko Commented May 11, 2019 at 15:31
• @cutiko, tried doing that, shows a blank page at first load. Once I refresh it works. – Dhaval Jardosh Commented May 11, 2019 at 15:44
• 1 Sometimes we don't clearly know what the problem is, this is one of that situation. Usually, I ask questions with very precise and accurate examples followed by hints and my attempts, but in this situation, I'm quite unaware. @FrankvanPuffelen – Dhaval Jardosh Commented May 11, 2019 at 15:50
• Did you try what? Using the default URL or searching for slow dependencies? @Dhaval Jardosh – cutiko Commented May 11, 2019 at 20:13
• I was routing from firebase hosted url to my custom URL. So I assume you meant that I should be using the firebase url instead of my custom URL to check if it loads at the first go, but that's not happening as well. I try to load my page with my URL at first it shows a blank white page and upon refresh, it renders everything. – Dhaval Jardosh Commented May 11, 2019 at 20:29

 |  Show 7 more ments

2 Answers 2

Sorted by: Reset to default 6 +25

Probably your problem is that some of the resources are cached. If you reload once the browser will only reload the main url. If you reload twice other resources will be refreshed. So it can be some strange behaviour derived from this.

There are some tricks, for example if you can change the url of the js file, change it from http://yoursite/folder/file.js to http://yoursite/folder/file.js?_=TIMESTAMP where TIMESTAMP is a timestamp, got for example from new Date().getTime() on js or time() on php (every language has a way for getting a timestamp). That _ parameter will invalidate the cache. If this works there are more elegant ways to tell the browser to handle caches according to your needs.

Service Workers

If you're using create-react-app, the problem is that there is a service worker that is likely caching the page for offline use. Service workers were enabled by default until CRA v2.0 (which is different versioning from react-scripts). It can take a few reloads to get the fresh content because the service worker, which is persisting in the browser between reloads, is what is actually hitting your hosting service to look for new content. By default, it always loads instantly from cache, until it has a chance to hit the server to check for new content. By default, the browser's console will output once you've been on a stale web page for a few seconds with New content available! Please reload.. The next refresh pulls the new content into the browser's cache.

Disable on a Specific Browser (locally)

If you just want to turn it off for development in Chrome, once you have your website loaded, you can go into the dev tools>Application>Service Workers. Once you're there, there are several checkboxes for the service worker for that website. You can check Update on reload and Bypass for network.

Disable Globally

However, if you want to permanently disable service workers, you have to unregister them first from all existing registered users. If you just remove the file called service-worker.js, it will not unregister it for users who have already accessed your site, which is problematic. In order to remove the service worker from clients who have already accessed your site, you'll have to unregister it. In your index.js file at the root of the src folder, you need to change this

import registerServiceWorker from './registerServiceWorker';
registerServiceWorker();

to

import { unregister } from './registerServiceWorker';
unregister();

What you are doing is preventing it from further registering service workers (by removing the registerServiceWorker function) and unregistering any existing service workers by calling the unregister function. The service worker might be on any number of browsers, so it's best to unregister, instead of only removing the registerServiceWorker function.

You can read more about service workers on the create-react-app docs site. Here's a link to the github issue in which the authors of CRA explain how to disable the service worker.

本文标签： javascriptTakes at least 2 refreshes to load a pageStack Overflow