chore: refresh service worker

web/src/index.tsx

@@ -23,4 +23,12 @@ ReactDOM.render(
   document.getElementById('root'),
 );
 
-serviceWorker.register({});
+serviceWorker.register({
+  onUpdate: (registration) => {
+    console.log('New version available! Ready to update?');
+    if (registration && registration.waiting) {
+      registration.waiting.postMessage({type: 'SKIP_WAITING'});
+    }
+    window.location.reload();
+  },
+});

web/src/serviceWorker.ts

@@ -10,14 +10,11 @@
 // To learn more about the benefits of this model and instructions on how to
 // opt-in, read https://bit.ly/CRA-PWA
 
-const VERSION = 1;
-
 const isLocalhost = Boolean(
   window.location.hostname === 'localhost' ||
     // [::1] is the IPv6 localhost address.
     window.location.hostname === '[::1]' ||
-    // 127.0.0.1/8 is considered localhost for IPv4.
-
+    // 127.0.0.0/8 are considered localhost for IPv4.
     /^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/.exec(
       window.location.hostname,
     ),
@@ -28,16 +25,16 @@ type Config = {
   onUpdate?: (registration: ServiceWorkerRegistration) => void;
 };
 
-function registerValidSW(swUrl: string, config?: Config): void {
+function registerValidSW(swUrl: string, config?: Config) {
   navigator.serviceWorker
     .register(swUrl)
     .then((registration) => {
-      registration.onupdatefound = (): void => {
+      registration.onupdatefound = () => {
         const installingWorker = registration.installing;
         if (installingWorker == null) {
           return;
         }
-        installingWorker.onstatechange = (): void => {
+        installingWorker.onstatechange = () => {
           if (installingWorker.state === 'installed') {
             if (navigator.serviceWorker.controller) {
               // At this point, the updated precached content has been fetched,
@@ -72,9 +69,11 @@ function registerValidSW(swUrl: string, config?: Config): void {
     });
 }
 
-function checkValidServiceWorker(swUrl: string, config?: Config): void {
+function checkValidServiceWorker(swUrl: string, config?: Config) {
   // Check if the service worker can be found. If it can't reload the page.
-  fetch(swUrl)
+  fetch(swUrl, {
+    headers: {'Service-Worker': 'script'},
+  })
     .then((response) => {
       // Ensure service worker exists, and that we really are getting a JS file.
       const contentType = response.headers.get('content-type');
@@ -100,21 +99,10 @@ function checkValidServiceWorker(swUrl: string, config?: Config): void {
     });
 }
 
-export function unregister(): void {
-  if ('serviceWorker' in navigator) {
-    navigator.serviceWorker.ready.then((registration) => {
-      registration.unregister();
-    });
-  }
-}
-
-export function register(config?: Config): void {
+export function register(config?: Config) {
   if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {
     // The URL constructor is available in all browsers that support SW.
-    const publicUrl = new URL(
-      (process as {env: {[key: string]: string}}).env.PUBLIC_URL,
-      window.location.href,
-    );
+    const publicUrl = new URL(process.env.PUBLIC_URL, window.location.href);
     if (publicUrl.origin !== window.location.origin) {
       // Our service worker won't work if PUBLIC_URL is on a different origin
       // from what our page is served on. This might happen if a CDN is used to
@@ -144,3 +132,15 @@ export function register(config?: Config): void {
     });
   }
 }
+
+export function unregister() {
+  if ('serviceWorker' in navigator) {
+    navigator.serviceWorker.ready
+      .then((registration) => {
+        registration.unregister();
+      })
+      .catch((error) => {
+        console.error(error.message);
+      });
+  }
+}