A service worker is a script that sits between a web page and the network, acting as a proxy for network requests: if the network is available, the request is passed on to the target url; if the network is not available, the service worker will handle the request itself by checking cached responses or or queuing the request for synchronization once the network is available. Service workers are bridging the gap between native mobile applications and traditional web applications that require a network connection to function. Sometimes called progressive web apps, these applications enable a seamless offline experience when the user is not connected to a network.
Service workers can be used for data synchronization in the background, but data fetching and sync-ing are only one of the ways we can leverage this API. We can:
- use background resources to perform client-side compilation of assets (useful for web development)
- pre-fetch data that the user is likely going to need in the near future (think photo albums or playlists)
- share large data sets between multiple pages
- notify mobile users of updates via push notifications
For example, The Washington Post uses service workers to send push notifications of breaking news content to users of their web application on android.
How do they work?
Service workers rely on the Promise API — a Promise is a proxy for “a value that may be available now, or in the future, or never.” They also use the event emitter pattern, where listeners are registered to handle specific events, such as
To employ a service worker you must first register a script with the service worker API:
navigator.serviceWorker.register('./sw.js'). Checkout the following example (get the gist):
1 2 3 4 5 6 7
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19
1 2 3 4 5 6 7 8 9 10
Running this example code sends some output to the console:
NOTE: A single service worker can control many pages (so be careful with global variables).
Developing with service workers
Service workers can only function in a secure context, which means that you can only register a service worker from a web application that is served over
https. One option is to use GitHub pages to deploy your application, as these pages are generally served over
https. Another option is to use a local web server (
localhost is considered semi-secure).
1 2 3 4 5 6 7 8 9 10 11 12
Browser-sync is so helpful, it will even open a browser window for you. :awthanks:
Don’t forget to checkout the Chrome developer tools, which can be super helpful in creating different states for your service worker
For more about the service worker API, checkout these resources: