404 error when trying to register serviceWorker

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.

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.

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.

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:

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

The HTML document which is trying to register a service worker and SW.js should be in the same directory.