Service Workers - Background Sync

├── README.md ├── sw.js ├── index.html ├── style.css └── script.js /README.md: -------------------------------------------------------------------------------- 1 | This repository showcases a very simple demo of background synchronization using Service Workers. 2 | 3 | For more info visit [this](https://dbwriteups.wordpress.com/2015/11/16/service-workers-part-4-background-sync/) page. -------------------------------------------------------------------------------- /sw.js: -------------------------------------------------------------------------------- 1 | self.addEventListener('sync', function(event) { 2 | if (event.registration.tag == "oneTimeSync") { 3 | console.dir(self.registration); 4 | console.log("One Time Sync Fired"); 5 | } 6 | }); 7 | 8 | self.addEventListener('periodicsync', function(event) { 9 | console.dir(event); 10 | if (event.registration.tag == "periodicSync") { 11 | console.log("Periodic Sync fired"); 12 | } 13 | }); 14 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Service Workers - Background Sync 6 | 7 | 8 | 9 | 10 | 11 |

12 |

Service Worker - Communication

13 | 14 | 15 |

Note: Open your console and make sure to refresh the page once to get demo working. One time sync supported in Chrome Canary. Periodic sync not supported yet.

16 |

17 | 18 | 19 | 20 | -------------------------------------------------------------------------------- /style.css: -------------------------------------------------------------------------------- 1 | body { 2 | background: #09F; 3 | } 4 | 5 | .container { 6 | position: absolute; 7 | width: 320px; 8 | top: 50%; 9 | left: 50%; 10 | -webkit-transform: translate(-50%, -50%); 11 | -moz-transform: translate(-50%, -50%); 12 | transform: translate(-50%, -50%); 13 | 14 | color: white; 15 | font-family: sans-serif; 16 | text-align: center; 17 | } 18 | 19 | .title { 20 | font-size: 17px; 21 | margin: 50px 0px; 22 | text-align: center; 23 | text-transform: uppercase; 24 | font-weight: 500; 25 | } 26 | 27 | .help { 28 | font-size: 14px; 29 | margin: 10px 0px; 30 | } 31 | button { 32 | display: inline-block; 33 | background: transparent; 34 | width: 100px; 35 | margin: 10px auto; 36 | box-sizing: border-box; 37 | 38 | border: 2px solid white; 39 | padding: 10px 0px; 40 | color: white; 41 | text-transform: uppercase; 42 | cursor: pointer; 43 | font-weight: bold; 44 | } 45 | button:focus { 46 | outline:0; 47 | } 48 | button:active { 49 | background: rgba(0, 0, 0, 0.2); 50 | } -------------------------------------------------------------------------------- /script.js: -------------------------------------------------------------------------------- 1 | if (navigator.serviceWorker) { 2 | console.log("ServiceWorkers are supported"); 3 | 4 | navigator.serviceWorker.register('sw.js', { 5 | scope: './' 6 | }) 7 | .then(function(reg) { 8 | console.log("ServiceWorker registered ◕‿◕", reg); 9 | }) 10 | .catch(function(error) { 11 | console.log("Failed to register ServiceWorker ಠ_ಠ", error); 12 | }); 13 | } 14 | 15 | function registerOneTimeSync() { 16 | if (navigator.serviceWorker.controller) { 17 | navigator.serviceWorker.ready.then(function(reg) { 18 | if (reg.sync) { 19 | reg.sync.register({ 20 | tag: 'oneTimeSync' 21 | }) 22 | .then(function(event) { 23 | console.log('Sync registration successful', event); 24 | }) 25 | .catch(function(error) { 26 | console.log('Sync registration failed', error); 27 | }); 28 | } else { 29 | console.log("Onw time Sync not supported"); 30 | } 31 | }); 32 | } else { 33 | console.log("No active ServiceWorker"); 34 | } 35 | } 36 | 37 | function registerPeriodicSync() { 38 | if (navigator.serviceWorker.controller) { 39 | navigator.serviceWorker.ready.then(function(reg) { 40 | console.dir(reg); 41 | if (reg.periodicSync) { 42 | reg.sync.register({ 43 | tag: 'periodicSync', 44 | minPeriod: 0, 45 | powerState: 'auto', 46 | networkState: 'any' 47 | }) 48 | .then(function(event) { 49 | console.log('Periodic Sync registration successful', event); 50 | }) 51 | .catch(function(error) { 52 | console.log('Periodic Sync registration failed', error); 53 | }); 54 | } else { 55 | console.log("Periodic Sync not supported"); 56 | } 57 | }); 58 | } else { 59 | console.log("No active ServiceWorker"); 60 | } 61 | } 62 | --------------------------------------------------------------------------------