Workbox: набор инструментов для работы с сервис-воркерами

Jeff Posnick

В создании надежных веб-приложений важную роль играют два API: Service Worker и Cache Storage. Но использовать их эффективно, не допуская ошибок и не сталкиваясь с пограничными случаями, может быть непросто. Например, ошибки в коде сервисного работника могут вызвать проблемы с кешированием; пользователям может быть показан устаревший контент или неработающие ссылки.

Workbox – это набор инструментов для работы с сервисом, созданный на основе API Service Worker и Cache Storage. В нем есть набор готовых библиотек, которые позволяют добавить в веб-приложения поддержку офлайн-режима. Инструментарий состоит из двух наборов: инструментов, которые помогают управлять кодом, выполняемым в сервис-воркере, и инструментов, которые интегрируются с процессом сборки.

Код среды выполнения

Этот код выполняется в скрипте сервисного работника и управляет тем, как он перехватывает исходящие запросы и взаимодействует с Cache Storage API. В Workbox есть около десятка модулей библиотеки, каждый из которых предназначен для определенных целей. Самые важные модули определяют, будет ли сервисный работник отвечать (маршрутизация) и как он будет отвечать (стратегия кеширования).

Создать интеграцию

Workbox предлагает командную строку, модуль Node.js и плагин webpack, которые позволяют:

  • Создайте скрипт сервис-воркера на основе набора параметров конфигурации. Сгенерированный сервисный работник использует библиотеки времени выполнения Workbox "под капотом", чтобы реализовать настроенные вами стратегии кэширования.
  • Создайте список URL, которые должны быть предварительно кешированы, на основе настраиваемых шаблонов, чтобы включить и исключить файлы, созданные в процессе сборки.

Зачем использовать Workbox?

Использовать Workbox при создании сервисного работника необязательно. Существует множество руководств, в которых описываются распространенные стратегии кеширования с точки зрения "ванильного" сервисного работника. Если вы решите использовать Workbox, вот некоторые из его преимуществ.

Управление кешем

Workbox обрабатывает обновления кеша за вас, либо привязанные к вашему процессу сборки при использовании предварительного кеширования, либо через настраиваемые политики размера/возраста при использовании кеширования во время выполнения. Базовый Cache Storage API – мощный инструмент, но в нем нет встроенной поддержки срока хранения кеша. Такие инструменты, как Workbox, заполняют этот пробел.

Подробные журналы и отчеты об ошибках

Когда вы только начинаете работать с сервис-воркерами, бывает сложно понять, почему что-то кешируется (или, что не менее неприятно, почему не кешируется). Workbox автоматически определяет, когда вы запускаете версию сайта для разработчиков на localhost, и включает ведение журнала отладки в консоли JavaScript браузера.

Запись Workbox в консоль инструментов разработчика

Отслеживая сообщения в журнале, вы сможете гораздо быстрее выявить причину проблем с конфигурацией или недействительными данными, чем если бы вы пытались сделать это самостоятельно.

Протестированная база кода, совместимая с разными браузерами.

Workbox разрабатывается с учетом набора кроссбраузерных тестов и, по возможности, автоматически возвращается к альтернативным реализациям функций, отсутствующих в некоторых браузерах.

Как использовать Workbox?

Интеграция фреймворка

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

Добавьте Workbox в существующий процесс сборки

Если у вас уже есть процесс сборки сайта, то для начала работы с Workbox может быть достаточно добавить соответствующий инструмент: командную строку, модуль Node.js или плагин webpack.

В частности, интерфейс командной строки Workbox упрощает запуск и работу, предлагая режим wizard, который проверит вашу локальную среду разработки и предложит разумную конфигурацию по умолчанию, которую вы сможете использовать в дальнейшем:

workbox wizard
? What is the root of your web app (i.e. which directory do you deploy)? src/
? Which file types would you like to precache? css, js, html
? Where would you like your service worker file to be saved? build/sw.js
? Where would you like to save these configuration options? workbox-config.js

Чтобы создать сервис-воркер, запустите workbox generateSW workbox-config.js в рамках процесса сборки. Подробная информация доступна в документации generateSW. Вы можете настроить сервисный скрипт, внеся изменения в файл workbox-config.js. Подробную информацию вы найдете в документации.

Как использовать Workbox во время выполнения в существующем сервисе-воркере

Если у вас уже есть сервис-воркер и вы хотите попробовать библиотеки времени выполнения Workbox, импортируйте Workbox из официальной сети доставки контента и сразу же начните использовать его для кеширования во время выполнения. Этот вариант использования означает, что вы не сможете воспользоваться преимуществами предварительного кеширования (которое требует интеграции во время сборки), но он отлично подходит для прототипирования и тестирования различных стратегий кеширования на лету.

// Replace 3.6.3 with the current version number of Workbox.
importScripts('https://storage.googleapis.com/workbox-cdn/releases/3.6.3/workbox-sw.js');

workbox.routing.registerRoute(
  new RegExp('\.png$'),
  workbox.strategies.cacheFirst({
    cacheName: 'images-cache',
  })
);