0
585
Views404 error when trying to register serviceWorker
I get this error when trying to register the service worker:
Failed to register a ServiceWorker: A bad HTTP response code (404) was gwreceived when fetching the script.
I'm working with ionic and this is what I have in the 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.
Using latest chrome version on ubuntu desktop.
3 answers
Answer question0
You mention that you have service-worker.js in 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.js file is in the same directory as the .html file corresponding to the page you're on.
0
The HTML document which is trying to register a service worker and SW.js should be in the same directory.
0
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.
If your sw.js is in the /src folder but the compiled version of your html goes to a ./dist folder 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.
My solution to the problem above for Webpack is to use copy-webpack-plugin and send the file over from the src folder to the dist folder.