Кеширование

Кэш-хранилище — мощный инструмент. Это делает ваши приложения менее зависимыми от условий сети. При правильном использовании кэшей вы можете сделать свое веб-приложение доступным в автономном режиме и обслуживать свои ресурсы как можно быстрее в любых условиях сети. Как упоминалось в разделе «Активы и данные», вы можете выбрать лучшую стратегию кэширования необходимых ресурсов. Для управления кешем ваш сервис-воркер взаимодействует с 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». Там вы можете увидеть содержимое каждого кэша текущего источника. Подробнее об этих инструментах мы расскажем в главе «Инструменты и отладка» .

Ресурсы

• Кэш-хранилище на MDN
• API кэша: краткое руководство
• Офлайн-поваренная книга
• Раскрытие тайны кэширования: проверка, очистка и отключение кэшей