Enable PWA

next.config.js

@@ -1,23 +1,31 @@
 const path = require('path');
 const withSass = require('@zeit/next-sass');
 const withCss = require('@zeit/next-css');
+const withPWA = require('next-pwa');
 
-module.exports = withCss(
-  withSass({
-    target: 'serverless',
-    sassLoaderOptions: {
-      includePaths: [
-        path.join(__dirname, 'styles'),
-        path.join(__dirname, 'node_modules'),
-      ],
-    },
-    webpack(config) {
-      config.resolve.alias.pages = path.join(__dirname, 'pages');
-      config.resolve.alias.components = path.join(__dirname, 'components');
-      config.resolve.alias.modules = path.join(__dirname, 'modules');
-      config.resolve.alias.lib = path.join(__dirname, 'lib');
-      config.resolve.alias.styles = path.join(__dirname, 'styles');
-      return config;
-    },
-  }),
-);
+module.exports = withPWA({
+  pwa: {
+    dest: 'public',
+    register: true,
+    skipWaiting: true,
+  },
+  ...withCss(
+    withSass({
+      target: 'serverless',
+      sassLoaderOptions: {
+        includePaths: [
+          path.join(__dirname, 'styles'),
+          path.join(__dirname, 'node_modules'),
+        ],
+      },
+      webpack(config) {
+        config.resolve.alias.pages = path.join(__dirname, 'pages');
+        config.resolve.alias.components = path.join(__dirname, 'components');
+        config.resolve.alias.modules = path.join(__dirname, 'modules');
+        config.resolve.alias.lib = path.join(__dirname, 'lib');
+        config.resolve.alias.styles = path.join(__dirname, 'styles');
+        return config;
+      },
+    }),
+  ),
+});

package.json

@@ -30,6 +30,7 @@
     "ky": "0.25.0",
     "moment": "2.29.1",
     "next": "10.0.2",
+    "next-pwa": "5.3.1",
     "node-sass": "5.0.0",
     "pouchdb-adapter-http": "7.2.2",
     "pouchdb-adapter-idb": "7.2.2",

pages/_document.tsx

@@ -42,6 +42,7 @@ export default class MyDocument extends Document {
           <meta name="theme-color" content="#ffffff" />
           <link rel="icon" type="image/png" href="/images/favicon.png" />
           <link rel="apple-touch-icon" href="/images/favicon.png" />
+          <link rel="manifest" href="/manifest.json" />
           <link
             rel="alternate"
             type="application/rss+xml"

public/manifest.json

@@ -0,0 +1,16 @@
+{
+  "name": "Budget Zen",
+  "short_name": "Budget Zen",
+  "icons": [
+    {
+      "src": "/images/logo.svg",
+      "sizes": "any",
+      "type": "image/svg+xml"
+    }
+  ],
+  "theme_color": "#222222",
+  "background_color": "#efefef",
+  "start_url": "/",
+  "display": "standalone",
+  "orientation": "portrait"
+}