Service Worker API
Service workers are one of the core components of Progressive Web Apps. They act as a client-side proxy that puts developers in control of the system's cache and how to respond to resource requests. By pre-caching essential resources, developers can eliminate the dependence on the network, ensuring instant and reliable experiences.
In addition to caching resources, service workers can update assets from the server, allow for push notifications, and allow access to the background and periodic background sync APIs.
While service workers have become widely adopted and supported by major browsers, not all features of service workers are available on all browsers.
The Service Worker API is available on modern versions of Chrome, Edge, Firefox, and Safari.
Service Worker Example
1
2
3
4
5
6
7
8
9
10
11
12
13
// Installing a Service Worker
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('/service-worker.js');
}
// Uninstalling a Service Worker
if ('serviceWorker' in navigator) {
navigator.serviceWorker.getRegistrations().then((registrations) => {
for (let registration of registrations) {
registration.unregister();
}
});
}Usage
Description of Figure 1
Usage of the Service Worker API from 2021 to 2022 on desktop and mobile.
The Service Worker API was not measured in 2021s Capabilities chapter. However, using data from the 2021 PWA chapter, the API grew in usage from 3.05% to 4.17% on desktop and 3.22% to 3.85% on mobile pages, making it the sixth most used capability on desktop and the seventh most used mobile.
Note that how the service worker usage in the PWA chapter is measured differs from how the Capabilities chapter measures it. Additionally, a bug in the data pipeline for last year's PWA chapter was found, resulting in an undercounting of service worker usage.
For a deeper dive into service worker usage on the web, check out the PWA chapter of the 2022 Web Almanac.