Search code examples
reactjsservice-workerfirebase-hostingcreate-react-app

Not including old JS in Firebase hosting causes service worker white screen


The build process of create-react-app (yarn run build) deletes the old static JS file before building anew. When deployed to Firebase Hosting, the old JS files are not included and are no longer served.

However after visiting the old version the Service Worker (built by sw-precache and sw-precache-webpack-plugin, included by default in CRA) has cached the old HTML, which includes the old JS file, which is no longer served, so I get a white screen and an error in the console, which is only fixed by clearing cache and reloading.

Am I doing something wrong?


Solution

  • The issue was that my Cache-Control headers were too short, meaning that my JS file wasn't being cached for long enough, causing the browser to re-request it upon a reload and not find it until the Service Worker updates.

    Resolution: have long Cache-Control headers