Register service worker

src/index.tsx

@@ -5,7 +5,7 @@ import App from './App';
 import {ModalContextProvider} from './context/ModalContextProvider';
 import {SettingsProvider} from './context/SettingsProvider';
 // import reportWebVitals from './reportWebVitals';
-// import * as serviceWorkerRegistration from './serviceWorkerRegistration';
+import * as serviceWorkerRegistration from './serviceWorkerRegistration';
 
 const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement);
 root.render(
@@ -21,7 +21,7 @@ root.render(
 // If you want your app to work offline and load faster, you can change
 // unregister() to register() below. Note this comes with some pitfalls.
 // Learn more about service workers: https://cra.link/PWA
-// serviceWorkerRegistration.register();
+serviceWorkerRegistration.register();
 
 // If you want to start measuring performance in your app, pass a function
 // to log results (for example: reportWebVitals(console.log))

src/serviceWorkerRegistration.ts

@@ -61,6 +61,10 @@ function registerValidSW(swUrl: string, config?: Config) {
   navigator.serviceWorker
     .register(swUrl)
     .then(registration => {
+      if (registration.waiting) {
+        registration.waiting.postMessage('SKIP_WAITING');
+      }
+
       registration.onupdatefound = () => {
         const installingWorker = registration.installing;
         if (installingWorker == null) {
@@ -72,10 +76,12 @@ function registerValidSW(swUrl: string, config?: Config) {
               // At this point, the updated precached content has been fetched,
               // but the previous service worker will still serve the older
               // content until all client tabs are closed.
-              console.log(
-                'New content is available and will be used when all ' +
-                  'tabs for this page are closed. See https://cra.link/PWA.'
-              );
+              // To avoid having outdated clients, we use skipWaiting() to
+              // activate the new service worker immediately.
+              // This is followed by a page refresh to fetch new assets.
+              if (registration.waiting) {
+                registration.waiting.postMessage('SKIP_WAITING');
+              }
 
               // Execute callback
               if (config && config.onUpdate) {
@@ -140,3 +146,14 @@ export function unregister() {
       });
   }
 }
+
+let refreshing = false;
+// When a new service worker is installed we forcefully reload the page
+// to ensure that all assets are loaded with the new worker.
+// https://whatwebcando.today/articles/handling-service-worker-updates/
+navigator.serviceWorker.addEventListener('controllerchange', () => {
+  if (!refreshing) {
+    window.location.reload();
+    refreshing = true;
+  }
+});