How to precache ALL pages with next-pwa

Question

How would I go about precaching all the pages of my nextjs app using next-pwa?. Let's say I have the following pages:

• /
• /about
• /posts

I want all of them to be precached so that they are all available offline once the app has been loaded the first time. At the moment I'm using a custom webpack config to copy the .next/build-manifest.json file over to public/build-manifest. Then once the app loads the first time, I register an activated handler that fetches the build-manifest.json file and then adds them to the cache. It works but it seems like a roundabout way of achieving it, and it depends somewhat on implementation details. How would I accomplish the same in a more canonical fashion?

At the moment, my next.config.js file looks like this

const pwa = require('next-pwa')
const withPlugins = require('next-compose-plugins')
const WebpackShellPlugin = require('webpack-shell-plugin-next')

module.exports = withPlugins([
  [
    {
      webpack: (config, { isServer }) => {
        if (isServer) {
          config.plugins.push(
            new WebpackShellPlugin({
              onBuildExit: {
                scripts: [
                  'echo "Transfering files ... "',
                  'cp -r .next/build-manifest.json public/build-manifest.json',
                  'echo "DONE ... "',
                ],
                blocking: false,
                parallel: true,
              },
            })
          )
        }

        return config
      },
    },
  ],
  [
    pwa,
    {
      pwa: {
        dest: 'public',
        register: false,
        skipWaiting: true,
      },
    },
  ],
])

And my service worker hook looks like this

import { useEffect } from 'react'
import { Workbox } from 'workbox-window'

export function useServiceWorker() {
  useEffect(() => {
    if (
      typeof window !== 'undefined' &&
      'serviceWorker' in navigator &&
      (window as any).workbox !== undefined
    ) {
      const wb: Workbox = (window as any).workbox

      wb.addEventListener('activated', async (event) => {
        console.log(`Event ${event.type} is triggered.`)
        console.log(event)

        const manifestResponse = await fetch('/build-manifest.json')
        const manifest = await manifestResponse.json()

        const urlsToCache = [
          location.origin,
          ...manifest.pages['/[[...params]]'].map(
            (path: string) => `${location.origin}/_next/${path}`
          ),

          `${location.origin}/about`,
          ...manifest.pages['/about'].map((path: string) => `${location.origin}/_next/${path}`),

          `${location.origin}/posts`,
          ...manifest.pages['/posts'].map((path: string) => `${location.origin}/_next/${path}`),
        ]

        // Send that list of URLs to your router in the service worker.
        wb.messageSW({
          type: 'CACHE_URLS',
          payload: { urlsToCache },
        })
      })

      wb.register()
    }
  }, [])
}

Any help is greatly appreciated. Thanks.