В связи с быстрой и постоянной популярностью и распространением PWA скоро нормой станут веб-приложения и PWA, в основном с меньшим количеством традиционных модальных веб-порталов.

Я вижу, что люди часто неверно истолковывают, что PWA - это все о сервисных воркерах, ну, это так, но сервис-воркеры больше похожи на основу его возможностей, в то время как сам PWA создается с использованием набора различных веб-API вместе, чтобы извлечь из него какую-то разумную функцию. Одним из этих API является API CacheStorage, который также является предметом нашего обсуждения. В этой статье предполагается, что вы знакомы с Service Workers, их жизненными циклами и автономными веб-приложениями, в противном случае я бы посоветовал вам взглянуть на эту крутую штуку, которая существует в Интернете уже довольно давно!
Когда мы думаем о PWA, первое, что приходит в голову, - это офлайн. Идея заключается в том, что после установки и активации Service Worker может перехватывать сетевые запросы, сделанные из нашего источника или области Service Worker, и передавать содержимое для нашего приложения браузеру из некоторого локального кеша. Но прежде всего необходим некоторый безопасный механизм для управления хранением, извлечением и обновлением контента, связанного с приложениями. Вот требования и роль CacheStorage API. Кэширование и обслуживание ресурсов из локальной системы не только обеспечивает лучший UX, когда устройство отключено или находится в медленной сетевой области, но также помогает снизить использование данных и пропускную способность на клиенте и сервере соответственно.

CacheStorage позволяет приложению хранить список запросов и ответов под ключами категорий. Это означает, что вы можете определить категории данных, которые хотите сохранить для своего приложения, а затем под этими категориями или ключами сохранить список requests, сопоставленный с их соответствующими responses для использования в будущем. Асинхронный, основанный на Promise характер CacheStorage, а также дизайн и поведение событий и жизненного цикла Service Worker вместе с fetch, который также является Promise базовым API, делают их настолько удобными для совместного использования, что это привело к ряду шаблонов для хранения и обслуживания содержимого в зависимости от об их роли и требованиях к приложению. Но даже без Service Workers CacheStorage по-прежнему хорошо подходит для хранения, в основном из-за неблокирующей асинхронной природы.

Хотя CacheStorage определен в спецификации Service Worker, он подпадает подWindowOrWorkerGlobalScope,, что означает, что к нему можно получить доступ из window или любого типа worker области (например, Service Worker, Web Worker, Shared Worker).

Теперь, когда у нас есть базовое представление о , что CacheStorage API, давайте посмотрим, как его использовать, используя функции, которые он предоставляет пользователю, а затем некоторые шаблоны вокруг него.
Прежде чем мы начнем, я хочу, чтобы мы прояснили некоторые термины -

  • CacheStorage - собственно API. доступен с переменной caches на window, а также с worker областью.
  • Cache - объект, представляющий одну категорию или список запросов-ответов, хранящийся в CacheStorage.

Как правило, при кэшировании ресурсов вы хотите классифицировать их по типу или использованию, например статические ресурсы, ресурсы изображений, динамические ответы API.

Создание / открытие кеша в магазине

Ваш домен / источник может иметь несколько именованных cache объектов в магазине. Объект caches, реализующий CacheStorage, имеет метод open. open принимает CacheName в качестве параметра и возвращает Promise, который разрешается с помощью объекта cache. Если cache с таким же именем уже существует, open возвращает ссылку на cache, в противном случае он создает новый cache и возвращает ссылку на него.

Получение всех ключей кеша из магазина

caches.keys() разрешается с Promise, содержащим все имена кешей или имена категорий в последовательности. Этот метод удобен для получения всех кешей при обновлении Service Worker и удаления всех ненужных данных из предыдущей версии, что помогает поддерживать чистоту исходного кеша.

Проверка наличия именованного кеша в магазине

caches.has - это функция, предоставляемая CacheStorage, которая принимает cacheName в качестве параметра и возвращает Promise, которое разрешается в true или false в зависимости от того, содержит ли CacheStorage какой-либо кеш с указанным именем.

Получение товаров из магазина

CacheStorage имеет match метод, доступ к которому осуществляется через caches.match. match принимает обязательный параметр RequestInfo и необязательный параметр CacheQueryOptions. RequestInfo - это запрос, для которого сохраняется ответ. Например, ресурс изображения может быть сохранен по запросу с URL user/abc/profile с Content-Type image/jpeg.
CacheQueryOptions - это набор конфигураций для изменения фильтрации с предоставленнымRequestInfo. У него четыре значения:

  • ignoreSearch - по умолчанию false. Если установлено значение true, это означает, что мы хотим исключить параметры запроса из RequestInfo URL.
  • ignoreMethod - по умолчанию false. Если установлено значение true, это означает, что мы не хотим, чтобы операция сопоставления проверяла метод Request.
    Примечание: в cache хранятся только Get и Head.
  • ignoreVary - по умолчанию false. Если установлено значение true, это означает, что мы также хотим включать ответы с заголовками VARY.
  • cacheName - имя конкретного Cache, которое мы хотим изучить вместо того, чтобы просматривать все cache в хранилище.

