wait for load event before registering service worker

This commit is contained in:
Felix Linker
2018-09-12 00:38:13 +02:00
parent b419b8b104
commit b02ca117be

View File

@@ -324,44 +324,46 @@ export default class Coriolis extends React.Component {
// Listen for appcache updated event, present refresh to update view // Listen for appcache updated event, present refresh to update view
// Check that service workers are registered // Check that service workers are registered
if ('serviceWorker' in navigator) { if ('serviceWorker' in navigator) {
// Your service-worker.js *must* be located at the top-level directory relative to your site. window.addEventListener('load', () => {
// It won't be able to control pages unless it's located at the same level or higher than them. // Your service-worker.js *must* be located at the top-level directory relative to your site.
// *Don't* register service worker file in, e.g., a scripts/ sub-directory! // It won't be able to control pages unless it's located at the same level or higher than them.
// See https://github.com/slightlyoff/ServiceWorker/issues/468 // *Don't* register service worker file in, e.g., a scripts/ sub-directory!
const self = this; // See https://github.com/slightlyoff/ServiceWorker/issues/468
navigator.serviceWorker.register('/service-worker.js').then(function(reg) { const self = this;
// updatefound is fired if service-worker.js changes. navigator.serviceWorker.register('/service-worker.js').then(function(reg) {
reg.onupdatefound = function() { // updatefound is fired if service-worker.js changes.
// The updatefound event implies that reg.installing is set; see reg.onupdatefound = function() {
// https://slightlyoff.github.io/ServiceWorker/spec/service_worker/index.html#service-worker-container-updatefound-event // The updatefound event implies that reg.installing is set; see
var installingWorker = reg.installing; // https://slightlyoff.github.io/ServiceWorker/spec/service_worker/index.html#service-worker-container-updatefound-event
var installingWorker = reg.installing;
installingWorker.onstatechange = function() { installingWorker.onstatechange = function() {
switch (installingWorker.state) { switch (installingWorker.state) {
case 'installed': case 'installed':
if (navigator.serviceWorker.controller) { if (navigator.serviceWorker.controller) {
// At this point, the old content will have been purged and the fresh content will // At this point, the old content will have been purged and the fresh content will
// have been added to the cache. // have been added to the cache.
// It's the perfect time to display a "New content is available; please refresh." // It's the perfect time to display a "New content is available; please refresh."
// message in the page's interface. // message in the page's interface.
console.log('New or updated content is available.'); console.log('New or updated content is available.');
self.setState({ appCacheUpdate: true }); // Browser downloaded a new app cache. self.setState({ appCacheUpdate: true }); // Browser downloaded a new app cache.
} else { } else {
// At this point, everything has been precached. // At this point, everything has been precached.
// It's the perfect time to display a "Content is cached for offline use." message. // It's the perfect time to display a "Content is cached for offline use." message.
console.log('Content is now available offline!'); console.log('Content is now available offline!');
self.setState({ appCacheUpdate: true }); // Browser downloaded a new app cache. self.setState({ appCacheUpdate: true }); // Browser downloaded a new app cache.
} }
break; break;
case 'redundant': case 'redundant':
console.error('The installing service worker became redundant.'); console.error('The installing service worker became redundant.');
break; break;
} }
};
}; };
}; }).catch(function(e) {
}).catch(function(e) { console.error('Error during service worker registration:', e);
console.error('Error during service worker registration:', e); });
}); });
} }
window.onerror = this._onError.bind(this); window.onerror = this._onError.bind(this);