Next.js + Workbox

workbox.js

const { generateSW } = require('workbox-build')
const { readFileSync } = require('fs')
const { map, concat, flatMap, pickBy, uniq } = require('lodash')

const buildId = readFileSync('.next/BUILD_ID', 'utf8')
const extraPreCachePatterns = [
  'public/img/**',
  'public/favicon.ico',
  'public/manifest.json'
]

function readBuildManifest() {
  const { pages } = JSON.parse(
    readFileSync('.next/build-manifest.json', 'utf8')
  )
  const deps = uniq(flatMap(pages, (v) => v))
  return map(deps, (url) => ({ url: `_next/${url}`, revision: null }))
}

function readPreRenderManifest() {
  const { routes } = JSON.parse(
    readFileSync('.next/prerender-manifest.json', 'utf8')
  )
  return flatMap(routes, ({ dataRoute }, route) => [
    { url: route, revision: buildId },
    { url: dataRoute.substr(1), revision: null }
  ])
}

function isStaticPage(val, key) {
  return key !== '/404' && val.endsWith('.html')
}

function readStaticPages() {
  const pages = JSON.parse(
    readFileSync('.next/serverless/pages-manifest.json', 'utf8')
  )
  return map(pickBy(pages, isStaticPage), (_, url) => ({
    url,
    revision: buildId
  }))
}

function uriEncodeEntry({ url, revision }) {
  return { url: encodeURI(url), revision }
}

function uriEncodeManifest(manifest) {
  return { manifest: map(manifest, uriEncodeEntry) }
}

console.log('[Workbox] generating service worker...')
generateSW({
  additionalManifestEntries: concat(
    readBuildManifest(),
    readPreRenderManifest(),
    readStaticPages()
  ),
  manifestTransforms: [uriEncodeManifest],
  dontCacheBustURLsMatching: /^_next\/static/,
  inlineWorkboxRuntime: true,
  offlineGoogleAnalytics: true,
  globDirectory: '.',
  globPatterns: [`.next/static/${buildId}/**/*.js`, ...extraPreCachePatterns],
  swDest: 'public/sw.js',
  modifyURLPrefix: {
    '.next/static': '_next/static',
    public: ''
  }
})