feat: pwa update (#106)

src/service-worker.ts

@@ -1,24 +1,47 @@
-declare let self: ServiceWorkerGlobalScope & Window & typeof globalThis
+/// <reference lib="webworker" />
+
+declare const self: ServiceWorkerGlobalScope
 
 /* eslint-disable import/no-extraneous-dependencies */
 import { skipWaiting, clientsClaim, cacheNames } from 'workbox-core'
-import { precacheAndRoute, getCacheKeyForURL } from 'workbox-precaching'
+import { precacheAndRoute } from 'workbox-precaching'
 import { registerRoute } from 'workbox-routing'
 import { StaleWhileRevalidate } from 'workbox-strategies'
 import { RangeRequestsPlugin } from 'workbox-range-requests'
 
 skipWaiting()
 clientsClaim()
 
-const cacheKeyWillBeUsed: any = ({ request }: { request: any }) =>
-  getCacheKeyForURL(request.url)
+self.addEventListener('message', (event: ExtendableMessageEvent) => {
+  if (event.data && event.data.type === 'SKIP_WAITING') {
+    self.skipWaiting()
+  }
+})
+
+self.addEventListener('activate', (event: ExtendableEvent) => {
+  event.waitUntil(
+    caches.keys().then((cacheList) =>
+      Promise.all(
+        cacheList.map((cacheName) => {
+          if (
+            cacheName !== cacheNames.runtime &&
+            cacheName !== cacheNames.precache
+          ) {
+            return caches.delete(cacheName)
+          }
+          return Promise.resolve()
+        }),
+      ),
+    ),
+  )
+})
 
 registerRoute(
   ({ url }) => url.pathname.endsWith('.mp3'),
   new StaleWhileRevalidate({
-    cacheName: cacheNames.precache,
-    plugins: [{ cacheKeyWillBeUsed }, new RangeRequestsPlugin()],
+    cacheName: cacheNames.runtime,
+    plugins: [new RangeRequestsPlugin()],
   }),
 )
 
-precacheAndRoute(self.__WB_MANIFEST)
+precacheAndRoute(self.__WB_MANIFEST as any)

src/utils/swreg.ts

@@ -1,15 +1,34 @@
-if ('serviceWorker' in navigator) {
+function updateApp(registration: ServiceWorkerRegistration) {
+  if (confirm('A new version is available. Reload now?')) {
+    registration.waiting?.postMessage({ type: 'SKIP_WAITING' })
+    window.location.reload()
+  }
+}
+
+if ('serviceWorker' in navigator && process.env.NODE_ENV === 'production') {
   window.addEventListener('load', () => {
     navigator.serviceWorker
       .register('./service-worker.js')
       .then((registration) => {
-        console.log('Service worker (PWA) registered: ', registration)
-      })
-      .catch((registrationError) => {
-        console.log(
-          'Service worker (PWA) registration failed: ',
-          registrationError,
-        )
+        console.log('Service Worker registered:', registration)
+
+        if (registration.waiting) {
+          updateApp(registration)
+        }
+
+        registration.addEventListener('updatefound', () => {
+          const newWorker = registration.installing
+          if (newWorker) {
+            newWorker.addEventListener('statechange', () => {
+              if (
+                newWorker.state === 'installed' &&
+                navigator.serviceWorker.controller
+              ) {
+                updateApp(registration)
+              }
+            })
+          }
+        })
       })
   })
 }