Генератор Service Worker

Создайте Service Worker для вашего сайта — чтобы он работал офлайн и загружался мгновенно. Заполните форму и получите готовый JavaScript-файл с инструкцией по установке.

Настройте Service Worker

При обновлении меняйте версию — браузер перекачает новые файлы
Оставьте пустым для автоматического названия
Каждый файл с новой строки. / — корень сайта
Страница, которая показывается при отсутствии интернета

Готовый service-worker.js

Заполните форму слева и нажмите «Сгенерировать Service Worker»

📖 Инструкция

Как установить Service Worker

Пошаговая инструкция по подключению Service Worker к вашему сайту

1
Скачайте файл

Нажмите кнопку «Скачать» и сохраните файл как service-worker.js в корневую папку вашего сайта.

2
Подключите в HTML

Добавьте в <head> или перед </body> код регистрации:

<script>
  if ('serviceWorker' in navigator) {
    navigator.serviceWorker.register('/service-worker.js');
  }
</script>
3
Создайте страницу офлайн

Если вы включили офлайн-страницу, создайте файл offline.html в корне сайта. Это страница, которую увидят пользователи без интернета.

4
Проверьте

Откройте сайт в Chrome, нажмите F12 → вкладка Application → Service Workers. Проверьте, что он зарегистрирован и активен.

⚡ Что делает Service Worker?

📦
Кэширует файлы

Все указанные файлы сохраняются в браузере пользователя

📡
Работает офлайн

Пользователь может загрузить страницу даже без интернета

🚀
Ускоряет загрузку

Файлы берутся из кэша, а не с сервера — быстрее

🔔
Пуш-уведомления

Может отправлять push-уведомления (с дополнительной настройкой)

Важно: Service Worker работает только через HTTPS (или на localhost). Убедитесь, что ваш сайт использует защищённое соединение.
Частые вопросы

Вопросы о Service Worker

Ответы на самые частые вопросы о Service Worker и офлайн-режиме

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

Самый простой способ — изменить версию кэша (например, с v1.0.0 на v1.0.1). Браузер автоматически обнаружит, что файл изменился, и загрузит новую версию. Также можно изменить сам файл service-worker.js — браузер сравнивает его по байтам и обновляет при изменении.

В Chrome: F12 → вкладка Application → Service Workers → нажмите Unregister напротив вашего сайта. Также можно использовать кнопку Clear storage в той же вкладке, чтобы очистить все данные. Для полного отключения удалите скрипт регистрации из HTML.

Кэшируйте все файлы, которые необходимы для базовой работы сайта: HTML (главная страница), CSS, JavaScript, иконки, шрифты. Не кэшируйте динамические файлы (API-запросы, личные кабинеты, корзины) — они должны всегда загружаться с сервера.

В Chrome: F12 → вкладка Application → Service Workers → установите галочку Offline. После этого обновите страницу — вы увидите, как работает ваш сайт без интернета. Также можно отключить Wi-Fi на компьютере или телефоне.