Кэш-хранилище — мощный инструмент. Это делает ваши приложения менее зависимыми от условий сети. При правильном использовании кэшей вы можете сделать свое веб-приложение доступным в автономном режиме и обслуживать свои ресурсы как можно быстрее в любых условиях сети. Как упоминалось в разделе «Активы и данные», вы можете выбрать лучшую стратегию кэширования необходимых ресурсов. Для управления кешем ваш сервис-воркер взаимодействует с Cache Storage API .
API хранилища кэша доступен в разных контекстах:
- Контекст окна (основной поток вашего PWA).
- Работник службы.
- Любые другие работники, которых вы используете.
Одним из преимуществ управления кэшем с помощью сервис-воркеров является то, что его жизненный цикл не привязан к окну, а это значит, что вы не блокируете основной поток. Имейте в виду, что для использования API Cache Storage большинство этих контекстов должны находиться в соединении TLS.
Что кэшировать
Первый вопрос, который может у вас возникнуть по поводу кэширования, — что кэшировать. Хотя на этот вопрос нет однозначного ответа, вы можете начать со всех минимальных ресурсов, необходимых для рендеринга пользовательского интерфейса.
Эти ресурсы должны включать:
- HTML-код главной страницы (start_url вашего приложения).
- Таблицы стилей CSS, необходимые для основного пользовательского интерфейса.
- Изображения, используемые в пользовательском интерфейсе.
- Файлы JavaScript, необходимые для отображения пользовательского интерфейса.
- Данные, такие как файл JSON, необходимые для отображения базового опыта.
- Веб-шрифты.
- В многостраничном приложении — другие HTML-документы, которые вы хотите обслуживать быстро или в автономном режиме.
Готов к работе в автономном режиме
Хотя возможность работы в автономном режиме является одним из требований для прогрессивного веб-приложения, важно понимать, что не каждому PWA требуется полноценная работа в автономном режиме, например, облачным игровым решениям или приложениям с криптоактивами. Поэтому можно предложить базовый пользовательский интерфейс, который поможет вашим пользователям в таких ситуациях.
Ваш PWA не должен отображать сообщение об ошибке браузера о том, что механизму веб-рендеринга не удалось загрузить страницу. Вместо этого используйте своего сервис-воркера, чтобы показать свои собственные сообщения, избегая типичных и запутанных ошибок браузера.
Существует множество различных стратегий кэширования, которые вы можете использовать в зависимости от потребностей вашего PWA. Вот почему важно спланировать использование кэша так, чтобы обеспечить быструю и надежную работу. Например, если все ресурсы вашего приложения будут загружаться быстро, не будут занимать много места и не будут нуждаться в обновлении при каждом запросе, кэширование всех ваших ресурсов будет подходящей стратегией. С другой стороны, если у вас есть ресурсы, которые должны быть последней версии, вы можете вообще не кэшировать эти ресурсы.
Использование API
Используйте API хранилища кэша, чтобы определить набор кэшей в вашем источнике, каждый из которых идентифицируется строковым именем, которое вы можете определить. Доступ к API осуществляется через объект caches
, а метод open
позволяет создавать или открывать уже созданный кэш. Метод open возвращает обещание для объекта кэша.
caches.open("pwa-assets")
.then(cache => {
// you can download and store, delete or update resources with cache arguments
});
Загрузка и хранение ресурсов
Чтобы попросить браузер загрузить и сохранить ресурсы, используйте методы add
или addAll
. Метод add
создает запрос и сохраняет один HTTP-ответ, а addAll
группу HTTP-ответов в виде транзакции на основе массива запросов или URL-адресов.
caches.open("pwa-assets")
.then(cache => {
cache.add("styles.css"); // it stores only one resource
cache.addAll(["styles.css", "app.js"]); // it stores two resources
});
Интерфейс хранения кэша хранит весь ответ, включая все заголовки и тело. Следовательно, вы можете получить его позже, используя HTTP-запрос или URL-адрес в качестве ключа. Вы увидите, как это сделать, в главе «Обслуживание» .
Когда кэшировать
В вашем PWA вы сами решаете, когда кэшировать файлы. Хотя один из подходов заключается в хранении как можно большего количества ресурсов при установке сервис-воркера, обычно это не лучшая идея. Кэширование ненужных ресурсов приводит к потере пропускной способности и места для хранения данных, а также может привести к тому, что ваше приложение будет непреднамеренно обслуживать устаревшие ресурсы.
Вам не нужно кэшировать все ресурсы одновременно, вы можете кэшировать ресурсы много раз в течение жизненного цикла вашего PWA, например:
- По установке сервисника.
- После загрузки первой страницы.
- Когда пользователь переходит к разделу или маршруту.
- Когда сеть простаивает.
Вы можете запросить кэширование новых файлов в основном потоке или в контексте сервисного работника.
Кэширование ресурсов в сервисном работнике
Одним из наиболее распространенных сценариев является кэширование минимального набора ресурсов при установке сервисного работника. Для этого вы можете использовать интерфейс хранилища кэша в событии install
в сервис-воркере.
Поскольку рабочий поток службы может быть остановлен в любой момент, вы можете попросить браузер дождаться завершения обещания addAll
, чтобы увеличить возможность хранения всех ресурсов и обеспечения согласованности приложения. В следующем примере показано, как это сделать, используя метод waitUntil
аргумента события, полученного в прослушивателе событий сервисного работника.
const urlsToCache = ["/", "app.js", "styles.css", "logo.svg"];
self.addEventListener("install", event => {
event.waitUntil(
caches.open("pwa-assets")
.then(cache => {
return cache.addAll(urlsToCache);
});
);
});
Метод waitUntil()
получает обещание и просит браузер дождаться разрешения задачи в обещании (выполненной или неудачной), прежде чем завершать рабочий процесс службы. Возможно, вам придется объединить обещания и вернуть вызовы add()
или addAll()
чтобы единственный результат попал в метод waitUntil()
.
Вы также можете обрабатывать обещания, используя синтаксис async/await. В этом случае вам необходимо создать асинхронную функцию, которая может вызывать await
и возвращает обещание waitUntil()
после вызова, как в следующем примере:
const urlsToCache = ["/", "app.js", "styles.css", "logo.svg"];
self.addEventListener("install", (event) => {
let cacheUrls = async () => {
const cache = await caches.open("pwa-assets");
return cache.addAll(urlsToCache);
};
event.waitUntil(cacheUrls());
});
Междоменные запросы и непрозрачные ответы
Ваш PWA может загружать и кэшировать ресурсы из вашего источника и междоменов, например контент из сторонних CDN. В междоменном приложении взаимодействие с кэшем очень похоже на запросы одного и того же источника. Запрос выполняется, и копия ответа сохраняется в вашем кеше. Как и другие кэшированные ресурсы, его можно использовать только в источнике вашего приложения.
Ресурс будет сохранен как непрозрачный ответ . Это означает, что ваш код не сможет видеть или изменять содержимое или заголовки этого ответа. Кроме того, непрозрачные ответы не раскрывают свой фактический размер в API хранилища, что влияет на квоты. Некоторые браузеры поддерживают большие размеры, например 7 МБ, даже если размер файла составляет всего 1 КБ.
Обновление и удаление ресурсов
Вы можете обновлять активы с помощью cache.put(request, response)
и удалять активы с помощью delete(request)
.
Дополнительную информацию можно найти в документации по объекту Cache .
Отладка хранилища кэша
Многие браузеры предлагают способ отладки содержимого кэша на вкладке «Приложение DevTools». Там вы можете увидеть содержимое каждого кэша текущего источника. Подробнее об этих инструментах мы расскажем в главе «Инструменты и отладка» .