В связи с быстрой и постоянной популярностью и распространением 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🔥🔥🔥