Try out next-pwa (#1056)

* try our next-pwa

* remove unregister

* skip waiting

next.config.js

@@ -1,15 +1,16 @@
 const bundleAnalyzer = require('@next/bundle-analyzer')
-const withOffline = require('next-offline')
+const withOffline = require('next-pwa')
 
 const withBundleAnalyzer = bundleAnalyzer({ enabled: process.env.ANALYZE === 'true' })
 
 module.exports = withBundleAnalyzer(
   withOffline({
     target: 'serverless',
-    dontAutoRegisterSw: true,
-    // https://github.com/hanford/next-offline/blob/master/packages/now2-example/next.config.js
-    workboxOpts: {
-      swDest: 'static/service-worker.js',
+    pwa: {
+      disable: process.env.NODE_ENV !== 'production',
+      dest: 'public',
+      register: false,
+      skipWaiting: false,
     },
     webpack: (config, options) => {
       config.module.rules.push({

now.json

@@ -16,13 +16,6 @@
     }
   ],
   "routes": [
-    {
-      "src": "^/service-worker.js$",
-      "dest": "/_next/static/service-worker.js",
-      "headers": {
-        "Service-Worker-Allowed": "/"
-      }
-    },
     {
       "src": "/api/image/?(?<id>[^/]*)",
       "dest": "api/image/index.js?id=$id",

package.json

@@ -54,7 +54,7 @@
     "morphmorph": "^0.1.3",
     "ms": "^2.1.3",
     "next": "^10.2.2",
-    "next-offline": "^5.0.5",
+    "next-pwa": "^3.1.0",
     "prettier": "^2.4.1",
     "react": "^17.0.2",
     "react-click-outside": "^3.0.0",

pages/index.js

@@ -1,7 +1,6 @@
 // Theirs
 import React from 'react'
 import { withRouter } from 'next/router'
-import { register, unregister } from 'next-offline/runtime'
 import Either from 'eitherx'
 
 // Ours
@@ -11,10 +10,14 @@ import { MetaLinks } from '../components/Meta'
 
 class Index extends React.Component {
   componentDidMount() {
-    register()
+    window.workbox.register()
   }
   componentWillUnmount() {
-    unregister()
+    if ('serviceWorker' in navigator) {
+      navigator.serviceWorker.ready.then(registration => {
+        registration.unregister()
+      })
+    }
   }
 
   shouldComponentUpdate = () => false