Блог

Требование: я пытаюсь использовать service worker и кэшировать статические файлы, чтобы иметь преимущество в сокращении HTTP-запросов и повышении производительности сайта. В дальнейшем я бы переключился на автономный режим, кэширование изображений, API и т.д.

Я видел плагины:

https://github.com/hanford/next-offline и https://www.npmjs.com/package/next-pwa

Кажется, это работает. Хотя я пытался выяснить, были ли примеры (nextjs workbox).

У Next js есть пример дляhttps://github.com/vercel/next.js/tree/canary/examples/with-next-offline. Но я бы хотел просто использовать workbox для этого.

У кого-нибудь есть рабочие примеры? Подойдет даже базовый.

В настоящее время я не использую пользовательский сервер. Просто используя встроенный конструктор nextjs (https://nextjs.org/docs/getting-started#manual-setup)

Я сам нашел ответ:

Ссылка: https://developers.google.com/web/tools/workbox/reference-docs/latest/module-workbox-build#.generateSW Я выполнил кэширование во время выполнения для своего приложения здесь и добавил файл workbox в базовый файл:

  // Use the window load event to keep the page load performant
useEffect(() => {
   window.addEventListener("load", () => {
        const serviceWorkerScope = `/${country}/workbox-worker.js`
        navigator.serviceWorker
          .register(serviceWorkerScope)
          .then(() => {
            logger.info(`Service worker registered at ${serviceWorkerScope}`)
          })
          .catch(error => {
            logger.error("Error in serviceWorker registration: ", error)
          })
      })
})
   
  

 I have added comments,

    // File to generate the service worker.
    require("dotenv").config()
    const workboxBuild = require("workbox-build")
    const { COUNTRY: country, NODE_ENV } = process.env
    const urlPattern = new RegExp(`/${country}/static|_next/.*/`)
    
    // https://developers.google.com/web/tools/workbox/reference-docs/latest/module-workbox-build#.generateSW
    const buildSW = () => {
      return workboxBuild.generateSW({
        swDest: "public/workbox-worker.js",
        clientsClaim: true,
        mode: NODE_ENV,
        skipWaiting: true,
        sourcemap: false,
        runtimeCaching: [
          {
            urlPattern: urlPattern,
    
            // Apply a cache-first strategy.
            handler: "CacheFirst",
            options: {
              cacheName: "Static files caching",
              expiration: {
                maxEntries: 50,
                maxAgeSeconds: 15 * 60, // 15minutes
              },
            },
          },
        ],
      })
    }
    
    buildSW()