Widely available Supported across all major browsers. Safe to use in production.

Service workers

The Cache interface provides a persistent storage mechanism for Request / Response object pairs that are cached in long lived memory. How long a Cache object lives is browser dependent, but a single origin's scripts can typically rely on the presence of a previously populated Cache object. Note that the Cache interface is exposed to windowed scopes as well as workers. You don't have to use it in conjunction with service workers, even though it is defined in the service worker spec.

An origin can have multiple, named Cache objects. You are responsible for implementing how your script (e.g., in a ServiceWorker) handles Cache updates. Items in a Cache do not get updated unless explicitly requested; they don't expire unless deleted. Use CacheStorage.open() to open a specific named Cache object and then call any of the Cache methods to maintain the Cache.

You are also responsible for periodically purging cache entries. Each browser has a hard limit on the amount of cache storage that a given origin can use. Cache quota usage estimates are available via the StorageManager.estimate() method. The browser does its best to manage disk space, but it may delete the Cache storage for an origin. The browser will generally delete all of the data for an origin or none of the data for an origin. Make sure to version caches by name and use the caches only from the version of the script that they can safely operate on. See Deleting old caches for more information.

Messaging and Workers

Browser support

Feature Desktop Mobile
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
Cache
40
16
41
11.1
40
11.3
add

The add() method of the Cache interface takes a URL, retrieves it, and adds the resulting response object to the given cache.
44
16
41
11.1
44
11.3
addAll

The addAll() method of the Cache interface takes an array of URLs, retrieves them, and adds the resulting response objects to the given cache. The request objects created during retrieval become keys to the stored response operations.
46
16
41
11.1
46
11.3
delete

The delete() method of the Cache interface finds the Cache entry whose key is the request, and if found, deletes the Cache entry and returns a Promise that resolves to true. If no Cache entry is found, it resolves to false.
43
16
41
11.1
43
11.3
keys

The keys() method of the Cache interface returns a Promise that resolves to an array of Request objects representing the keys of the Cache.
43
16
41
11.1
43
11.3
match

The match() method of the Cache interface returns a Promise that resolves to the Response associated with the first matching request in the Cache object. If no match is found, the Promise resolves to undefined.
43
16
41
11.1
43
11.3
matchAll

The matchAll() method of the Cache interface returns a Promise that resolves to an array of all matching responses in the Cache object.
47
16
41
11.1
47
11.3
put

The put() method of the Cache interface allows key/value pairs to be added to the current Cache object.
43
16
41
11.1
43
11.3
worker_support

Available in workers
40
16
44
11.1
40
11.3
caches

The caches read-only property of the Window interface returns the CacheStorage object associated with the current context. This object enables functionality such as storing assets for offline use, and generating custom responses to requests.
40
16
41
11.1
40
11.3
secure_context_required

Secure context required
65
79
103
11.1
65
11.3
worker_support

Available in workers
40
16
41
11.1
40
11.3
CacheStorage

The CacheStorage interface represents the storage for Cache objects.
43
16
41
11.1
43
11.3
delete

The delete() method of the CacheStorage interface finds the Cache object matching the cacheName, and if found, deletes the Cache object and returns a Promise that resolves to true. If no Cache object is found, it resolves to false.
40
16
41
11.1
40
11.3
has

The has() method of the CacheStorage interface returns a Promise that resolves to true if a Cache object matches the cacheName.
40
16
41
11.1
40
11.3
keys

The keys() method of the CacheStorage interface returns a Promise that will resolve with an array containing strings corresponding to all of the named Cache objects tracked by the CacheStorage object in the order they were created. Use this method to iterate over a list of all Cache objects.
40
16
41
11.1
40
11.3
match

The match() method of the CacheStorage interface checks if a given Request or URL string is a key for a stored Response. This method returns a Promise for a Response, or a Promise which resolves to undefined if no match is found.
54
16
41
11.1
54
11.3
open

The open() method of the CacheStorage interface returns a Promise that resolves to the Cache object matching the cacheName.
40
16
41
11.1
40
11.3
secure_context_required

