Available in Chrome + | View on GitHub | Browse Samples
Basic Demo - a sample covering a basic, common use case. It precaches a set of local resources in a versioned cache, and maintains another cache that’s populated at runtime as additional resources are requested.
Simple registration - a bare-bones sample that simply performs service worker registration, with placeholders for various event handlers.
Detailed registration - a sample that provides detailed information about the service worker registration and the state changes that a service worker undergoes.
Prefetching resources during installation - a sample demonstrating how to prefetch and cache a list of URLs during the service worker’s installation, ensuring that they’re available offline.
Selective caching - a sample of how a service worker can cache resources “on the fly”, assuming the resources meet certain criteria (MIME type, domain, etc.).
Read-through caching - a sample of caching all resources that are requested “on the fly”, unconditionally.
Offline Google Analytics - extends the read-through caching example to add in support for “replaying” failed Google Analytics pings, allowing pages to submit Google Analytics data associated with offline/cached page views.
Fallback responses - a sample illustrating how you can return alternative “fallback” content if an initial fetch request fails.
Mock responses - a sample illustrating how you can return content created on the fly in response to a page’s requests.
Using postMessage -
a sample illustrating the use of postMessage() to send commands from a controlled page to its service worker, giving the page control over the cache.
Multiple fetch handlers -
a sample illustrating multiple fetch handlers, each of which intercepts a different type of request.
Custom offline page - a sample showing how to display a custom “Sorry, you’re offline.” error page when a network request fails.
Immediate control -
a sample showing how to use skipWaiting() and clients.claim() to force a new service worker to
take control of the page that just registered it.
Using window.caches -
a sample showing how window.caches provides access to the Cache Storage API.
Using WindowClient.navigate() -
a sample showing how a service worker can cause web page clients it controls to
navigate to a given URL.
Foreign Fetch - a sample showing a client making use of the foreign fetch service worker deployed by a third-party service.