Now-next-pwa NPM

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"
            }
          ]
        }
      }
    }
  ]
}