samples/service-worker

Service Worker Recipes

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

Related samples

• Instructions for registering for Push Messages and showing Notifications.