Secure context required
65
79
44
11.1
65
11.3
worker_support

Available in workers
43
16
44
11.1
43
11.3
Client

The Client interface represents an executable context such as a Worker, or a SharedWorker. Window clients are represented by the more-specific WindowClient. You can get Client/WindowClient objects from methods such as Clients.matchAll and Clients.get.
40
17
44
11.1
40
11.3
frameType

The frameType read-only property of the Client interface indicates the type of browsing context of the current Client. This value can be one of "auxiliary", "top-level", "nested", or "none".
43
17
44
11.1
43
11.3
id

The id read-only property of the Client interface returns the universally unique identifier of the Client object.
40
17
44
11.1
40
11.3
postMessage

The postMessage() method of the Client interface allows a service worker to send a message to a client (a Window, Worker, or SharedWorker). The message is received in the message event on ServiceWorkerContainer.
40
17
44
11.1
40
11.3
type

The type read-only property of the Client interface indicates the type of client the service worker is controlling.
60
17
54
11.1
60
11.3
url

The url read-only property of the Client interface returns the URL of the current service worker client.
40
17
44
11.1
40
11.3
Clients

The Clients interface provides access to Client objects. Access it via ServiceWorkerGlobalScope.clients within a service worker.
40
17
44
11.1
40
11.3
claim

The claim() method of the Clients interface allows an active service worker to set itself as the ServiceWorkerContainer.controller for all clients within its ServiceWorkerRegistration.scope. This triggers a controllerchange event on ServiceWorkerContainer in any clients that become controlled by this service worker.
42
17
44
11.1
42
11.3
get

The get() method of the Clients interface gets a service worker client matching a given id and returns it in a Promise.
51
17
45
11.1
51
11.3
matchAll

The matchAll() method of the Clients interface returns a Promise for a list of service worker Client objects. Include the options parameter to return all service worker clients whose origin is the same as the associated service worker's origin. If options are not included, the method returns only the service worker clients controlled by the service worker.
42
17
54
11.1
42
11.3
matchAll (options includeUncontrolled parameter)

`options.includeUncontrolled` parameter
42
17
44
11.1
42
11.3
openWindow

The openWindow() method of the Clients interface creates a new top level browsing context and loads a given URL. If the calling script doesn't have permission to show popups, openWindow() will throw an InvalidAccessError.
40
17
44
11.1
40
11.3
ExtendableEvent

The ExtendableEvent interface extends the lifetime of the install and activate events dispatched on the global scope as part of the service worker lifecycle. This ensures that any functional events (like FetchEvent) are not dispatched until it upgrades database schemas and deletes the outdated cache entries.
40
17
44
11.1
40
11.3
ExtendableEvent

The ExtendableEvent() constructor creates a new ExtendableEvent object.
41
17
44
11.1
41
11.3
waitUntil

The ExtendableEvent.waitUntil() method tells the event dispatcher that work is ongoing. It can also be used to detect whether that work was successful. In service workers, waitUntil() tells the browser that work is ongoing until the promise settles, and it shouldn't terminate the service worker if it wants that work to complete.
40
17
44
11.1
40
11.3
waitUntil (async waitUntil)

`waitUntil` may be called asynchronously
60
17
53
11.1
60
11.3
ExtendableMessageEvent

The ExtendableMessageEvent interface of the Service Worker API represents the event object of a ServiceWorkerGlobalScope/message_event event fired on a service worker (when a message is received on the ServiceWorkerGlobalScope from another context) — extends the lifetime of such events.
51
17
44
11.1
51
11.3
data

The data read-only property of the ExtendableMessageEvent interface returns the event's data. It can be any data type.
51
17
44
11.1
51
11.3
ExtendableMessageEvent

The ExtendableMessageEvent() constructor creates a new ExtendableMessageEvent object.
51
17
44
11.1
51
11.3
lastEventId

The lastEventID read-only property of the ExtendableMessageEvent interface represents, in server-sent events, the last event ID of the event source. This is an empty string.
51
17
44
11.1
51
11.3
origin

The origin read-only property of the ExtendableMessageEvent interface returns the origin of the Client that sent the message.
51
17
44
11.1
51
11.3
ports

The ports read-only property of the ExtendableMessageEvent interface returns the array containing the MessagePort objects representing the ports of the associated message channel (the channel the message is being sent through.)
51
17
44
11.1
51
11.3
source

The source read-only property of the ExtendableMessageEvent interface returns a reference to the Client object from which the message was sent.
51
17
44
11.1
51
11.3
FetchEvent

This is the event type for fetch events dispatched on the ServiceWorkerGlobalScope. It contains information about the fetch, including the request and how the receiver will treat the response. It provides the FetchEvent.respondWith method, which allows us to provide a response to this fetch.
40
17
44
11.1
40
11.3
clientId

The clientId read-only property of the FetchEvent interface returns the id of the Client that the current service worker is controlling.
49
17
45
11.1
49
11.3
FetchEvent

The FetchEvent() constructor creates a new FetchEvent object.
44
17
44
11.1
44
11.3
handled

The handled property of the FetchEvent interface returns a promise indicating if the event has been handled by the fetch algorithm or not. This property allows executing code after the browser has consumed a response, and is usually used together with the ExtendableEvent.waitUntil method.
86
86
84
16
86
16
preloadResponse

The preloadResponse read-only property of the FetchEvent interface returns a Promise that resolves to the navigation preload Response if navigation preload was triggered, or undefined otherwise.
59
18
99
15.4
59
15.4
request

The request read-only property of the FetchEvent interface returns the Request that triggered the event handler.
40
17
44
11.1
40
11.3
respondWith

The respondWith() method of FetchEvent prevents the browser's default fetch handling, and allows you to provide a promise for a Response yourself.
42
17
44
11.1
42
11.3
respondWith (networkerror on same-origin cors)

`NetworkError` thrown if the request mode is `same-origin` and the response type is `cors`
66
79
59
66
respondWith (resource url)
Experimental

Change in behavior when specifying the final URL of a resource.
59
resultingClientId

The resultingClientId read-only property of the FetchEvent interface is the Client.id of the Client that replaces the previous client during a page navigation.
72
79
65
16
72
16
InstallEvent

The parameter passed into an ServiceWorkerGlobalScope.install_event event handler function, the InstallEvent interface represents an install action that is dispatched on the ServiceWorkerGlobalScope of a ServiceWorker. As a child of ExtendableEvent, it ensures that functional events such as FetchEvent are not dispatched during installation.
40
17
40
addRoutes
Experimental

The addRoutes() method of the InstallEvent interface specifies one or more static routes, which define rules for fetching specified resources that will be used even before service worker startup. This allows you to, for example, bypass a service worker in cases where you always want to fetch a resource from the network or a browser Cache, and avoids the…
123
123
123
InstallEvent
Experimental

The InstallEvent() constructor creates a new InstallEvent object.
40
79
40
NavigationPreloadManager

The NavigationPreloadManager interface of the Service Worker API provides methods for managing the preloading of resources in parallel with service worker bootup.
59
18
99
15.4
59
15.4
disable

The disable() method of the NavigationPreloadManager interface halts the automatic preloading of service-worker-managed resources previously started using NavigationPreloadManager.enable() It returns a promise that resolves with undefined.
59
18
99
15.4
59
15.4
enable

The enable() method of the NavigationPreloadManager interface is used to enable preloading of resources managed by the service worker. It returns a promise that resolves with undefined.
59
18
99
15.4
59
15.4
getState

The getState() method of the NavigationPreloadManager interface returns a Promise that resolves to an object with properties that indicate whether preload is enabled and what value will be sent in the Service-Worker-Navigation-Preload HTTP header.
59
18
99
15.4
59
15.4
setHeaderValue

