问题标签 [service-worker-config]

我正在使用 Next JS 进行电子商务。我正在尝试提高页面加载速度，该网站加载了大量 JS 文件，因为它拥有大量第三方供应商（并且无法删除）。我打算用 Service Worker 缓存一些静态资产。

我将使用使用 workbox-webpack-plugin 的库next-offline。这是我打算使用的配置：

所以，我的问题如下：

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

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

谢谢，

是否可以在 ngsw-config.json 文件上执行多个 dataGroups 以运行不同的 cacheConfigs ？例如

]

如果没有，代码中有办法做到这一点吗？

当我测试以下代码并转到 chrome devtools 的缓存存储时，它是空的。它一会儿起作用，一会儿改变cacheName它就停止了，不确定它是否相关。

这是软件本身：

当我尝试访问http://localhost/visites/它应该获取预缓存文件visites/index.php。所以我想我必须在某个地方指出这个特定的路线与那个文件相匹配，你知道我该怎么做吗？

我把我的 SW 代码留在这里以防万一：

我正在使用 Angular 来制作 PWA 应用程序。

• 角度：12

发生了什么是：

• 我转到我的应用程序（在线模式）-> 网络应用程序可以正常显示
• 打开开发者控制台并将连接更改为离线
• 按 F5 重新加载应用程序

发生什么了：

• 下图是我点击重新加载时屏幕上显示的内容：

这是我的ngsw-config.json

• 清单.json

我们被来自我们自己的客户端（已知 IP）的大量请求击中了“/assets/workers/null”端点。

我们可能会在 2 分钟的窗口内看到来自 25 个已知 IP 地址的 6000 个请求，几个小时后会看到少数对该端点的请求。

这看起来与我们的浏览器推送事件通知服务工作者有关，它托管为“/assets/workers/notification.service.worker.js”，但我看不到任何看起来会解析为“null”的东西”。

我没有编写原始代码，并且在这一点上与浏览器服务人员合作的机会有限，我正在尝试确定是否有任何东西可以解释“/assets/workers/null”的奇怪流量。任何帮助是极大的赞赏。

这是服务工作者的代码：

使用 Service Worker 进行基本项目时出现以下错误

我在src文件夹下用于相同 sw.js 文件的文件

Public文件夹下的 swDev.js 文件

我使用 workbox generateSW 方法来生成服务工作者，这是我使用的配置：

我在文档中找不到删除旧缓存的过期时间，那么如何在一段时间后使用 workbox-build generateSW 清理缓存？

我是服务工作者的新手，我用 next-pwa 制作它并且它崩溃了：/对于第一次加载它工作得很好，在另一个页面上导航也很好，但是几秒钟后当我回到缓存页面时它崩溃了，在网络中关于文件的选项卡写入 404 未找到，并且在控制台中我已经佩戴：源“http://localhost:3000/_next/static/chunks/pages/admin.js?ts=1626295746921”的脚本加载失败。 其他页面也有同样的警告，一些页面正在工作，但也找不到动态导入的文件：| 任何想法 ？

这是我的 next.config.js

这是我的 service-Worker.js

我打算将 Workbox google 的库与 react js 应用程序一起使用。我使用以下命令创建了一个应用程序

npx create-react-app myapp --template cra-template-pwa

我想静态缓存所有内容（js、jpg、html）以供离线使用。创建后，检查生成的文件，无法理解如何配置静态缓存。生成的文件具有生产条件检查。我可以在 localhost 中测试静态缓存和离线模式吗？

那里有许多 npm 安装，但不确定哪一个是正确的。是否有一个我可以遵循的示例来配置我的网络应用程序。

• npm install workbox-webpack-plugin
• npm install react-app-rewire-workbox
• npm install react-app-rewired

谢谢。