Как предварительно кэшировать ВСЕ страницы с помощью next-pwa

Question

Как бы я сделал предварительное кэширование всех страниц моего nextjs приложение, использующее next-pwa? Допустим, у меня есть следующие страницы:

• /
• /о
• / posts

Я хочу, чтобы все они были предварительно кэшированы, чтобы все они были доступны в автономном режиме после первой загрузки приложения. На данный момент я использую настраиваемую конфигурацию веб-пакета, чтобы скопировать .next/build-manifest.json передать в public/build-manifest. Затем, когда приложение загружается в первый раз, я регистрирую activated обработчик, который получает build-manifest.jsonфайл, а затем добавляет их в кеш. Это работает, но кажется окольным путем к достижению этого, и это в некоторой степени зависит от деталей реализации. Как мне сделать то же самое более каноническим образом?

На данный момент мой next.config.js файл выглядит так

      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,
      },
    },
  ],
])

И мой крючок сервис-воркера выглядит так

      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()
    }
  }, [])
}

Любая помощь приветствуется. Спасибо.