navigator.serviceWorker is never ready
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?
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.
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>
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 + '/')
}
In my case - simply close the tab and open it again...