CacheStorage

Интерфейс 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

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

BCD tables only load in the browser

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