Cache

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since ⁨апрель 2018 г.⁩.

ИнтерфейсCache представляет собой механизм хранения пары объектовRequest /Response, которые кешируются, например, как часть жизненного циклаServiceWorker. Заметьте, что интерфейс Cache доступен как в области видимости окна, так и в области видимости воркеров. Не обязательно использовать его вместе с сервис воркерами, даже если интерфейс определён в их спецификации.

Для вызывающего скрипта может быть множество именованных объектовCache. Разработчик сам определяет реализацию того, как скрипт (например, вServiceWorker) управляет обновлениемCache. Записи вCache не будут обновлены, пока не будет выполнен явный запрос; их время жизни не истечёт до момента удаления. ИспользуйтеCacheStorage.open(cacheName), чтобы открыть определённый именованный объектCache и затем вызывайте любые методыCache для управления его состоянием.

Вы также ответственны за периодическую очистку записей кеша. Каждый браузер имеет жёсткие ограничения на объем хранилища кеша, доступный для исходного кода. Браузер делает все, чтобы как можно лучше использовать дисковое пространство, но он может удалить хранилище кеша для скрипта. В основном, браузер либо удаляет все данные из кеша для скрипта, либо не удаляет ничего. Устанавливайте версии кеша в имени и используйте кеш только той версии, которая безопасна для использования. СмотритеУдаление старого кеша.

Примечание:Алгоритм сопоставления ключей зависит от заголовкаVARY хранимого значения. Таким образом, сопоставление нового ключа требует одновременно как проверки самого ключа, так и значений для записей в Cache.

Примечание:Кеширующие API не учитывают заголовки кеширования HTTP.

Методы

Cache.match(request, options): ВозвращаетPromise, который успешно завершается с нахождением первого совпадения для данного запроса в объектеCache.
Cache.matchAll(request, options): ВозвращаетPromise, который успешно завершается и возвращает массив всех найденных совпадений для данного запроса в объектеCache.
Cache.add(request): Принимает в качестве параметра URL, получает данные по нему и добавляет полученный объект ответа в заданный кеш. Функциональный эквивалент вызову fetch() с последующим вызовом Cache.put() для добавления результата в кеш.
Cache.addAll(requests): Принимает массив URL в качестве параметра, получает данные по ним, добавляет полученные объекты ответов в заданный кеш.
Cache.put(request, response): Принимает запрос и ответ на него и добавляет их в заданный кеш.
Cache.delete(request, options): Находит записьCache, чей ключ является запросом, и, в случае нахождения, удаляет записьCache и возвращаетPromise, успешно завершающийся со значениемtrue. Если же записьCache не найдена, возвращаетсяfalse.
Cache.keys(request, options): ВозвращаетPromise, который отдаёт массив ключейCache.

Примеры

Этот пример кода изпримера выборочного кеширования сервис воркера. (смотритеработа выборочного кеширования). В коде используетсяCacheStorage.open(cacheName) для открытия любых объектовCache с заголовком Content-Type, начинающимся сfont/.

Далее используетсяCache.match(request, options) для определения того, находится ли уже совпадающий шрифт в кеше, и, если так, то возвращает его. Если же совпадающего шрифта нет, код получает этот шрифт по сети и используетCache.put(request, response) для кеширования полученного ресурса.

Код обрабатывает исключения, возможные при операцииfetch(). Заметьте, что HTTP-ответ с ошибкой (например, 404) не будет вызывать исключения. Будет возвращён нормальный объект ответа с установленным соответствующим кодом ошибки.

Также, пример описывает лучшие практики по заданию версий кеша при работе с сервис воркерами. И хотя в примере лишь один кеш, тот же подход может быть использован для множества кешей. Он сравнивает сокращённый идентификатор кеша с определённым, версионным именем кеша. Код также удаляет весь кеш, для которого не определено имяCURRENT_CACHES.

В примере кода "кеш" это атрибут WorkerGlobalScope сервис воркеров. Он содержит объект CacheStorage, через который можно получить доступ кCacheStorage API.

Примечание:В Chrome, откройтеchrome://inspect/#service-workers и кликните по ссылке "inspect" под зарегистрированным сервис воркером чтобы увидеть записи журнала по различным действиям выполняемым скриптомservice-worker.js.

var CACHE_VERSION = 1;// Сокращённый идентификатор привязанный к определённой версии кеша.var CURRENT_CACHES = {  font: "font-cache-v" + CACHE_VERSION,};self.addEventListener("activate", function (event) {  var expectedCacheNames = Object.keys(CURRENT_CACHES).map(function (key) {    return CURRENT_CACHES[key];  });  // Активный воркер не будет рассматриваться как активированный, пока promise не разрешится успешно.  event.waitUntil(    caches.keys().then(function (cacheNames) {      return Promise.all(        cacheNames.map(function (cacheName) {          if (expectedCacheNames.indexOf(cacheName) == -1) {            console.log("Deleting out of date cache:", cacheName);            return caches.delete(cacheName);          }        }),      );    }),  );});self.addEventListener("fetch", function (event) {  console.log("Handling fetch event for", event.request.url);  event.respondWith(    // Открывает объекты Cache, начинающиеся с 'font'.    caches.open(CURRENT_CACHES["font"]).then(function (cache) {      return cache        .match(event.request)        .then(function (response) {          if (response) {            console.log("Found response in cache:", response);            return response;          }        })        .catch(function (error) {          // Обрабатывает исключения от match() или fetch().          console.error("Error in fetch handler:", error);          throw error;        });    }),  );});