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

我正在尝试使用via正确实现一个服务人员。为了创建一个自定义服务工作者，我使用workbox webpack插件的InjectManifest类。我在设置用于运行“now dev”命令的开发环境方面遇到了一些问题

我当前的尝试在这里：

以下是我的问题：

安装失败

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

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

网页警告

当使用我的第一期修复程序运行“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以防止前面的警告显示。理想情况下，我宁愿不这样做

我尝试将我的网页包配置设置为：

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

然而，这并没有消除警告

---

我很难找到这个bug是否仍有可能出现更多错误？我是否错误地设置了webpack watch配置？

我也遇到了同样的问题。我决定不使用下一个脱机和直接使用

workbox

。如果您直接使用

workbox

，您可以对服务人员进行移动控制，并根据您的需要提供更多服务。

我也遇到了同样的问题。我决定不使用下一个脱机和直接使用

workbox

。如果您直接使用

workbox

，您可以对服务人员进行移动控制，并对您的需求进行更多的覆盖。

您得到了答案吗？不幸的是，没有。。。当我想创建一个新的软件时，我仍然在切换generateInDevMode。你得到答案了吗？不幸的是没有。。。当我想创建一个新的软件时，我仍然在切换generateInDevMode。@younnes 1）你能告诉我你在哪里声明了服务工作者吗？在公用文件夹内？2） “TypeError:ServiceWorker脚本评估失败”您是如何克服上述错误的？@NevinMadhukarK我在next.config.js中使用GenerateSW在构建文件夹中创建service-worker.js和manifest.js的？下一步。您是否可以在fiddle中共享您的next.config.js？只是好奇，你是说这个吗？在next.config.js的网页部分添加它？@younnes 1）你能告诉我你在哪里声明了服务工作者吗？在公用文件夹内？2） “TypeError:ServiceWorker脚本评估失败”您是如何克服上述错误的？@NevinMadhukarK我在next.config.js中使用GenerateSW在构建文件夹中创建service-worker.js和manifest.js的？下一步。您是否可以在fiddle中共享您的next.config.js？只是好奇，你是说这个吗？是否将其添加到next.config.js的网页部分？