Intro to Service Worker API and its use cases

Intro to Service Worker
API and its use cases
Satej Kumar Sahu
Mindfire Solutions

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

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.

Service Worker Concepts
• Worker
• Promise
• Registration
• Install
• Activate

Promise concept
• Promises are a great mechanism for running async operations
• sync
try {
var value = myFunction();
console.log(value);
} catch(err) {
console.log(err);
}
• async
myFunction().then(function(value) {
console.log(value);
}).catch(function(err) {
console.log(err);
});

• 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.

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.

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

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.)

Service Worker Support
• https://jakearchibald.github.io/isserviceworkerready/
• caniuse.com/#feat=serviceworkers

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.

Example
• Gmail offline exp.

Conclusion
• Offline first experience for a better user experience
• Caching and data bandwidth usage reduction.

References
• https://developer.mozilla.org/en-US/docs/Web/API/Servic
• https://developer.mozilla.org/en-
US/docs/Web/API/Service_Worker_API/Using_Servi
ce_Workers

Intro to Service Worker API and its use cases

Recommended

More Related Content

What's hot (20)

Similar to Intro to Service Worker API and its use cases (20)

Recently uploaded (20)

Intro to Service Worker API and its use cases