尝试注册 serviceWorker 时出现 404 错误

Question

尝试注册 Service Worker 时出现此错误：

注册 ServiceWorker 失败：获取脚本时收到错误的 HTTP 响应代码 (404)。

我正在使用 ionic，这就是我在 app.js 中的内容：

   if ('serviceWorker' in navigator) {
      navigator.serviceWorker.register('service-worker.js').then(function(registration) {
      console.log('ServiceWorker registration successful with scope: ', registration.scope);
    }).catch(function(err) {
      //registration failed :(
      console.log('ServiceWorker registration failed: ', err);
    });
  }else {
    console.log('No service-worker on this browser');
  }

在目录中，我在同一个文件夹中的 app.js 旁边有 service-worker.js 文件。

在 ubuntu 桌面上使用最新的 chrome 版本。

Answer 1

您提到service-worker.js与app.js位于同一目录中，但传递给.register()的 URL 是相对于 HTML 文档路径的。 您需要确保您的service-worker.js文件与您所在页面对应的.html文件位于同一目录中。

Answer 2

尝试注册 Service Worker 和 SW.js 的 HTML 文档应该在同一目录中。

Answer 3

这些都是很好的回复，它帮助我解决了困惑。 我只是想添加另一件事，以防其他人遇到这个问题并且像我一样感到困惑。

如果您使用的是 Webpack 之类的打包器，则路径需要相对于编译版本。

如果您的 sw.js 位于/src文件夹中，但您的 html 的编译版本位于./dist文件夹中，并且您注册 sw.js 的路径是"./sw.js" ，则 service worker 将进行搜索在 sw.js 文件的 dist 文件夹中。

我对上述 Webpack 问题的解决方案是使用copy-webpack-plugin并将文件从 src 文件夹发送到 dist 文件夹。

Answer 4

您只需要将正确的路径传递给 navigator.serviceWorker.register 并且它不一定需要与 html 文件相同。

例如，我的 service-worker.js 在我的应用程序的 Scripts 文件夹中，因此我需要在 navigator.serviceWorker.register 上传递路径“/Scripts/service-worker.js”，例如：

navigator.serviceWorker.register('/Scripts/service-worker.js')

Answer 5

service workers 和 index.html 文件应该在一个公共目录中。

Answer 6

尝试使用 ~ 将源设置为在根目录中查找
像这样：

 navigator.serviceWorker.register('~service-worker.js')