尝试注册serviceWorker时出现404错误

Question

尝试注册服务工作者时出现此错误：

  

无法注册ServiceWorker：获取脚本时收到了错误的HTTP响应代码（404）。

我正在使用离子，这就是我在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()的网址与HTML文档的路径相关。您需要确保您的service-worker.js文件与您所在页面对应的.html文件位于同一目录中。

Answer 2

尝试注册服务工作者和SW.js的HTML文档应位于同一目录中。

Answer 3

服务工作者和index.html文件应位于公共目录中。

Answer 4

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

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

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

Answer 5

这些都是很好的答复，这使我感到困惑。我只是想添加另一件事，以防其他人遇到这个问题并像我一样感到困惑。

如果您使用的是Webpack之类的捆绑程序，则该路径必须相对于编译版本。

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

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

Answer 6

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

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