Прогрессивные веб-приложения: работа с Workbox

1. Добро пожаловать

В этой лабораторной работе вы возьмёте веб-сайт с существующим сервис-воркером и переведёте его на использование Workbox. Это вторая из серии сопутствующих практических работ для семинара Progressive Web App . Предыдущая лабораторная работа называлась «Переход в автономный режим» . В этой серии ещё шесть практических работ.

Чему вы научитесь

  • Преобразование существующего Service Worker для использования Workbox
  • Добавить автономный резервный вариант к PWA

Что вам следует знать

  • Базовый HTML и JavaScript

Что вам понадобится

2. Подготовка

Начните с клонирования или загрузки начального кода, необходимого для выполнения этой лабораторной работы:

Если вы клонируете репозиторий, убедитесь, что вы находитесь на ветке pwa03--workbox . ZIP-архив также содержит код для этой ветки.

Для этой кодовой базы требуется Node.js 14 или выше. После того, как код будет готов, выполните команду npm ci из командной строки в папке с кодом, чтобы установить все необходимые зависимости. Затем выполните npm start , чтобы запустить сервер разработки для этой кодовой лаборатории.

Файл README.md исходного кода содержит пояснения ко всем распространяемым файлам. Кроме того, ниже перечислены основные существующие файлы, с которыми вы будете работать в ходе этой лабораторной работы:

Ключевые файлы

  • service-worker.js — файл сервисного работника приложения
  • offline.html — автономный HTML-код для использования, когда страница недоступна

3. Перейти на Workbox

Если взглянуть на существующий сервис-воркер, то предварительное кэширование можно разбить на два этапа:

  • Кэшировать соответствующие файлы во время установки Service Worker
  • Повторно обслуживайте эти файлы, используя стратегию «Только кэширование».

Файл index.html и маршрут / по-прежнему имеет смысл предварительно кэшировать, поскольку HTML этого веб-приложения не будет сильно меняться, но другие файлы, такие как CSS и JavaScript, могут измениться, и нам не хочется каждый раз проходить весь жизненный цикл Service Worker. Кроме того, текущий Service Worker учитывает только часть наших CSS и JavaScript, а нам нужно охватить их все. Кэширование этих элементов с помощью стратегии Stale While Revalidate более целесообразно: быстрый отклик, который можно обновлять в фоновом режиме по мере необходимости.

Повторное кэширование

При миграции в Workbox нам не нужно сохранять существующий код, поэтому удалите всё в service-worker.js . В предыдущей лабораторной работе мы настроили этот Service Worker на компиляцию, чтобы использовать импорт ESModule для подключения Workbox из его NPM-модулей. Начнём с повторного рассмотрения предварительного кэширования. В service-worker.js добавьте следующий код:

import { warmStrategyCache } from 'workbox-recipes';
import { CacheFirst } from 'workbox-strategies';
import { registerRoute } from 'workbox-routing';
import { CacheableResponsePlugin } from 'workbox-cacheable-response';
import { ExpirationPlugin } from 'workbox-expiration';

// Set up page cache
const pageCache = new CacheFirst({
  cacheName: 'page-cache',
  plugins: [
    new CacheableResponsePlugin({
      statuses: [0, 200],
    }),
    new ExpirationPlugin({
      maxAgeSeconds: 30 * 24 * 60 * 60,
    }),
  ],
});

warmStrategyCache({
  urls: ['/index.html', '/'],
  strategy: pageCache,
});

registerRoute(({ request }) => request.mode === 'navigate', pageCache);

Объяснение

Чтобы настроить предварительное кэширование для /index.html и / , нужно загрузить пять модулей. Хотя это может показаться слишком много, этот код гораздо мощнее предыдущего.

Сначала настраивается новая стратегия кэширования «Cache First», которая выбирается вместо стратегии «Cache Only», что позволяет добавлять другие страницы в кэш по мере необходимости. Стратегии называются page-cache . Стратегии Workbox могут использовать ряд плагинов, влияющих на жизненный цикл сохранения и извлечения контента из кэша. В данном случае используются два плагина: Cacheable Response и Expiration, которые обеспечивают кэширование только корректных ответов сервера и очистку каждого элемента кэша через 30 дней.

Затем кэш стратегии разогревается с помощью /index.html и / с помощью рецепта Workbox для разогрева кэша стратегии. Это добавит эти элементы в кэш во время события установки сервис-воркера.

Наконец, регистрируется новый маршрут. Любой запрос, представляющий собой навигацию по страницам, будет обрабатываться стратегией Cache First: данные будут либо извлечены из кэша, либо из сети, а затем кэшированы.

Кэширование активов

Разобравшись с предварительным кэшированием маршрутов, пора перенастроить кэширование ресурсов сайта (CSS и JavaScript). Для этого сначала добавьте StaleWhileRevalidate в импортируемый файл workbox-strategies , а затем добавьте следующий код в конец файла Service Worker:

// Set up asset cache
registerRoute(
  ({ request }) => ['style', 'script', 'worker'].includes(request.destination),
  new StaleWhileRevalidate({
    cacheName: 'asset-cache',
    plugins: [
      new CacheableResponsePlugin({
        statuses: [0, 200],
      }),
    ],
  }),
);

Объяснение

Этот маршрут начинается с определения типа запроса: стиль, скрипт или воркер, соответствующий CSS, JavaScript или веб-воркерам. Если тип запроса соответствует, применяется стратегия Stale While Revalidate, которая сначала пытается обработать данные из кэша, а затем, если он недоступен, обращается к сети, одновременно пытаясь обновить версию в кэше из сети, если это возможно. Как и стратегия Page, эта стратегия кэширует только корректные ответы.

4. Добавьте резервную версию для автономного режима

После переноса исходного сервисного работника в Workbox необходимо сделать еще одну вещь, чтобы предотвратить сбои PWA в автономном режиме: добавить резервный вариант для автономного режима.

Резервные версии в автономном режиме можно настроить для всего, что может быть недоступно в автономном режиме: страниц, шрифтов, CSS, JavaScript, изображений и т. д. Как минимум, резервная страница должна быть настроена для всех PWA, чтобы, если пользователь перейдет на страницу, отсутствующую в кэше, он остался в контексте вашего приложения.

Workbox recipes предоставляет резервный рецепт для автономной работы, который можно использовать именно для этого! Чтобы использовать его, сначала добавьте offlineFallback в импорт workbox-recipes , а затем добавьте следующий код в конец Service Worker:

// Set up offline fallback
offlineFallback({
  pageFallback: '/offline.html',
});

Объяснение

Рецепт отката в автономном режиме устанавливает стратегию «Только кэш», которая активируется с помощью предоставленных откатов. Затем он устанавливает обработчик перехватов Workbox по умолчанию, который перехватывает все неудачные запросы маршрутизации (если в кэше ничего нет и какой-либо объект недоступен по сети), извлекает содержимое соответствующих файлов из кэша и возвращает его как контент, пока запрос не будет выполнен.

5. Поздравляем!

Вы узнали, как использовать Workbox для настройки стратегий кэширования маршрутов и предоставления автономных резервных вариантов для вашего PWA.

Следующая лабораторная работа в серии — IndexedDB.