Add service worker invalidation

Author: ro-savage

packages/react-scripts/template/src/registerServiceWorker.js

@@ -21,36 +21,61 @@ export default function register() {
 
     window.addEventListener('load', () => {
       const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`;
-      navigator.serviceWorker
-        .register(swUrl)
-        .then(registration => {
-          registration.onupdatefound = () => {
-            const installingWorker = registration.installing;
-            installingWorker.onstatechange = () => {
-              if (installingWorker.state === 'installed') {
-                if (navigator.serviceWorker.controller) {
-                  // At this point, the old content will have been purged and
-                  // the fresh content will have been added to the cache.
-                  // It's the perfect time to display a "New content is
-                  // available; please refresh." message in your web app.
-                  console.log('New content is available; please refresh.');
-                } else {
-                  // At this point, everything has been precached.
-                  // It's the perfect time to display a
-                  // "Content is cached for offline use." message.
-                  console.log('Content is cached for offline use.');
-                }
-              }
-            };
-          };
+
+      fetch(swUrl)
+        .then(response => {
+          // Ensure service worker exists, and that we really are getting a JS file.
+          if (
+            response.status === 404 ||
+            response.headers.get('content-type').indexOf('javascript') === -1
+          ) {
+            navigator.serviceWorker.ready.then(registration => {
+              registration.unregister().then(() => {
+                window.location.reload();
+              });
+            });
+          } else {
+            registerValidSW(swUrl);
+          }
         })
-        .catch(error => {
-          console.error('Error during service worker registration:', error);
+        .catch(() => {
+          console.log(
+            'No internet connection found. App is running in offline mode.'
+          );
         });
     });
   }
 }
 
+function registerValidSW(swUrl) {
+  navigator.serviceWorker
+    .register(swUrl)
+    .then(registration => {
+      registration.onupdatefound = () => {
+        const installingWorker = registration.installing;
+        installingWorker.onstatechange = () => {
+          if (installingWorker.state === 'installed') {
+            if (navigator.serviceWorker.controller) {
+              // At this point, the old content will have been purged and
+              // the fresh content will have been added to the cache.
+              // It's the perfect time to display a "New content is
+              // available; please refresh." message in your web app.
+              console.log('New content is available; please refresh.');
+            } else {
+              // At this point, everything has been precached.
+              // It's the perfect time to display a
+              // "Content is cached for offline use." message.
+              console.log('Content is cached for offline use.');
+            }
+          }
+        };
+      };
+    })
+    .catch(error => {
+      console.error('Error during service worker registration:', error);
+    });
+}
+
 export function unregister() {
   if ('serviceWorker' in navigator) {
     navigator.serviceWorker.ready.then(registration => {