![Page 1: Intro to Service Worker API and its use cases](https://reader030.vdocuments.us/reader030/viewer/2022013004/58ae4f7b1a28ab57678b491b/html5/thumbnails/1.jpg)
Intro to Service Worker API and its
use casesSatej Kumar SahuMindfire Solutions
![Page 2: Intro to Service Worker API and its use cases](https://reader030.vdocuments.us/reader030/viewer/2022013004/58ae4f7b1a28ab57678b491b/html5/thumbnails/2.jpg)
Contents• What is a Service Worker?
• Service Worker concepts
• Promise concept
• Some general pointers
• Service Worker example
• Debugging tips
• Service Worker Support
• Service Worker use cases
• Conclusion
![Page 3: Intro to Service Worker API and its use cases](https://reader030.vdocuments.us/reader030/viewer/2022013004/58ae4f7b1a28ab57678b491b/html5/thumbnails/3.jpg)
What is a Service Worker?
• At it’s simplest it’s a worker.
• A worker is a JavaScript script that runs in the background, independently of other scripts in a separate thread, without affecting the performance of the page.
• A service worker is run in a worker context: it therefore has no DOM access, and runs on a different thread to the main JavaScript that powers your app, so it is not blocking. It is designed to be fully async; as a consequence, APIs such as synchronous XHR and localStorage can't be used inside a service worker.
![Page 4: Intro to Service Worker API and its use cases](https://reader030.vdocuments.us/reader030/viewer/2022013004/58ae4f7b1a28ab57678b491b/html5/thumbnails/4.jpg)
Service Worker Concepts
• Worker
• Promise
• Registration
• Install
• Activate
![Page 5: Intro to Service Worker API and its use cases](https://reader030.vdocuments.us/reader030/viewer/2022013004/58ae4f7b1a28ab57678b491b/html5/thumbnails/5.jpg)
![Page 6: Intro to Service Worker API and its use cases](https://reader030.vdocuments.us/reader030/viewer/2022013004/58ae4f7b1a28ab57678b491b/html5/thumbnails/6.jpg)
Promise concept• Promises are a great mechanism for running async operations
• synctry { var value = myFunction(); console.log(value);} catch(err) { console.log(err);}
• asyncmyFunction().then(function(value) { console.log(value);}).catch(function(err) { console.log(err);});
![Page 7: Intro to Service Worker API and its use cases](https://reader030.vdocuments.us/reader030/viewer/2022013004/58ae4f7b1a28ab57678b491b/html5/thumbnails/7.jpg)
• There have been various attempts to create technologies to solve this problem
• There still isn’t a good overall control mechanism for asset caching and custom network requests.
• AppCache — seemed to be a good idea because it allowed you to specify assets to cache really easily. But it relied on many assumptions and when you didn’t follow them, it breaks.
![Page 8: Intro to Service Worker API and its use cases](https://reader030.vdocuments.us/reader030/viewer/2022013004/58ae4f7b1a28ab57678b491b/html5/thumbnails/8.jpg)
Some general pointers
• As of Firefox 44, when AppCache is used to provide offline support for a page a warning message is now displayed in the console advising developers to use Service workers instead.
• Offline first experience. Native Apps already provide them so they are much favoured.
• Many service workers features are now enabled by default in newer versions of supporting browsers.
• If still not working, then please try- Firefox Nightly: about:config -> dom.serviceWorkers.enabled to true -> restart- Chrome Canary: chrome://flags -> turn on experimental-web-platform-features -> restart- Opera: opera://flags -> enable Support for ServiceWorker -> restart
• Service Workers are restricted to running across HTTPS for security reasons.
![Page 9: Intro to Service Worker API and its use cases](https://reader030.vdocuments.us/reader030/viewer/2022013004/58ae4f7b1a28ab57678b491b/html5/thumbnails/9.jpg)
Service Worker example
• Service Worker presence. If not present then fallback to other ways AppCache, indexed DB etc. else load from network.
• Basic Architecture
• Registering a Service Worker
• Install and Activation process
• Cache control and custom responses
![Page 10: Intro to Service Worker API and its use cases](https://reader030.vdocuments.us/reader030/viewer/2022013004/58ae4f7b1a28ab57678b491b/html5/thumbnails/10.jpg)
![Page 11: Intro to Service Worker API and its use cases](https://reader030.vdocuments.us/reader030/viewer/2022013004/58ae4f7b1a28ab57678b491b/html5/thumbnails/11.jpg)
![Page 12: Intro to Service Worker API and its use cases](https://reader030.vdocuments.us/reader030/viewer/2022013004/58ae4f7b1a28ab57678b491b/html5/thumbnails/12.jpg)
Debugging tips• Chrome has chrome://inspect/#service-workers, which shows
current service worker activity and storage on a device
• chrome://serviceworker-internals, which shows more detail and allows you to start/stop/debug the worker process
• In the future they will have throttling/offline modes to simulate bad or non-existent connections, which will be a really good thing.
• Firefox: You can navigate to about:serviceworkers to see what SWs are registered and update/remove them.
• When testing you can get around the HTTPS restriction by checking the "Enable Service Workers over HTTP (when toolbox is open)" option in the Firefox Devtools options (gear menu.)
![Page 13: Intro to Service Worker API and its use cases](https://reader030.vdocuments.us/reader030/viewer/2022013004/58ae4f7b1a28ab57678b491b/html5/thumbnails/13.jpg)
Service Worker Support
• https://jakearchibald.github.io/isserviceworkerready/
• caniuse.com/#feat=serviceworkers
![Page 14: Intro to Service Worker API and its use cases](https://reader030.vdocuments.us/reader030/viewer/2022013004/58ae4f7b1a28ab57678b491b/html5/thumbnails/14.jpg)
Service Worker use cases
• Caching
• Loss of connectivity. Offline user experience
• Background data synchronization
• Responding to resource requests from other origins
• Receiving centralized updates to expensive-to-calculate data such as geolocation or gyroscope, so multiple pages can make use of one set of data
• Client-side compiling and dependency management of CoffeeScript, less, CJS/AMD modules, etc. for dev purposes
• Hooks for background services
• Custom templating based on certain URL patterns
• Performance enhancements, for example pre-fetching resources that the user is likely to need in the near future, such as the next few pictures in a photo album.
![Page 15: Intro to Service Worker API and its use cases](https://reader030.vdocuments.us/reader030/viewer/2022013004/58ae4f7b1a28ab57678b491b/html5/thumbnails/15.jpg)
Example
• Gmail offline exp.
![Page 16: Intro to Service Worker API and its use cases](https://reader030.vdocuments.us/reader030/viewer/2022013004/58ae4f7b1a28ab57678b491b/html5/thumbnails/16.jpg)
Conclusion
• Offline first experience for a better user experience
• Caching and data bandwidth usage reduction.
![Page 17: Intro to Service Worker API and its use cases](https://reader030.vdocuments.us/reader030/viewer/2022013004/58ae4f7b1a28ab57678b491b/html5/thumbnails/17.jpg)
References
• https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API
• https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API/Using_Service_Workers
![Page 18: Intro to Service Worker API and its use cases](https://reader030.vdocuments.us/reader030/viewer/2022013004/58ae4f7b1a28ab57678b491b/html5/thumbnails/18.jpg)
Any?