Intro to Service Worker API and its

use casesSatej Kumar SahuMindfire 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

• 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);});

• 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/Service_Worker_API

• https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API/Using_Service_Workers

Any?