The setHeaderValue() method of the NavigationPreloadManager interface sets the value of the Service-Worker-Navigation-Preload header that will be sent with requests resulting from a Window/fetch operation made during service worker navigation preloading. It returns an empty Promise that resolves with undefined.
59
18
99
15.4
59
15.4
serviceWorker

The serviceWorker read-only property of the Navigator interface returns the ServiceWorkerContainer object for the associated document, which provides access to registration, removal, upgrade, and communication with the ServiceWorker.
40
17
44
11.1
40
11.3
ServiceWorker

The ServiceWorker interface of the Service Worker API provides a reference to a service worker. Multiple browsing context (e.g., pages, workers, etc.) can be associated with the same service worker, each through a unique ServiceWorker object.
40
17
44
11.1
40
11.3
postMessage

The postMessage() method of the ServiceWorker interface sends a message to the worker. The first parameter is the data to send to the worker. The data may be any JavaScript object which can be handled by the structured clone algorithm.
40
17
44
11.1
40
11.3
scriptURL

Returns the ServiceWorker serialized script URL defined as part of ServiceWorkerRegistration. Must be on the same origin as the document that registers the ServiceWorker.
40
17
44
11.1
40
11.3
state

The state read-only property of the ServiceWorker interface returns a string representing the current state of the service worker. It can be one of the following values: parsed, installing, installed, activating, activated, or redundant.
40
17
44
11.1
40
11.3
statechange_event

The statechange event fires anytime the ServiceWorker.state changes.
40
17
44
11.1
40
11.3
ServiceWorkerContainer

The ServiceWorkerContainer interface of the Service Worker API provides an object representing the service worker as an overall unit in the network ecosystem, including facilities to register, unregister and update service workers, and access the state of service workers and their registrations.
40
17
44
11.1
40
11.3
controller

The controller read-only property of the ServiceWorkerContainer interface represents the active ServiceWorker controlling the current page (associated with this ServiceWorkerContainer), or null if the page has no active or activating service worker.
40
17
44
11.1
40
11.3
controllerchange_event

The controllerchange event of the ServiceWorkerContainer interface fires when the document's associated ServiceWorkerRegistration acquires a new ServiceWorkerRegistration.active worker.
40
17
44
11.1
40
11.3
getRegistration

The getRegistration() method of the ServiceWorkerContainer interface gets a ServiceWorkerRegistration object whose scope URL matches the provided client URL. The method returns a Promise that resolves to a ServiceWorkerRegistration or undefined.
40
17
44
11.1
40
11.3
getRegistrations

The getRegistrations() method of the ServiceWorkerContainer interface gets all ServiceWorkerRegistrations associated with a ServiceWorkerContainer, in an array. The method returns a Promise that resolves to an array of ServiceWorkerRegistration.
45
17
44
11.1
45
11.3
message_event

The message event is used in a page controlled by a service worker to receive messages from the service worker.
40
17
44
11.1
40
11.3
ready

The ready read-only property of the ServiceWorkerContainer interface provides a way of delaying code execution until a service worker is active.
40
17
44
11.1
40
11.3
register

The register() method of the ServiceWorkerContainer interface creates or updates a ServiceWorkerRegistration for the given scope.
40
17
44
11.1
40
11.3
startMessages

The startMessages() method of the ServiceWorkerContainer interface explicitly starts the flow of messages being dispatched from a service worker to pages under its control (e.g., sent via Client.postMessage()). This can be used to react to sent messages earlier, even before that page's content has finished loading.
74
79
64
11.1
74
11.3
worker_support

Available in workers
133
11.1
11.3
ServiceWorkerGlobalScope

The ServiceWorkerGlobalScope interface of the Service Worker API represents the global execution context of a service worker.
40
17
44
11.1
40
11.3
activate_event

The activate event of the ServiceWorkerGlobalScope interface is fired when a ServiceWorkerRegistration acquires a new ServiceWorkerRegistration.active worker.
40
17
44
11.1
40
11.3
clients

The clients read-only property of the ServiceWorkerGlobalScope interface returns the Clients object associated with the service worker.
40
17
44
11.1
40
11.3
fetch_event