Удаление из магазина

caches.delete принимает строку, то есть cacheName, и возвращает Promise, который разрешается в true или false в зависимости от того, была ли операция успешной или нет. Вы можете использовать это, когда Service Worker вашего сайта обновляется, чтобы очистить весь кэш ресурсов старой версии, который больше не требуется.

Если вы использовали базы данных раньше, вы можете связать с caches объектом, или CacheStorage - это контейнер или сама база данных, а объект, который caches.open преобразуется в то есть cache, представляет одну таблицу в базе данных.

Интерфейс Cache очень похож на интерфейс CacheStorage,, давайте также взглянем на cache.

Добавить элементы в кеш

  • cache.add принимает request. Из переданного запроса response извлекается по сети и затем сохраняется как значение, а запрос - как ключ.
  • Доступен другой аналогичный метод, cache.addAll, который принимает массив Request, который передается по сети, и соответствующие response сохраняются напротив их Requests в хранилище. Они полезны при предварительной загрузке статических ресурсов нашего сайта. Часто используется с событием обновления Service Worker для обновления новых ресурсов приложения.
  • put - cache.put позволяет передавать объекты request и response, которые хранятся как ключ и значение соответственно. Часто вы использовали cache.put в обработчике событий извлечения Service Worker, чтобы сохранять ответы в кеше для использования в будущем.

Получить элементы из кеша

  • match - совпадение принимает RequestInfo и необязательный CacheQueryOptions в качестве параметров и возвращает первое совпадение object, которое может быть любого типа, если найдено, или undefined, если совпадение не найдено, заключенное в Promise. Это то же самое, что и CacheStorage.match, с той лишь разницей, что это вызывается для объекта cache и, следовательно, параметр cacheName в CacheQueryOptions игнорируется в этом вызове.
  • matchAll - matchAll принимает RequestInfo и необязательный CacheQueryOptions в качестве параметров и возвращает Promise, который преобразуется в FrozenArray всех ответов из кеша, соответствующих этому запросу. Это то же самое, что и CacheStorage.match, с той лишь разницей, что это вызывается для объекта cache и, следовательно, параметр cacheName в CacheQueryOptions игнорируется в этом вызове.

match и matchAll здесь вызываются для cache объекта, поэтому операция поиска выполняется только в конкретном cache, а не во всем CacheStorage

Получение всех ключей из кеша

cache.keys() преобразуется в Promise, содержащий замороженный массив Request. Это все ключи из cache, которые можно использовать для итерации и фильтрации объектов в магазине или для очистки некоторых элементов.

Удаление из кеша

cache.delete принимает объект Request и необязательный CacheQueryOptions для идентификации и удаления некоторой пары запрос-ответ из cache. Поскольку CacheStorage выполняет все операции вручную, то есть только когда вызывается пользователем, очень важно разумно использовать метод delete и очистить все данные, которые больше не актуальны в cache. delete преобразуется в Promise из true или false в зависимости от успеха операции.

Это все о CacheStorage API. Будущее этого API выглядит многообещающим с поддержкой основных браузеров, таких как Chrome, Edge, FireFox и Opera. Safari также разместил CacheStorage API в Preview 43. Internet Explorer - единственный, у кого есть красный флаг для API.

Для старых браузеров, которые не поддерживают Cache API, вы можете поставить галочку
if («caches» in window) {/ * use caches * /}

Для автономных веб-функций CacheStorage разработано несколько шаблонов для обработки различных типов данных на основе приоритета, которые действительно удобны для начала и должны охватывать все общие сценарии. Поскольку эти функции используют другие API с CacheStorage, я сделал для этого отдельную статью Рецепты кеширования. После того, как вы закончите читать эту статью, перейдите к следующей.

При всем вышесказанном, предоставление быстрых и легких данных о затратах намного важнее, чем это выглядит на тестовых устройствах 4g, и мы, как разработчики, несем ответственность за продвижение всех встроенных суперспособностей потрясающей веб-платформы для конечных пользователей и предоставление лучших имеющийся опыт. Это способствует нашему продукту, пользовательскому опыту и, в конечном итоге, веб-экосистеме ❤️.
⚡⚡⚡ # playsPushSuperPowers🔥🔥🔥