CacheStorage

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since April 2018.

Интерфейс CacheStorage представляет собой хранилище для объектов Cache. Он предоставляет главную директорию всех именованных кешей, к которым могут получить доступ ServiceWorker, другие типы воркеров или window (вы не обязаны использовать их с service workers, даже если существует спецификация, определяющая это) и поддерживает отображение строковых имён соответствующих объектов Cache.

CacheStorage также позволяет вызвать CacheStorage.open() и CacheStorage.match(). Используйте CacheStorage.open() для получения экземпляров Cache. Используйте CacheStorage.match() для проверки того, является ли данный Request ключом в любом из объектов Cache, отслеживаемых объектом CacheStorage.

Вы можете получить доступ к CacheStorage через глобальное свойство caches.

Примечание: CacheStorage всегда возвращает отказ с SecurityError для ненадёжных источников (т.e. тех, что не используют HTTPS, хотя это утверждение, вероятно, станет более общим в будущем). При тестировании это можно обойти, установив опцию "Enable Service Workers over HTTP (when toolbox is open)" в меню Firefox Devtools options/gear.

Примечание: Подобная функциональность сопоставления записей кеша может быть реализована путём открытия вашего кеша с помощью CacheStorage.open(), возвращения записей, в ней содержащихся, через CacheStorage.keys() и сравнения необходимой CacheStorage.match().

Методы

CacheStorage.match()

Проверяет, является ли данный Request ключом в любом из объектов Cache, отслеживаемых объектом CacheStorage, и возвращает Promise, который успешно завершится, когда найдёт совпадение.

CacheStorage.has()

Возвращает Promise, который успешно завершится и вернёт true, если объект Cache содержит кеш с установленным cacheName.

CacheStorage.open()

Возвращает Promise, который успешно завершится, когда объект Cache найдёт необходимый объект с cacheName (если такого нет, то создаст новый).

CacheStorage.delete()

Находит объект Cache, соответствующий cacheName, и, если такой обнаружен, удаляет объект Cache и возвращает Promise, завершающийся с true. Если объект Cache не найдёт, то возвращается false.

CacheStorage.keys()

Возвращает Promise, который вернёт массив, содержащий строки, соответствующие всем именованным объектам Cache, отслеживаемым CacheStorage. Используйте этот метод для прохода по списку всех объектов Cache.

Примеры

Фрагмент кода взят с MDN sw-test example (смотри sw-test running live). Этот service worker ожидает старта события InstallEvent, затем запускает waitUntil для обработки процесса установки приложения. Он состоит из вызова CacheStorage.open для создания нового кеша и затем использует Cache.addAll для добавления к нему списка ресурсов.

Во втором блоке кода мы ждём запуска события FetchEvent. Мы создаём встроенный ответ:

  1. Проверяем, был ли необходимый запрос найден в CacheStorage. Если да, выполняем его.
  2. Если нет, получаем запрос от сети, затем так же открываем кеш, созданный в первом блоке, и добавляем клон запроса в него, используя Cache.put (cache.put(event.request, response.clone()).)
  3. Если произошла ошибка (например, из-за отсутствия подключения), возвращаем ответ с отказом.

Наконец, возвращаем ответ, был ли встроенный запрос в итоге равнозначным, используя FetchEvent.respondWith.

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

this.addEventListener("fetch", function (event) {
  var response;
  event.respondWith(
    caches
      .match(event.request)
      .catch(function () {
        return fetch(event.request);
      })
      .then(function (r) {
        response = r;
        caches.open("v1").then(function (cache) {
          cache.put(event.request, response);
        });
        return response.clone();
      })
      .catch(function () {
        return caches.match("/sw-test/gallery/myLittleVader.jpg");
      }),
  );
});

Спецификации

Specification
Service Workers
# cachestorage-interface

Совместимость с браузерами

Report problems with this compatibility data on GitHub
desktopmobileserver
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
Deno
CacheStorage
delete
has
keys
match
open
Secure context required
Available in workers

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
Partial support
Partial support
No support
No support
Has more compatibility info.

Смотрите также