The fetch event of the ServiceWorkerGlobalScope interface is fired in the service worker's global scope when the main app thread makes a network request. It enables the service worker to intercept network requests and send customized responses (for example, from a local cache).
40
17
44
11.1
40
11.3
install_event

The install event of the ServiceWorkerGlobalScope interface is fired when a ServiceWorkerRegistration acquires a new ServiceWorkerRegistration.installing worker.
40
17
44
11.1
40
11.3
message_event

The message event of the ServiceWorkerGlobalScope interface occurs when incoming messages are received. Controlled pages can use the ServiceWorker.postMessage() method to send messages to service workers. The service worker can optionally send a response back via the Client.postMessage(), corresponding to the controlled page.
40
17
44
11.1
40
11.3
registration

The registration read-only property of the ServiceWorkerGlobalScope interface returns a reference to the ServiceWorkerRegistration object, which represents the service worker's registration.
42
17
44
11.1
42
11.3
serviceWorker

The serviceWorker read-only property of the ServiceWorkerGlobalScope interface returns a reference to the ServiceWorker object, which represents the service worker.
79
79
15.4
79
15.4
skipWaiting

The skipWaiting() method of the ServiceWorkerGlobalScope interface forces the waiting service worker to become the active service worker.
41
17
44
11.1
41
11.3
active

The active read-only property of the ServiceWorkerRegistration interface returns a service worker whose ServiceWorker.state is activating or activated. This property is initially set to null.
40
17
44
11.1
40
11.3
installing

The installing read-only property of the ServiceWorkerRegistration interface returns a service worker whose ServiceWorker.state is installing. This property is initially set to null.
40
17
44
11.1
40
11.3
navigationPreload

The navigationPreload read-only property of the ServiceWorkerRegistration interface returns the NavigationPreloadManager associated with the current service worker registration.
59
17
99
15.4
59
15.4
scope

The scope read-only property of the ServiceWorkerRegistration interface returns a string representing a URL that defines a service worker's registration scope; that is, the range of URLs a service worker can control. This is set using the scope parameter specified in the call to ServiceWorkerContainer.register() which registered the service worker.
40
17
44
11.1
40
11.3
unregister

