now-next-pwa

now builder for Next.js PWA. WARNING, This project is in experimental stage. APIs and others would be changed

Getting Started

Set up project and Install builder

now init nextjs
cd nextjs

Add code for service worker registration to pages/index.js

import React, { useEffect } from 'react';
 
function Home() {
  ...
  useEffect(() => {
    if ('serviceWorker' in navigator) {
      navigator.serviceWorker
        .register('/sw.js')
        .then(registration => {
          console.log('service worker registration successful');
        })
        .catch(err => {
          console.warn('service worker registration failed', err.message);
        });
    }
  }, []);
 
  return (
    ...
  );
}

Add manifest to components/head.js and icon resources under static

const Head = props => (
  <NextHead>
    <meta charSet="UTF-8" />
    ...
    <link rel="icon" href="/static/favicon.ico" />
    <link rel="manifest" href="/manifest.json" />
    ...
  </NextHead>
);

Configure now.json with workbox and manifest custom setting as you need

{
  "version": 2,
  "builds": [
    {
      "src": "package.json",
      "use": "now-next-pwa",
      "config": {
        "workbox": {
          "globPatterns": [],
          "globIgnores": [],
          "importScripts": [
            "libs/sw-imports.js"
          ],
          "offlineGoogleAnalytics": false
        },
        "manifest": {
          "name": "NEXT-PWA-BASIC",
          "short_name": "NEXT-PWA-BASIC",
          "icons": [
            {
              "src": "/static/icon-192x192.png",
              "sizes": "192x192",
              "type": "image/png"
            },
            {
              "src": "/static/icon-512x512.png",
              "sizes": "512x512",
              "type": "image/png"
            }
          ]
        }
      }
    }
  ]
}

Deploy to now

now

or you can test in development mode of now

now dev

License

MIT @ Jimmy Moon