In this codelab you will learn how to add Background Sync to your Progressive Web App.
Start codelab
Codelab Flow
Setting up
L
W
Background Sync
How to configure
To your js source folder, create an empty sync.js file and copy and paste the code
snippet below to it.
Remember to add it to your pages at the botton of your project's pages as shown at the botton of this githhub doc 😊
Background Sync is activated once your page is loaded by default. Though you could re-configure this to anything. Maybe listen to events like on click with javascript.
((window) => {
'use strict';
// Add Background Sync on page load
document.addEventListener("DOMContentLoaded", () => {
window.registerBGSync();
});
// Exposing `registerSync()` globally for only development purpose
window.registerBGSync = () => {
// If `serviceWorker` is registered and ready
navigator.serviceWorker.ready
.then((registration) => {
// Registering `Background Sync` event
return registration.sync.register('Comments')
// `Comments` is sync tag name ; could be anything 😉
.then((rs) => {
console.info('Background Sync registered!');
}, () => {
console.error('Background Sync registered failed.');
});
});
}
})(window);