Регистрация Service Worker

Урок показывает, как зарегистрировать Service Worker из кода страницы и что такое scope.

Регистрация — это процесс, при котором страница сообщает браузеру: «вот файл Service Worker, установи его и используй для этих запросов».

Базовая регистрация

Регистрация делается из обычного скрипта страницы (не из самого Service Worker). Сначала проверяем поддержку, потом вызываем register:

if ('serviceWorker' in navigator) {
  window.addEventListener('load', function () {
    navigator.serviceWorker.register('/sw.js')
      .then(function (reg) {
        console.log('SW зарегистрирован, scope:', reg.scope);
      })
      .catch(function (err) {
        console.error('Ошибка регистрации SW:', err);
      });
  });
}

Мы используем language-text, потому что этот код использует браузерный API navigator.serviceWorker и требует HTTPS — в песочнице он не исполнится. Регистрацию часто откладывают до события load, чтобы не конкурировать с загрузкой основного контента страницы.

Что такое scope

Scope (область действия) определяет, какие URL Service Worker контролирует. По умолчанию scope равен папке, где лежит файл Service Worker. Поэтому файл обычно кладут в корень сайта.

Если файл лежит в /js/sw.js, он по умолчанию не сможет контролировать запросы к /index.html — это частая причина «почему мой Service Worker не перехватывает запросы». Поэтому правило простое: кладите sw.js в корень.

Как работает под капотом первая регистрация

При первом вызове register браузер скачивает файл Service Worker, запускает событие install, затем activate. Но есть нюанс: при самой первой загрузке страницы Service Worker устанавливается, но ещё не контролирует уже открытую вкладку. Контроль он получит только при следующей загрузке (или если явно вызвать clients.claim() — об этом в уроке про жизненный цикл). Поэтому при первой проверке офлайна нужно перезагрузить страницу.

1-я загрузка: register --> install --> activate (но вкладка ещё не под контролем)
2-я загрузка: SW уже контролирует страницу --> перехватывает fetch

Проверка регистрации

В DevTools → Application → Service Workers видно: какой файл зарегистрирован, его статус (installing / activated), и кнопки для отладки — Update, Unregister, и галочка «Update on reload» (полезна при разработке, чтобы не ловить старый Service Worker).

Частые ошибки

• Файл SW не в корне. Узкий scope, и Service Worker не контролирует нужные страницы.
• Регистрация без проверки поддержки. В старом браузере navigator.serviceWorker отсутствует — будет ошибка.
• Тестировать по HTTP. Регистрация провалится с ошибкой безопасности.
• Ждать офлайн сразу. На первой загрузке Service Worker ещё не управляет вкладкой — нужна перезагрузка.

Итоги

• Регистрация: navigator.serviceWorker.register('/sw.js') с проверкой поддержки.
• Scope определяет контролируемые URL и по умолчанию равен папке файла — кладите sw.js в корень.
• На первой загрузке Service Worker устанавливается, но контролирует вкладку только со следующей.
• Отлаживайте в DevTools → Application → Service Workers.