这个 Service Worker 配置有风险吗？

问题描述

我正在使用 Next JS 开展一项电子商务。我正在尝试提高页面加载速度，由于其拥有的第三方供应商数量（并且无法删除），该网站加载了大量 JS 文件。我打算用 Service Workers 缓存一些静态资产。

我将使用使用 workBox-webpack-plugin 的库 next-offline。这是我计划使用的配置：

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)\??.*/,options: {
                    cacheName: 'cache-img',expiration: {
                      maxEntries: 15,maxAgeSeconds: 2 * 24 * 60 * 60,// 2 days
                    },{
                  urlPattern: /^((?!monetate).)*\.(js)$/,handler: 'StaleWhileRevalidate',{
                  urlPattern: /\/(browse.*|catalogsearch.*)$/,],

所以，我的问题如下：

1. 你觉得这个配置有风险吗？你会改变什么吗？我的意思是，过去我在 Service Workers 缓存 JS 文件时遇到了几个问题，我必须为每个文件设置一个版本才能使其工作。然而，现在看来workbox fixed this issue。
2. 我应该在重新验证策略时为 Stale 设置 maxAge 吗？我想在用户每次重新加载页面时重新验证数据。但是 here 它说它将使用缓存而不重新验证，直到 maxAge 时间完成。 如果我没有在工作箱设置中设置 maxAge 会怎样？

我正在 Vercel 部署上（在测试环境中）对此进行测试，它似乎运行良好，我正在考虑将其移至生产环境。

谢谢，

解决方法

你可以使用next-offline（我没怎么用过），或者你可以继续使用workbox-webpack-plugin。需要注意缓存后要重新获取的文件（使用修订版和哈希（在 url 上））。 阅读本节： https://developers.google.com/web/tools/workbox/modules/workbox-precaching#how_workbox-precaching_works