опасна ли эта конфигурация Service Worker?

Question

Я работаю над одной электронной коммерцией, используя Next JS. Я пытаюсь улучшить скорость загрузки страницы, этот веб-сайт загружает много файлов JS из-за количества сторонних поставщиков, которые он имеет (и не может удалить). Я планирую кэшировать некоторые статические активы с помощью Service Workers.

Я собираюсь использовать библиотеку next-offline, которая использует плагин workbox-webpack. Это конфигурация, которую я планирую использовать:

      workboxOpts: {
              swDest: '../public/service-worker.js',
              maximumFileSizeToCacheInBytes: 20000000,
              runtimeCaching: [
                {
                  urlPattern: /https:\/\/fonts\.googleapis\.com\/icon[\w\-_\/\.\:\?\=\&\+]*/,
                  handler: 'CacheFirst',
                  options: {
                    cacheName: 'google-fonts',
                    expiration: {
                      maxEntries: 10,
                      maxAgeSeconds: 30 * 24 * 60 * 60, // 1 month
                    },
                  },
                },
                {
                  urlPattern: /[\w\-_\/\.:]*\.(jpeg|png|jpg|ico|svg)\??.*/,
                  handler: 'CacheFirst',
                  options: {
                    cacheName: 'cache-img',
                    expiration: {
                      maxEntries: 15,
                      maxAgeSeconds: 2 * 24 * 60 * 60, // 2 days
                    },
                  },
                },
                {
                  urlPattern: /^((?!monetate).)*\.(js)$/,
                  handler: 'StaleWhileRevalidate',
                },
                {
                  urlPattern: /\/(browse.*|catalogsearch.*)$/,
                  handler: 'StaleWhileRevalidate',
                },
              ],
            },

Итак, мои вопросы следующие:

1. вы считаете такую ​​конфигурацию рискованной? Вы бы что-нибудь поменяли? Я имею в виду, что в прошлом у меня было несколько проблем с кешированием JS-файлами сервис-воркерами, когда мне приходилось устанавливать версию для каждого файла, чтобы он работал. Однако теперь кажется, что в Workbox эта проблема решена .
2. Должен ли я установить maxAge для стратегии Stale при повторной проверке? Я хочу повторно проверять данные каждый раз, когда пользователь перезагружает страницу. Однако здесь говорится, что он будет использовать кеш без повторной проверки, пока не истечет время maxAge. Что произойдет, если я не установлю в настройках рабочего окна maxAge?

Я тестирую это на развертывании Vercel (в тестовой среде), и кажется, что он работает нормально, и я думаю перенести его в производство.

Спасибо,

Answer 1

Вы можете использовать next-offline(я не часто его использовал), или вы можете продолжить, используя workbox-webpack-plugin. Существует забота о том, какой файл повторно извлекать после кеширования (использует ревизию и хеш (по URL)).Прочтите этот раздел: https://developers.google.com/web/tools/workbox/modules/workbox-precaching#how_workbox-precaching_works