The unregister() method of the ServiceWorkerRegistration interface unregisters the service worker registration and returns a Promise. The promise will resolve to false if no registration was found, otherwise it resolves to true irrespective of whether unregistration happened or not (it may not unregister if someone else just called…
40
17
44
11.1
40
11.3
update

The update() method of the ServiceWorkerRegistration interface attempts to update the service worker. It fetches the worker's script URL, and if the new worker is not byte-by-byte identical to the current worker, it installs the new worker. The fetch of the worker bypasses any browser caches if the previous fetch occurred over 24 hours ago.
45
17
44
11.1
45
11.3
updatefound_event

The updatefound event of the ServiceWorkerRegistration interface is fired any time the ServiceWorkerRegistration.installing property acquires a new service worker.
40
17
44
11.1
40
11.3
updateViaCache

The updateViaCache read-only property of the ServiceWorkerRegistration interface returns the value of the setting used to determine the circumstances in which the browser will consult the HTTP cache when it tries to update the service worker or any scripts that are imported via WorkerGlobalScope.importScripts.
68
18
57
11.1
68
11.3
waiting

The waiting read-only property of the ServiceWorkerRegistration interface returns a service worker whose ServiceWorker.state is installed. This property is initially set to null.
40
17
44
11.1
40
11.3
WindowClient

The WindowClient interface of the ServiceWorker API represents the scope of a service worker client that is a document in a browsing context, controlled by an active worker. The service worker client independently selects and uses a service worker for its own loading and sub-resources.
42
17
44
11.1
42
11.3
ancestorOrigins
Experimental

The ancestorOrigins read-only property of the WindowClient interface is an array of strings listing the origins of all ancestors of the browsing context represented by this WindowClient in reverse order.
16
16
focus

The focus() method of the WindowClient interface gives user input focus to the current client and returns a Promise that resolves to the existing WindowClient.
42
17
44
11.1
42
11.3
focused

The focused read-only property of the WindowClient interface is a boolean value that indicates whether the current client has focus.
42
17
44
11.1
42
11.3
navigate

The navigate() method of the WindowClient interface loads a specified URL into a controlled client page then returns a Promise that resolves to the existing WindowClient.
49
17
50
16
49
16
visibilityState

The visibilityState read-only property of the WindowClient interface indicates the visibility of the current client. This value can be one of "hidden", "visible", or "prerender".
42
17
44
11.1
42
11.3
serviceWorker

The serviceWorker read-only property of the WorkerNavigator interface returns the ServiceWorkerContainer object for the associated document, which provides access to registration, removal, upgrade, and communication with the ServiceWorker.
133
11.1
11.3
Other
Service-Worker-Navigation-Preload

The HTTP Service-Worker-Navigation-Preload request header indicates that the request was the result of a Window/fetch operation made during service worker navigation preloading. It allows a server to respond with a different resource than for a normal fetch().
59
18
Preview
15.4
59
15.4
1+Supported (version) Not supported ※Has note Sub-feature descriptions sourced from MDN Web Docs (CC BY-SA 2.5)
Notes 1 item(s)
Implementation note
  • Before version 43, only service workers are supported. From version 43, all worker types and the main thread are supported.
Notes 1 item(s)
Implementation note
  • Before version 43, only service workers are supported. From version 43, all worker types and the main thread are supported.
Notes 1 item(s)
Implementation note
  • Requires HTTPS from version 46.
Notes 1 item(s)
Implementation note
  • Requires HTTPS from version 46.
Notes 1 item(s)
Implementation note
  • Requires HTTPS.
Notes 1 item(s)
Implementation note
  • Requires HTTPS.
Notes 1 item(s)
Implementation note
  • Requires HTTPS from version 46.
Notes 1 item(s)
Implementation note
  • Requires HTTPS from version 46.
Notes 1 item(s)
Implementation note
  • Before version 43, only service workers are supported. From version 43, all worker types and the main thread are supported.
Notes 1 item(s)
Implementation note
  • Before version 43, only service workers are supported. From version 43, all worker types and the main thread are supported.
Notes 3 item(s)
Limitation
  • This browser only partially implements this feature
Removed
  • This feature was removed in a later browser version (43)
Implementation note
  • Only available in service workers.
Notes 3 item(s)
Limitation
  • This browser only partially implements this feature
Removed
  • This feature was removed in a later browser version (43)
Implementation note
  • Only available in service workers.
Notes 3 item(s)
Limitation
  • This browser only partially implements this feature
Removed
  • This feature was removed in a later browser version (54)
Implementation note
  • The options parameter only supports `ignoreSearch`, and `cacheName`.
Notes 3 item(s)
Limitation
  • This browser only partially implements this feature
Removed
  • This feature was removed in a later browser version (54)
Implementation note
  • The options parameter only supports `ignoreSearch`, and `cacheName`.
Notes 3 item(s)
Limitation
  • This browser only partially implements this feature
Removed
  • This feature was removed in a later browser version (43)
Implementation note
  • Only available in service workers.
Notes 3 item(s)
Limitation
  • This browser only partially implements this feature
Removed
  • This feature was removed in a later browser version (43)
Implementation note
  • Only available in service workers.
Notes 1 item(s)
Implementation note
  • `Client` objects returned in most recent focus order.
Notes 1 item(s)
Implementation note
  • `Client` objects returned in most recent focus order.
Notes 3 item(s)
Limitation
  • This browser only partially implements this feature
Removed
  • This feature was removed in a later browser version (54)
Implementation note
  • Before Firefox 54, `Client` objects were not returned in the most recent focus order as required by the specification.
Notes 1 item(s)
Implementation note
  • `Client` objects returned in most recent focus order.
Notes 1 item(s)
Implementation note
  • `Client` objects returned in most recent focus order.
Notes 1 item(s)
Implementation note
  • `Client` objects returned in most recent focus order.
Notes 1 item(s)
Implementation note
  • `Client` objects returned in most recent focus order.
Notes 2 item(s)
Implementation note
  • Before Chrome 43, this method could only open URLs on the same origin.
  • Since Chrome 51, URLs may open inside an existing browsing context provided by a standalone web app.
Notes 2 item(s)
Implementation note
  • Before Chrome Android 43, this method could only open URLs on the same origin.
  • Since Chrome Android 51, URLs may open inside an existing browsing context provided by a standalone web app.
Notes 1 item(s)
Implementation note
  • In Firefox private windows, the `serviceWorker` object is `undefined`. See bug 1320796.
Notes 1 item(s)
Implementation note
  • The `install` event handler is called with an `ExtendableEvent`, not an `InstallEvent`.
Notes 1 item(s)
Implementation note
  • Returns `ExtendableEvent` instead of `InstallEvent`.
Notes 1 item(s)
Implementation note
  • Returns `ExtendableEvent` instead of `InstallEvent`.
Notes 2 item(s)
Implementation note
  • Starting with Chrome 46, update() returns a promise that resolves with 'undefined' if the operation completed successfully or there was no update, and rejects if update failed. If the new worker ran but installation failed, the promise still resolves. Formerly, it raised an exception.
  • Before Chrome 48, this method always bypassed the browser cache. Starting with Chrome 48, it only bypasses the cache when the previous service worker check was more than twenty-four hours ago.
Notes 2 item(s)
Implementation note
  • Starting with Chrome Android 46, update() returns a promise that resolves with 'undefined' if the operation completed successfully or there was no update, and rejects if update failed. If the new worker ran but installation failed, the promise still resolves. Formerly, it raised an exception.
  • Before Chrome Android 48, this method always bypassed the browser cache. Starting with Chrome Android 48, it only bypasses the cache when the previous service worker check was more than twenty-four hours ago.
Notes 3 item(s)
Limitation
  • This browser only partially implements this feature
Removed
  • This feature was removed in a later browser version (16)
Implementation note
  • This method exists, but always throws `NotSupportedError`.
Notes 3 item(s)
Limitation
  • This browser only partially implements this feature
Removed
  • This feature was removed in a later browser version (16)
Implementation note
  • This method exists, but always throws `NotSupportedError`.
Notes 1 item(s)
Experimental
  • Requires an experimental browser flag to be enabled (97)

Syntax

JAVASCRIPT 
const CACHE_VERSION = 1;
const CURRENT_CACHES = {
  font: `font-cache-v${CACHE_VERSION}`,
};

self.addEventListener("activate", (event) => {
  // Delete all caches that aren't named in CURRENT_CACHES.
  // While there is only one cache in this example, the same logic
  // will handle the case where there are multiple versioned caches.
  const expectedCacheNamesSet = new Set(Object.values(CURRENT_CACHES));
  event.waitUntil(
    caches.keys().then((cacheNames) =>
      Promise.all(
        cacheNames.map((cacheName) => {
          if (!expectedCacheNamesSet.has(cacheName)) {
            // If this cache name isn't present in the set of
            // "expected" cache names, then delete it.
            console.log("Deleting out of date cache:", cacheName);
            return caches.delete(cacheName);
          }
          return undefined;
        }),
      ),
    ),
  );
});

self.addEventListener("fetch", (event) => {
  console.log("Handling fetch event for", event.request.url);

  event.respondWith(
    caches
      .open(CURRENT_CACHES.font)
      .then((cache) => cache.match(event.request))
      .then((response) => {
        if (response) {
          // If there is an entry in the cache for event.request,
          // then response will be defined and we can just return it.
          // Note that in this example, only font resources are cached.
// ...

Use cases

  • Using Service workers

    The Cache interface provides a persistent storage mechanism for Request / Response object pairs that are cached in long lived memory.

Cautions

  • May not be supported in older browsers.

Implementation notes

  • Some APIs require a secure context (HTTPS) or user activation. Check the requirements before use.

Related links