Igrice za decu od 3 do 103 godine. Nove online friv igrice, mobilne za telefon. The Service Worker Cookbook is a collection of working, practical examples of using service workers in modern web sites.

Tip: Open your Developer Tools console to view fetch events and informative messages about what each recipe's service worker is doing!


The Service Worker Cookbook was created by Mozilla with contributions from developers like you. All source code is available on GitHub. Contributions and requests welcome.

Attribution of pictures in Caching strategies category can be found at lorempixel.com.


Network or cache

The service worker in this recipe tries to retrieve the most up to date content from the network but if the network is taking too much, it will serve cached content instead.

Cache only

The recipe provides a service worker always answering from cache on fetch events.

Cache and update

The recipe provides a service worker responding from cache to deliver fast responses and also updating the cache entry from the network.

Cache, update and refresh

The recipe provides a service worker responding from cache to deliver fast responses and also updating the cache entry from the network. When the network response is ready, the UI updates automatically.

Embedded fallback

The recipe provides a service worker serving an embedded content fallback in case of missing resources.

Push and Retrieve Payload

Send push notifications and retrieve a payload once a notification is received.

Push Payload

Send push notifications with a payload. This recipe shows how to send and receive a string, but data can be extracted from a Push message in a variety of formats (string, ArrayBuffer, Blob, JSON).

Push Rich

Show rich push notifications, defining the language of the notification, a vibration pattern, an image to associate to the notification. See https://notifications.spec.whatwg.org/#api for the other parameters you can set (e.g. a set of actions that can be activated from the notification).

Push Simple

Simplest example of Web Push API usage. Send notifications to users even when your page is not open.

Push Tag

Use the notification tag to replace old notifications with new ones. Allows you to show only up-to-date information to your users or collapse multiple notifications into a single one.

Push Quota

Experiment with the quota management policies of different browsers. Try sending many notifications (visible or invisible) and see what happens if you keep the tab open vs close it, or if you click on some notifications vs you click on none of them.

Push Clients

Control the clients of a service worker when the user clicks on a notification generated from a push event. Allows you to focus the tab of your app or even re-open it if it was closed.

Push Subscription

This recipe shows how to use push notifications with subscription management.

Immediate Claim

This recipe shows how to have the service worker immediately take control of the page without waiting for a navigation event.

Message Relay

This recipe shows how to communicate between the service worker and a page and shows how to use a service worker to relay messages between pages.

Fetching Remote Resources

This recipe shows 2 standard ways of loading a remote resource and one way to use service worker as a proxy middleware.

Live Flowchart

This recipe provides a way to learn how to use service workers (SW) through showing the flow diagram of SW workflow explained on the Mozilla Developer Network, and logging on screen the steps taken by a real Web App running service workers.

Offline Fallback

This recipe shows how to serve content from the cache when the user is offline.

Offline Status

This basic recipe illustrates caching critical resources for offline use and then notifying the user that they may go offline and enjoy the same experience.

JSON Cache

This recipe illustrates fetching a JSON file during service worker installation and adding all resources to cache. This recipe also immediately claims the service worker for faster activation.

Local Download

Allow a user to "download" a file that's been generated on the client side.

Virtual Server

This recipe shows a service worker acting like a remote server.

API Analytics

Perform API usage logging without interfering with the UI layer by adding a service worker to gather the usage and use the sync API to upload gathered data from time to time.

Load balancer

This recipe shows a Service Worker containing network logic to dynamically select the best content provider accordingly to server availability.

Cache from ZIP

This recipe illustrates how to cache contents from a zipfile.

Dependency Injection

This recipe shows how a Service Worker can act as a dependency injector, avoiding hard wiring dependencies for high level components.

Request Deferrer

This recipe shows how to enqueue requests while in offline in an outbox-like buffer to perform the operations once the connection is regained.

Cache then Network

This recipe illustrates methods to return network requests from either the cache or network.

Render Store

The recipe demonstrates one recommendation from the NGA. A cache containing the interpolated templates in order to avoid model fetching and render times upon successive requests.

Has it been useful?

Tell us what you think of this recipe by leaving a comment!