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 have a push message subscription?     .... 

hangs -- the function is never called. Why?

Answer 1

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.

Answer 2

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>