A bad HTTP response code (404) was received when fetching the script

Chrome=>Dev Tools=>Application=>Service Workers=>Update on reload (selected)

More details

On the page where these errors are displayed, go to Dev Tools -> Applications -> Clear storage -> Clear site data. The Service Workers has one feature, it really will cache the information. I hope this helps you.

The reason is that there is a pending subscription to a service worker for which the current application has no source code (hence the 404).

This means that it is very likely it's not your pages'fault.

Anyway I understand that red lines can be annoying when debuging...

A possible shortcut solution is to unsubscribe by hand from the browser inspect page console:

To have a look of how many registrations are there:

navigator.serviceWorker.getRegistrations();

To remove the first registration:

navigator.serviceWorker.getRegistrations().then((r)=>{r[0].unregister()})

Hope this helps.

the service worker JS file which you are registering does not exist.

It might be that you are giving service-worker.js while registering, and it is working fine at home page, because this file exists there. but on another page, some inner directory or htaccess rewrite or controller path, service-worker.js not exist.

so give full path to js file: http://www.example.com/service-worker.js

means, instead of this:

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

You should write:

navigator.serviceWorker.register('https://www.example.com/service-worker.js')

this way in all your directories or controllers, this path is fixed and file exists and you will not see that 404 error in console.

Give production: false, in Angular Projects only it's working. environment.prod.ts => production: false, environment.ts => production: false,

For me in react application, I was getting 404 when sw.js file was placed inside src directoy, once I moved the sw.js file inside public directory, the issue got resolved