feat: provide means to update PWA

components/header.js

@@ -1,6 +1,7 @@
 import Link from 'next/link'
 import { useEffect, useState } from 'react'
 import { appName } from '../app.config.js'
+import Layout from './layout.js'
 
 function ToggleButton({ expanded, controlledId, onClick }){
   return (
@@ -62,10 +63,25 @@ function MainNav(){
   )
 }
 
-export default function Header(){
+function AppUpdater({canUpdate, onClick}){
+  let display = canUpdate ? "" : "hidden"
+  return (
+    <aside aria-labelledby="update-available" className={`${display} mb-4 max-w-3xl mx-auto px-16px sm:px-4`}>
+      <div className="flex flex-col items-center space-y-2 p-16px border border-pink-600 bg-pink-100 max-w-3xl mx-auto">
+        <div className="text-center">
+          <span id="update-available">A new version is available!</span> Click the button to update the app in all tabs:
+        </div>
+        <button className="bg-pink-600 text-white rounded py-2 px-4" onClick={onClick}>Get Latest Version</button>
+      </div>
+    </aside>
+  )
+}
+
+export default function Header({ updateOptions }){
   return (
     <header className="w-full border-b border-solid border-gray-500">
       <MainNav />
+      <AppUpdater {...updateOptions} />
     </header>
   );
 }

components/layout.js

@@ -2,11 +2,11 @@ import Meta from './meta'
 import Header from './header'
 import Footer from './footer'
 
-export default function Layout({ children }) {
+export default function Layout({ updateOptions, children }) {
   return (
     <div className="min-h-screen flex flex-col">
       <Meta />
-      <Header />
+      <Header updateOptions={updateOptions} />
       {children}
       <Footer />
     </div>

next.config.js

@@ -7,6 +7,8 @@ module.exports = (phase, { defaultConfig }) => {
 		pwa: {
 			dest: 'public',
 			dynamicStartUrl: false, // precache home page instead of storing it in runtime cache by default
+      register: false,
+      skipWaiting: false,
 		},
 	}
 

pages/_app.js

@@ -1,9 +1,79 @@
+import { useState, useEffect, useRef } from 'react'
+import { useRouter } from 'next/router'
 import Layout from '../components/layout'
 import '../styles/globals.css'
 
 function MyApp({ Component, pageProps }) {
+  const UPDATE_INTERVAL = 24 * 60 * 60 * 1000 // 24 hours
+  const [canUpdate, setCanUpdate] = useState(false)
+  const updateTimeRef = useRef(null)
+
+  const router = useRouter()
+
+  function getWorkbox(){
+    if (typeof window === 'undefined' || 'serviceWorker' in navigator === false) {
+      return
+    }
+    return window.workbox
+  }
+
+  useEffect(() => {
+    updateTimeRef.current = Date.now()
+
+    const handleRouteChange = (url, { shallow }) => {
+      const wb = getWorkbox()
+      if (!wb) return
+
+      // how long has it been since last SW update check?
+      const time = Date.now()
+      if (time - updateTimeRef.current > UPDATE_INTERVAL){
+        wb.update()
+        updateTimeRef.current = time
+      }
+    }
+
+    router.events.on('routeChangeStart', handleRouteChange)
+
+    // If the component is unmounted, unsubscribe
+    // from the event with the `off` method:
+    return () => {
+      router.events.off('routeChangeStart', handleRouteChange)
+    }
+  }, [])
+
+  useEffect(() => {
+    const wb = getWorkbox()
+    if (!wb) return
+
+    wb.addEventListener('waiting', event => {
+      setCanUpdate(true) // will display the Update button
+    })
+
+    wb.addEventListener('controlling', event => {
+      // all SW clients subscribed to this event will reload
+      window.location.reload()
+    })
+
+    // never forget to call register as auto register is turned off in next.config.js
+    wb.register()
+
+  }, [])
+
+  const handleUpdateClick = () => {
+    const wb = getWorkbox()
+    if (!wb || !canUpdate) return
+
+    // Send a message to the waiting service worker, instructing it to activate.
+    wb.messageSkipWaiting()
+  }
+
+  let updateOptions = { 
+    canUpdate, 
+    onClick: handleUpdateClick,
+  }
+
   return (
-    <Layout>
+    <Layout updateOptions={updateOptions}>
       <Component {...pageProps} />
     </Layout>
   )