PWA Optimization of Next.js web site

Published by @SoNiceInfo at 4/5/2020

Supporting a web site built with Next.js for PWA(Progressive Web Apps).
Installing PWA web sites, users can see the site without Internet access.
next-offline module make it easy to support.

Steps to support PWA

1. Make manifest.json
2. Make ServiceWorker with next-offline
3. Check and fix missing elements for PWA with Lighthouse.

Make manifest.json

At first, make manifest.json to define how your web site support for PWA.
You can define name, theme color and icons in the file.
For example, the file of this web site is below.
I set utm_source=pwa for Google Analytics at start_url.

{
    "name": "Road2SwiftUI",
    "short_name": "Road2SwiftUI",
    "start_url": "/en/swiftui?utm_source=pwa",
    "display": "standalone",
    "background_color": "#fff",
    "theme_color": "#39f",
    "description": "Road2SwiftUI introduces what you can do with SwiftUI with codes and images.",
    "icons": [
      {
        "src": "https://d1v1b.com/images/icons/48.png",
        "sizes": "48x48",
        "type": "image/png"
      },
      {
        "src": "https://d1v1b.com/images/icons/96.png",
        "sizes": "96x96",
        "type": "image/png"
      },
      {
        "src": "https://d1v1b.com/images/icons/192.png",
        "sizes": "192x192",
        "type": "image/png"
      },
      {
        "src": "https://d1v1b.com/images/icons/512.png",
        "sizes": "512x512",
        "type": "image/png"
      }
    ]
}

Make ServiceWorker with next-offline

You can make ServiceWorker for PWA with next-offline.

1. Add next-offline to your Project.
2. Prepare ServiceWorker withnext.config.js

yarn add next-offline

const withOffline = require('next-offline');

const nextConfig = {
  target: 'serverless',
  transformManifest: manifest => ['/'].concat(manifest), 
  // add the homepage to the cache
  // Trying to set NODE_ENV=production when running yarn dev causes a build-time error so we
  // turn on the SW in dev mode so that we can actually test it
  generateInDevMode: true,
  workboxOpts: {
    swDest: 'static/service-worker.js',
    runtimeCaching: [
      {
        urlPattern: /^https?.*/,
        handler: 'NetworkFirst',
        options: {
          cacheName: 'https-calls',
          networkTimeoutSeconds: 15,
          expiration: {
            maxEntries: 150,
            maxAgeSeconds: 7 * 24 * 60 * 60, // 1 week
          },
          cacheableResponse: {
            statuses: [0, 200],
          },
        },
      },
    ],
  }
};

module.exports = withOffline(nextConfig);

next-offline module make it easy to support.

Lighthouse analyze your web sites' quolity with Google perspective.
To use Lighthouse, Install chrome web extension here.
Lighthouse - Chrome Web Store
If you pass everything in green, as shown below, you have completed your PWA support.
You can fix with guides in the detail.