如何在 Nextjs 中使用 Workbox 实现自定义服务工作进程

Question

我正在尝试通过下一次离线使用 Workbox 正确实现服务工作者。为了创建自定义服务工作者，我正在使用workbox-webpack-plugin的InjectManifest类。我在设置开发环境以运行"now dev"命令时遇到问题。

我目前的尝试在这里：https://github.com/awb305/nextjs-service-worker-workbox。

这是我的问题：

1. 安装失败

当运行"now dev"时，我的软件将无法安装和记录：

Uncaught (in promise) bad-precaching-response: The precaching request for 'http://localhost:3000/public/service-worker.js.map?__WB_REVISION__=a7274c8542abc1c5ddaad6ca132a250e' failed with an HTTP status of 404.
at PrecacheController._addURLToCache (http://localhost:3000/service-worker.js:956:13)
at async Promise.all (index 0)
at async PrecacheController.install (http://localhost:3000/service-worker.js:874:5)

除非我在now.json文件中添加以下重定向：

{
"src": "/public/(.*)",
"status": 301,
"headers": { "Location": "/" }
},
{
"src": "/_next/static/development/pages/next/dist/pages/(.*)",
"status": 301,
"headers": { "Location": "/" }
}

这解决了糟糕的预缓存响应，但是我还没有在其他地方看到它实现，所以我对这种方法没有信心。确保正确安装软件的标准方法是什么？

2. Webpack 警告

当使用我的第一个问题的修复程序运行"now dev"时，我会收到以下警告：

InjectManifest has been called multiple times, perhaps due to running webpack in --watch mode. The precache manifest generated after the first call may be inaccurate! Please see https://github.com/GoogleChrome/workbox/issues/1790 for more information.

目前我唯一的解决方法是在我的next.config.js中切换generateInDevMode配置。我必须使用generateInDevMode运行一次"now dev"：如果我想安装一个新的服务工作线程，则为 true。然后我杀死了"now dev"并设置generateInDevMode： false以防止显示之前的警告。理想情况下，我宁愿不这样做。

我尝试将我的 webpack 配置设置为：

webpackDevMiddleware(config) {
// Fixes npm packages that depend on `fs` module
config.node = {
fs: "empty"
};
config.watch = false; 
return config;}

然而，这并没有消除警告。

我很难追踪该错误。无论如何都会发现更多错误吗？我是否错误地设置了 webpack 手表配置？

Answer 1

我遇到了同样的问题。 我决定不使用下一个离线并直接使用workbox. 如果您直接使用workbox，则可以对服务工作者进行移动控制，并更多地满足您的需求。