Workbox cli config

workbox.config.js

const fs = require('fs');
const path = require('path');
const loadJsonFile = require('load-json-file');

const dotNext = path.resolve(__dirname, '.next');

const stats = loadJsonFile.sync(`${dotNext}/build-stats.json`);

const buildId = fs.readFileSync(`${dotNext}/BUILD_ID`, 'utf8');

const entries = Object.keys(stats).reduce(
  (agg, src) =>
    // /.next/app.js
    Object.assign(agg, {
      [`.next/${src}`]: `/_next/${stats[src].hash}/${src}`,
    }),
  {}
);

module.exports = {
  globDirectory: '.',
  globPatterns: Object.keys(entries)
    .map(k => `./${k}`)
    .concat(['./.next/bundles/**/*.js', './.next/chunks/**/*.js']),
  clientsClaim: true,
  skipWaiting: true,
  swDest: `${dotNext}/sw.js`,
  globIgnores: [
    '.next/*.js',
    './workbox-cli-config.js',
    '.next/dist/**/*',
    '*.LICENSE',
  ],
  modifyUrlPrefix: Object.assign({}, entries, {
    '.next/bundles/pages/index.js': `/_next/${buildId}/page/`,
    '.next/bundles/pages': `/_next/${buildId}/page`,
    '.next/chunks': `/_next/${buildId}/webpack/chunks`,
  }),
  runtimeCaching: [
    {
      urlPattern: /^https:\/\/magicleap.com\/assets\/fonts\//g,
      handler: 'cacheFirst',
    },
    {
      urlPattern: /\.(gif|png|gltf|bin|jpe?g|svg|ico)$/i,
      handler: 'cacheFirst',
    },
    {
      urlPattern: /\.js$/i,
      handler: 'cacheFirst',
    },
    {
      urlPattern: /\/sw\.js$/g,
      handler: 'networkOnly',
    },
  ],
};