upgrade service worker

src/register-service-worker.js

@@ -1,55 +1,13 @@
 import store from '~/src/store'
 
-const isLocalhost = Boolean(
+export default () => {
-  window.location.hostname === 'localhost' ||
+  if ('serviceWorker' in navigator && process.env.NODE_ENV === 'production') {
-    // [::1] is the IPv6 localhost address.
-    window.location.hostname === '[::1]' ||
-    // 127.0.0.1/8 is considered localhost for IPv4.
-    window.location.hostname.match(
-      /^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/
-    )
-)
-
-export default function register () {
-  if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {
-    // The URL constructor is available in all browsers that support SW.
-    const publicUrl = new URL('/', window.location)
-    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
-      // serve assets; see https://github.com/facebookincubator/create-react-app/issues/2374
-      return
-    }
-
-    window.addEventListener('load', () => {
-      const swUrl = '/service-worker.js'
-
-      if (isLocalhost) {
-        // This is running on localhost. Lets check if a service worker still exists or not.
-        checkValidServiceWorker(swUrl)
-
-        // Add some additional logging to localhost, pointing developers to the
-        // service worker/PWA documentation.
-        navigator.serviceWorker.ready.then(() => {
-          console.log(
-            'This web app is being served cache-first by a service ' +
-              'worker. To learn more, visit https://goo.gl/SC7cgQ'
-          )
-        })
-      } else {
-        // Is not local host. Just register service worker
-        registerValidSW(swUrl)
-      }
-    })
-  }
-}
-
-function registerValidSW (swUrl) {
     navigator.serviceWorker
-    .register(swUrl)
+      .register(new URL('~/src/service-worker.js', import.meta.url), {type: 'module'})
       .then(registration => {
         registration.onupdatefound = () => {
           const installingWorker = registration.installing
+
           installingWorker.onstatechange = () => {
             if (installingWorker.state === 'installed') {
               if (navigator.serviceWorker.controller) {
@@ -69,34 +27,6 @@ function registerValidSW (swUrl) {
           }
         }
       })
-    .catch(error => {
+      .catch(error => console.error('Error during service worker registration:', error))
-      console.error('Error during service worker registration:', error)
-    })
   }
-
-function checkValidServiceWorker (swUrl) {
-  // Check if the service worker can be found. If it can't reload the page.
-  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
-      ) {
-        // No service worker found. Probably a different app. Reload the page.
-        navigator.serviceWorker.ready.then(registration => {
-          registration.unregister().then(() => {
-            window.location.reload()
-          })
-        })
-      } else {
-        // Service worker found. Proceed as normal.
-        registerValidSW(swUrl)
-      }
-    })
-    .catch(() => {
-      console.log(
-        'No internet connection found. App is running in offline mode.'
-      )
-    })
 }

src/service-worker.js

@@ -0,0 +1,18 @@
+import { manifest, version } from '@parcel/service-worker'
+
+async function install() {
+  const cache = await caches.open(version)
+  await cache.addAll(manifest)
+}
+
+addEventListener('install', e => e.waitUntil(install()))
+
+async function activate() {
+  const keys = await caches.keys()
+
+  await Promise.all(
+    keys.map(key => key !== version && caches.delete(key))
+  )
+}
+
+addEventListener('activate', e => e.waitUntil(activate()))