CacheStorage: open() method

{{APIRef("Service Workers API")}} {{SecureContext_Header}} {{AvailableInWorkers}} 

The open() method of the {{domxref("CacheStorage")}}  interface returns a {{jsxref("Promise")}}  that resolves to the {{domxref("Cache")}}  object matching the cacheName.

You can access CacheStorage through the {{domxref("Window.caches")}}  property in windows or through the {{domxref("WorkerGlobalScope.caches")}}  property in workers.

[!NOTE] If the specified {{domxref("Cache")}}  does not exist, a new cache is created with that cacheName and a {{jsxref("Promise")}}  that resolves to this new {{domxref("Cache")}}  object is returned.

Syntax

open(cacheName)

Parameters

• cacheName
  • : The name of the cache you want to open.

Return value

A {{jsxref("Promise")}}  that resolves to the requested {{domxref("Cache")}}  object.

Examples

This example is from the MDN simple service worker example (see simple service worker running live). Here we wait for an {{domxref("InstallEvent")}}  to fire, then runs {{domxref("ExtendableEvent.waitUntil","waitUntil()")}}  to handle the install process for the app. This consists of calling CacheStorage.open() to create a new cache, then using {{domxref("Cache.addAll()")}}  to add a series of assets to it.

self.addEventListener("install", (event) => {
  event.waitUntil(
    caches
      .open("v1")
      .then((cache) =>
        cache.addAll([
          "/",
          "/index.html",
          "/style.css",
          "/app.js",
          "/image-list.js",
          "/star-wars-logo.jpg",
          "/gallery/bountyHunters.jpg",
          "/gallery/myLittleVader.jpg",
          "/gallery/snowTroopers.jpg",
        ]),
      ),
  );
});

Specifications

{{Specifications}} 

Browser compatibility

{{Compat}} 

See also

• Using Service Workers
• {{domxref("Cache")}} 
• {{domxref("Window.caches")}}  and {{domxref("WorkerGlobalScope.caches")}}