Регистрация service worker из HTML

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

Зарегистрируйте сервис-воркер из скрипта страницы: navigator.serviceWorker.register("/sw.js"). Браузер загружает /sw.js, разбирает его, выполняет событие установки и начинает перехватывать запросы в области действия регистрации.

Старые браузеры не поддерживают сервис-воркеры. Всегда проверяйте поддержку функции с помощью "serviceWorker" in navigator перед вызовом register, иначе в браузерах без этого API вызов вызовет ошибку. Добавление полифилла невозможно: сервис-воркеры нельзя реализовать с помощью полифилла, поскольку им требуется интеграция на уровне браузера.

Область действия — это префикс пути, которым управляет сервис-воркер. По умолчанию область действия совпадает с каталогом файла сервис-воркера: /sw.js управляет всеми URL внутри /. Чтобы зарегистрировать сервис-воркер с более глубокой областью действия из другого расположения файла, задайте параметр области действия и передавайте заголовок, разрешающий такую область действия сервис-воркера.

Разместите sw.js в корне приложения (/sw.js), чтобы его область действия по умолчанию охватывала весь сайт. Более глубокие пути (/app/sw.js) ограничивают область действия каталогом /app/ и вложенными каталогами, что редко требуется.

Зарегистрируйте сервис-воркер после загрузки страницы, чтобы он не конкурировал за пропускную способность во время важного этапа отрисовки: window.addEventListener("load", () => navigator.serviceWorker.register("/sw.js")). Возможности PWA начнут работать при последующих посещениях, не задерживая первое посещение.

Браузер автоматически проверяет наличие обновлённого sw.js (обычно каждые 24 часа и при большинстве загрузок страниц). Если содержимое файла изменилось, новый сервис-воркер загружается, устанавливается и ждёт в состоянии ожидания, пока не закроются все существующие вкладки, — затем активируется.

registration.update() вручную запускает проверку обновлений. self.skipWaiting() внутри нового sw.js немедленно активирует его, не дожидаясь закрытия вкладок. Объедините эти вызовы, чтобы всегда запускать последнюю версию сервис-воркера, но учитывайте повторную загрузку данных во время сеанса.

registration.unregister() удаляет сервис-воркер. Это полезно во время разработки, если неисправный сервис-воркер нарушает работу сайта. В Chrome DevTools на вкладке «Приложение» → «Сервис-воркеры» есть кнопка «Отменить регистрацию» для той же цели при отладке.

Регистрация сервис-воркера через HTTP без HTTPS завершается без видимой ошибки — сервис-воркерам требуется защищённый источник (HTTPS или localhost для разработки). Если регистрация не выполняется, проверьте консоль на наличие сообщения «Произошла ошибка сертификата SSL».

Сервис-воркер не имеет доступа к DOM. Для передачи сообщений используйте navigator.serviceWorker.controller.postMessage() на странице и self.addEventListener("message", handler) в сервис-воркере (и наоборот). Это полезно для инвалидации кэша, проверки версии и пользовательских событий.

При первом посещении сервис-воркер устанавливается и начинает управлять страницами только после перезагрузки страницы. Чтобы сразу управлять первой навигацией, вызовите self.clients.claim() в событии активации — это полезно для приложений, рассчитанных прежде всего на работу без сети.

Почему сервис-воркеры должны передаваться по HTTPS или через localhost?

Регистрируйте сервис-воркеры из JS страницы с помощью navigator.serviceWorker.register("/sw.js") после проверки поддержки функции. Размещайте sw.js в корне приложения, чтобы получить полную область действия. Выполняйте регистрацию после загрузки, чтобы не конкурировать с важной отрисовкой. Обновления проверяются автоматически через определённые интервалы; принудительно запустить их можно с помощью registration.update или skipWaiting. Требуется HTTPS, чтобы предотвратить внедрение вредоносного сервис-воркера.