Учебник Workbox

Введение в Workbox и сервис-воркеры
- Роль сервис-воркера в современном вебе
- Жизненный цикл сервис-воркера
- Ограничения и требования сервис-воркеров
- Что такое Workbox и зачем он нужен
- Обзор архитектуры Workbox
- Версии Workbox и история развития
- Способы подключения Workbox к проекту
Установка и первоначальная настройка
- Подключение через CDN
- Установка через npm
- Структура пакетов Workbox
- Создание первого сервис-воркера с Workbox
- Регистрация сервис-воркера в приложении
- Отладка сервис-воркера в DevTools
- Типичные ошибки при инициализации
Маршрутизация запросов
- Принцип работы роутера Workbox
- Класс Route и его параметры
- Сопоставление запросов с помощью строк
- Сопоставление запросов с помощью регулярных выражений
- Сопоставление запросов с помощью функций
- Приоритет маршрутов и порядок их обработки
- Маршрутизация по типу ресурса
- Обработка навигационных запросов
- Маршруты для сторонних доменов
- Метод registerRoute и его варианты использования
- Отлов запросов вне зарегистрированных маршрутов
Стратегии кэширования
- Концепция стратегий и их назначение
- Cache First
- Network First
- Stale While Revalidate
- Network Only
- Cache Only
- Выбор стратегии под тип ресурса
- Создание собственной стратегии
- Класс Strategy и его интерфейс
- Параметры настройки стратегий
- Обработка ошибок внутри стратегий
Управление кэшем
- Именование кэшей
- Workbox и Cache Storage API
- Плагин ExpirationPlugin
- Ограничение количества записей в кэше
- Ограничение времени жизни записей
- Плагин CacheableResponsePlugin
- Фильтрация по статус-кодам
- Фильтрация по заголовкам ответа
- Ручная очистка кэша
- Версионирование кэша
- Стратегия инвалидации кэша
- Инспектирование кэша через DevTools
Предварительное кэширование
- Что такое precaching и когда он нужен
- Манифест предварительного кэширования
- Метод precacheAndRoute
- Обработка навигационных запросов при precaching
- Ревизии файлов и хэширование
- Обновление precache при новом деплое
- Удаление устаревших записей precache
- Precaching и одностраничные приложения
- Частичное обновление precache
- Ограничения объёма precache
Плагины Workbox
- Архитектура плагинов
- Хуки жизненного цикла запроса
- Написание собственного плагина
- BroadcastUpdatePlugin
- BackgroundSyncPlugin
- RangeRequestsPlugin
- Плагин для сжатия и трансформации ответов
- Порядок применения нескольких плагинов
- Передача контекста между плагинами
Фоновая синхронизация
- Background Sync API и его ограничения
- Класс BackgroundSyncQueue
- Добавление запросов в очередь
- Воспроизведение очереди при восстановлении сети
- Настройка максимального времени хранения запросов
- Обработка неудачных повторных попыток
- Именование очередей синхронизации
- Интеграция Background Sync с формами и API-вызовами
- Отладка фоновой синхронизации
Широковещательные обновления
- Механизм Broadcast Channel API
- Назначение BroadcastUpdatePlugin
- Настройка канала обновлений
- Прослушивание обновлений на стороне клиента
- Определение изменённых заголовков
- Уведомление пользователя об обновлении контента
- Интеграция с UI-фреймворками
Потоковые ответы
- Streams API в контексте сервис-воркера
- Модуль workbox-streams
- Сборка ответа из нескольких источников
- Стратегии для потоковой отдачи HTML
- Комбинирование кэшированных и сетевых фрагментов
- Обработка ошибок в потоках
- Производительность потоковых ответов
Навигационные запросы и App Shell
- Паттерн App Shell
- Настройка NavigationRoute
- Обслуживание App Shell из кэша
- Исключения из навигационных маршрутов
- NavigationPreload и его настройка
- Влияние NavigationPreload на производительность
- Совместная работа NavigationPreload и стратегий
Workbox с инструментами сборки
- Обзор инструментов генерации сервис-воркера
- workbox-build: режим generateSW
- workbox-build: режим injectManifest
- workbox-build: режим getManifest
- Конфигурационный файл workbox-config.js
- Glob-паттерны для включения и исключения файлов
- Интеграция с Webpack через workbox-webpack-plugin
- Режим GenerateSW в Webpack
- Режим InjectManifest в Webpack
- Интеграция с Vite через vite-plugin-pwa
- Интеграция с Rollup
- Интеграция с Gulp
- Настройка sourcemap для сервис-воркера
Работа с TypeScript
- Типы и интерфейсы Workbox
- Настройка tsconfig для сервис-воркера
- Типизация собственных плагинов
- Типизация кастомных стратегий
- Типизация обработчиков маршрутов
- Распространённые ошибки типизации
Workbox в рамках различных архитектур
- Workbox в одностраничных приложениях
- Workbox в многостраничных приложениях
- Workbox с серверным рендерингом
- Workbox и Next.js
- Workbox и Nuxt.js
- Workbox и Angular Service Worker
- Workbox и Create React App
- Workbox с микрофронтендами
Производительность и оптимизация
- Влияние сервис-воркера на загрузку страницы
- Измерение эффективности кэширования
- Оптимизация размера precache-манифеста
- Стратегии для шрифтов и изображений
- Стратегии для API-запросов
- Кэширование ответов с авторизацией
- Условное кэширование
- Работа с большими файлами и range-запросами
- Lazy-loading и кэш по требованию
Обновление приложения и управление версиями
- Проблема устаревшего сервис-воркера
- Жизненный цикл обновления и skipWaiting
- Метод clientsClaim
- Уведомление пользователя о доступном обновлении
- Принудительное обновление сервис-воркера
- Стратегии плавного обновления без потери данных
- Откат к предыдущей версии
- Синхронизация версий между вкладками
Тестирование
- Тестирование сервис-воркеров: общие подходы
- Использование jest и jest-environment-jsdom
- Пакет workbox-sw для тестирования
- Мокирование Cache Storage API
- Мокирование Fetch API
- Тестирование стратегий кэширования
- Тестирование маршрутов
- Тестирование плагинов
- Интеграционное тестирование сервис-воркера
- Тестирование в реальном браузере с Puppeteer
- Тестирование офлайн-режима
Безопасность
- HTTPS как обязательное условие
- Проверка источника запросов
- Кэширование и заголовки безопасности
- Защита от атак через кэш
- Политика CORS и сервис-воркер
- Чувствительные данные в кэше
- Управление сроком жизни авторизационных ресурсов
- Content Security Policy и сервис-воркер
Офлайн-режим
- Проектирование офлайн-first приложения
- Определение доступности сети
- Fallback-страницы и fallback-ответы
- Офлайн-аналитика с workbox-google-analytics
- Очередь действий пользователя в офлайне
- Синхронизация состояния при восстановлении соединения
- UX офлайн-режима
Расширенные возможности и внутреннее устройство
- Модуль workbox-core и его роль
- Настройка уровня логирования
- Переопределение fetch-обработчика
- Работа с несколькими сервис-воркерами
- Передача сообщений между воркером и страницей
- MessageChannel и postMessage в Workbox
- Workbox и Web Push-уведомления
- Управление клиентами через Clients API
- Заголовок Service-Worker-Navigation-Preload
- Расширение Workbox сторонними модулями