Javascript 尝试注册 serviceWorker 时出现 404 错误
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/30336685/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
404 error when trying to register serviceWorker
提问by George Cscnt
I get this error when trying to register the service worker:
尝试注册 Service Worker 时出现此错误：
Failed to register a ServiceWorker: A bad HTTP response code (404) was gwreceived when fetching the script.
注册 ServiceWorker 失败：获取脚本时收到错误的 HTTP 响应代码 (404)。
I'm working with ionic and this is what I have in the app.js:
我正在使用 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');
}
On the directory I have the service-worker.js file right next to the app.js on the same folder.
在目录中，我在同一个文件夹中的 app.js 旁边有 service-worker.js 文件。
Using latest chrome version on ubuntu desktop.
在 ubuntu 桌面上使用最新的 chrome 版本。
回答by Jeff Posnick
You mention that you have service-worker.jsin the same directory as app.js, but the URL passed to .register()is relative to the HTML document's path. You need to make sure your service-worker.jsfile is in the same directory as the .htmlfile corresponding to the page you're on.
您提到您service-worker.js与 位于同一目录中app.js，但传递给的 URL.register()是相对于 HTML 文档的路径。您需要确保您service-worker.js的.html文件与您所在页面对应的文件位于同一目录中。
回答by Hitesh Sahu
The HTML document which is trying to register a service worker and SW.js should be in the same directory.
尝试注册 Service Worker 和 SW.js 的 HTML 文档应该在同一目录中。
回答by Diego Cotini
You just need need to pass the right path to navigator.serviceWorker.register and it doesn't necessarily need to be the same of html file.
您只需要将正确的路径传递给 navigator.serviceWorker.register 并且它不一定需要与 html 文件相同。
For instance, my service-worker.js is in the Scripts folder of my app, thus I needed to pass the path "/Scripts/service-worker.js" on navigator.serviceWorker.register, like:
例如，我的 service-worker.js 在我的应用程序的 Scripts 文件夹中，因此我需要在 navigator.serviceWorker.register 上传递路径“/Scripts/service-worker.js”，例如：
navigator.serviceWorker.register('/Scripts/service-worker.js')
回答by Abhishek Jha
service workers and index.html file should be in a common directory.
service workers 和 index.html 文件应该在一个公共目录中。
回答by PepperAddict
These are great replies and it helped with my confusion. I just wanted to add another thing just in case others are running into this problem and are confused as I was.
这些都是很好的回复，它帮助我解决了困惑。我只是想添加另一件事，以防其他人遇到这个问题并且像我一样感到困惑。
If you are using a bundler like Webpack, the path needs to be relative to the compiled version.
如果您使用的是 Webpack 之类的打包器，则路径需要相对于编译版本。
If your sw.js is in the /srcfolder but the compiled version of your html goes to a ./distfolder and your path to register the sw.js is "./sw.js", service worker is going to be searching in the dist folder for the sw.js file.
如果您的 sw.js 在该/src文件夹中，但您的 html 的编译版本位于一个./dist文件夹中，并且您注册 sw.js 的路径是"./sw.js"，则 Service Worker 将在 dist 文件夹中搜索 sw.js 文件。
My solution to the problem above for Webpack is to use copy-webpack-pluginand send the file over from the src folder to the dist folder.
我对上述 Webpack 问题的解决方案是使用copy-webpack-plugin文件并将其从 src 文件夹发送到 dist 文件夹。
回答by user3423593
Try to set the source to look in the root directory using a ~
Like this:
尝试使用 ~ 将源设置为在根目录中查找，如下
所示：
navigator.serviceWorker.register('~service-worker.js')
