Question

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

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

这是我的问题：

无法安装

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

这解决了预缓存响应不良的问题，但是我没有看到在其他地方实现这一点，因此我对这种方法没有信心。 确保正确安装软件的标准方法是什么？

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监视配置？

Answer 1

我有同样的问题。并且我决定不使用下一个脱机方法，而是直接使用workbox。如果您直接使用workbox，则可以对服务人员进行移动控制，并且可以满足您的更多需求。

如何在Nextjs中使用Workbox实现自定义Service Worker

1 个答案: