404 error when trying to register serviceWorker

Question

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.

Answer 1

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.