Takes at least 2 refreshes to load a page

Question

Website is hosted on Firebase.

But the issue is, whenever we go to the website, let's say www.website.com 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 comments 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.

Answer 1

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.