CacheStorage

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

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

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

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

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

Методы

CacheStorage.match()

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

CacheStorage.has() (en-US)

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

CacheStorage.open()

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

CacheStorage.delete() (en-US)

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

CacheStorage.keys() (en-US)

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

Примеры

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

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

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

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

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

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