navigator.serviceWorker is never ready

Question

I registered a service worker successfully, but then the code

navigator.serviceWorker.ready.then(function(serviceWorkerRegistration) {
    // Do we already h         


        

Answer 1

Like said in the accepted answer, the problem is, indeed, probably because your service worker JS file is in a different path than your current page.

By default, the scope of the service worker is the path to its JS file. If your JS file is reachable at http://www.example.com/assets/js/service-worker.js, your service worker will only work/"be ready" for URL starting with /assets/js/.

But, you can change the scope of the service worker. First, you need to register if using the scope option:

navigator.serviceWorker.register('http://www.example.com/assets/js/service-worker.js', {
    scope: '/',
});

If you do, just this, you will get errors in the Chrome console:

The path of the provided scope ('/') is not under the max scope allowed ('/assets/js/'). Adjust the scope, move the Service Worker script, or use the Service-Worker-Allowed HTTP header to allow the scope.

/admin/#/builder:1 Uncaught (in promise) DOMException: Failed to register a ServiceWorker for scope ('http://www.example.com/') with script

('http://www.example.com/assets/js/service-worker.js'): The path of the provided scope ('/') is not under the max scope allowed ('/assets/js/'). Adjust the scope, move the Service Worker script, or use the Service-Worker-Allowed HTTP header to allow the scope.

You then need to create an .htacess file at the root of your website with the following content:

<IfModule mod_headers.c>
    <Files ~ "service-worker\.js">
        Header set Service-Worker-Allowed: /
    </Files>
</IfModule>

Answer 2

Add service-worker.js file to your project root directory

You can download service-worker.js file from Link

And use below code to register service worker.

if ('serviceWorker' in navigator) {
   navigator.serviceWorker
     .register('./service-worker.js', { scope: './' })
       .then(function (registration) {
          console.log("Service Worker Registered");
    })
      .catch(function (err) {
        console.log("Service Worker Failed to Register", err);
     })

 }

Answer 3

In my case - simply close the tab and open it again...

Answer 4

Had the same issue, but putting service worker and installing script in the same directory didn't solve this. For me the solution was to add a "/" to the end of the url. So i had:

http://localhost:9105/controller/main.js - installing script

http://localhost:9105/controller/sw.js - service worker

http://localhost:9105/controller/index.html - page

And when the url in the browser was http://localhost:9105/controller service worker have never been ready, but when url is http://localhost:9105/controller/ it works fine.

I used code below to control this

if (!window.location.href.endsWith('/')) {
    window.location.assign(window.location.href + '/')
  }

Answer 5

The problem was that the service-worker.js file was stored in an assets sub-directory.

Don't do that: store the service-worker.js in the root of your app (or higher). That way your app can access the service-worker.

See HTML5Rocks article --

One subtlety with the register method is the location of the service worker file. You'll notice in this case that the service worker file is at the root of the domain. This means that the service worker's scope will be the entire origin. In other words, this service worker will receive fetch events for everything on this domain. If we register the service worker file at /example/sw.js, then the service worker would only see fetch events for pages whose URL starts with /example/ (i.e. /example/page1/, /example/page2/).

Added

A new problem is that the serviceworker is never ready if the page is hard-reloaded. Subsequent soft page reloads work fine. Google's own sample code fails. See the Chrome bug report.

The bug fix was included with Chrome 44.