Регистрация сервис-воркера в приложении

Основы работы сервис-воркера

Сервис-воркер — это скрипт, который браузер запускает в фоновом режиме, отдельно от веб-страницы, обеспечивая возможности для кэширования ресурсов, обработки сетевых запросов, push-уведомлений и фоновой синхронизации. Он не имеет прямого доступа к DOM, но взаимодействует с клиентскими страницами через postMessage и события.

Регистрация сервис-воркера выполняется на стороне клиента в основном JavaScript-файле приложения. Ключевым моментом является проверка поддержки сервис-воркеров в браузере:

if ('serviceWorker' in navigator) {
  navigator.serviceWorker.register('/service-worker.js')
    .then(registration => {
      console.log('Сервис-воркер успешно зарегистрирован:', registration.scope);
    })
    .catch(error => {
      console.error('Ошибка регистрации сервис-воркера:', error);
    });
}
  • navigator.serviceWorker.register принимает путь к файлу сервис-воркера.
  • Метод возвращает Promise, который разрешается объектом регистрации (ServiceWorkerRegistration) или отклоняется с ошибкой.
  • Поле registration.scope показывает область видимости сервис-воркера, определяющую, какие URL он может контролировать.

Определение области видимости

Область видимости сервис-воркера важна для контроля ресурсов, которые он будет перехватывать. Она задаётся вторым параметром при регистрации:

navigator.serviceWorker.register('/service-worker.js', { scope: '/' })
  • scope по умолчанию совпадает с директорией файла сервис-воркера.
  • Например, сервис-воркер, зарегистрированный по пути /sw.js, по умолчанию контролирует все страницы на /.
  • Можно ограничить область видимости более узкой директорией для изолирования функционала.

Поддержка обновлений

Браузер автоматически проверяет обновления сервис-воркера при каждой загрузке страницы. Однако Workbox предоставляет удобные методы для ручного контроля обновлений.

Пример: автоматическое уведомление о новой версии сервис-воркера:

navigator.serviceWorker.register('/service-worker.js').then(registration => {
  registration.onupdatefo und = () => {
    const newWorker = registration.installing;
    newWorker.onstatecha nge = () => {
      if (newWorker.state === 'installed' && navigator.serviceWorker.controller) {
        console.log('Доступна новая версия сервис-воркера');
      }
    };
  };
});
  • onupdatefound срабатывает, когда обнаружена новая версия.
  • state сервис-воркера проходит через состояния: installing, installed, activating, activated, redundant.
  • navigator.serviceWorker.controller указывает, что текущая страница уже контролируется сервис-воркером.

Интеграция с Workbox

Workbox упрощает регистрацию и управление сервис-воркерами, обеспечивая удобные методы кэширования и маршрутизации запросов. Для начала необходимо подключить Workbox:

import { Workbox } from 'workbox-window';

if ('serviceWorker' in navigator) {
  const wb = new Workbox('/service-worker.js');

  wb.addEventListener('installed', event => {
    if (event.isUpdate) {
      console.log('Доступна новая версия приложения');
    }
  });

  wb.register();
}
  • Workbox предоставляет объект для управления жизненным циклом сервис-воркера.
  • Событие installed уведомляет о завершении установки.
  • isUpdate позволяет определить, является ли это обновлением существующего сервис-воркера.

Рекомендации по структуре приложения

  1. Отдельный файл сервис-воркера: /service-worker.js или /sw.js.
  2. Кэширование статических ресурсов с помощью Workbox:
import { precacheAndRoute } from 'workbox-precaching';

precacheAndRoute(self.__WB_MANIFEST);
  • __WB_MANIFEST формируется инструментами сборки (например, Workbox Webpack Plugin).
  • Это позволяет автоматически кэшировать все указанные ресурсы при установке сервис-воркера.
  1. Разделение логики регистрации и логики кэширования: регистрация выполняется на клиентской стороне, кэширование и маршрутизация — в сервис-воркере.

Обработка ошибок при регистрации

Важно обрабатывать исключения при регистрации сервис-воркера для обеспечения стабильности приложения:

navigator.serviceWorker.register('/service-worker.js')
  .then(registration => {
    console.log('Регистрация успешна:', registration);
  })
  .catch(error => {
    console.error('Регистрация не удалась:', error);
  });
  • Наиболее частые причины ошибок: неправильный путь к файлу сервис-воркера или отсутствие HTTPS (сервис-воркеры требуют защищённого контекста).
  • Логирование ошибок помогает отслеживать проблемы на стадии разработки и тестирования.

Асинхронное взаимодействие с сервис-воркером

Workbox позволяет отправлять сообщения в сервис-воркер и получать ответы через postMessage:

navigator.serviceWorker.controller.postMessage({ type: 'CACHE_CLEANUP' });
  • Обработчик в сервис-воркере:
self.addEventListener('message', event => {
  if (event.data.type === 'CACHE_CLEANUP') {
    // Логика очистки кэша
  }
});
  • Это удобно для динамического управления кэшем или переключения режимов работы приложения без перезагрузки страницы.

Вывод

Правильная регистрация сервис-воркера с использованием Workbox обеспечивает надёжное кэширование, управление обновлениями и устойчивость приложения к сетевым сбоям. Разделение областей ответственности между клиентской частью и сервис-воркером, а также обработка событий жизненного цикла позволяют создавать масштабируемые и быстрые PWA-приложения.

Оглавление