1

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

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

这是我的问题：

  1. 安装失败

运行“now dev”时，我的 SW 将无法安装和记录：

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": "/" }
  }

这解决了 bad-precaching-reponse，但是我还没有在其他地方看到这个实现，所以我对这种方法没有信心。确保正确安装软件的标准方法是什么？

  1. 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: true运行一次“now dev” 。然后我杀死“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 watch 配置？

4

1 回答 1

0

我有同样的问题。我决定不使用下一个离线并直接使用workbox. 如果您workbox直接使用，您可以控制您的服务人员并更多地满足您的需求。

于 2020-05-01T08:10:09.803 回答