Представьте: ваш клиент заходит на сайт, а интернет в этот момент «лёг». Вместо ошибки он видит полноценную страницу. Или возвращается на сайт во второй раз, и он загружается мгновенно — потому что все файлы уже сохранены в браузере. Это не магия, это Service Worker.
В веб-студии WebForge24 мы настраиваем Service Worker для многих проектов. Это даёт сайту режим офлайн, ускорение загрузки и возможность отправлять push-уведомления. В этой статье мы покажем, как подключить Service Worker к WordPress-сайту в 4 шага.
Что такое Service Worker и зачем он нужен
Service Worker — это JavaScript-скрипт, который работает в фоновом режиме браузера. Он может перехватывать сетевые запросы, кэшировать файлы и отдавать их пользователю даже при отсутствии интернета.
Какие задачи решает Service Worker:
- Офлайн-доступ — пользователь видит сайт, даже когда интернет пропал.
- Мгновенная загрузка — файлы берутся из кэша браузера, а не с сервера.
- Push-уведомления — можно отправлять сообщения, даже когда сайт закрыт.
- Экономия трафика — браузер не загружает одни и те же файлы повторно.
«Service Worker может перехватывать все запросы браузера и подменять ответы. Это мощный инструмент, который делает сайт независимым от интернета».
Важно: Service Worker работает только через HTTPS (или на localhost для разработки). Если у вашего сайта нет SSL-сертификата — установите его перед настройкой.
Шаг 1: Создайте файл service-worker.js
Для создания Service Worker вам нужно определить, какие файлы кэшировать, и добавить логику работы с кэшем. Самый простой и быстрый способ — воспользоваться нашим бесплатным генератором.
Сгенерировать Service Worker
Просто заполните форму — получите готовый файл и инструкцию
В генераторе вам нужно указать:
- Версию кэша — например,
v1.0.0. При обновлении меняйте версию, чтобы браузер перекачал новые файлы. - Название кэша — можно оставить автоматическое.
- Файлы для кэширования — перечислите все важные файлы: CSS, JavaScript, изображения, шрифты. Каждый файл с новой строки.
/— это корень сайта. - Офлайн-страницу — страница, которую увидят пользователи при отсутствии интернета (например,
offline.html).
Если вы предпочитаете ручную настройку, можно использовать библиотеку Workbox от Google. Она упрощает работу с Service Worker и предлагает готовые стратегии кэширования.
Шаг 2: Подключите Service Worker к сайту
После того как файл service-worker.js создан, его нужно зарегистрировать на сайте. Для этого добавьте следующий код в <head> или перед закрывающим тегом </body>:
<script>
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('/service-worker.js');
}
</script>Этот код проверяет, поддерживает ли браузер Service Worker, и регистрирует скрипт. Файл должен лежать в корневой папке сайта — например, https://вашсайт.ru/service-worker.js.
Для WordPress: вы можете добавить этот код в файл header.php вашей темы или с помощью плагина для вставки скриптов (например, «Header and Footer Scripts»).
Шаг 3: Создайте страницу для офлайн-режима
Если вы включили офлайн-страницу в настройках генератора, создайте файл offline.html в корне сайта. Это страница, которую увидят пользователи без интернета.
Минимальный пример офлайн-страницы:
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Нет интернета</title>
<style>
body { text-align: center; padding: 40px; font-family: Arial, sans-serif; }
h1 { font-size: 2rem; }
.emoji { font-size: 4rem; }
</style>
</head>
<body>
<div class="emoji">📡</div>
<h1>Похоже, у вас нет интернета</h1>
<p>Попробуйте перезагрузить страницу, когда соединение восстановится.</p>
</body>
</html>Шаг 4: Проверьте работу Service Worker
После установки важно убедиться, что Service Worker зарегистрирован и работает правильно.
Как проверить в Chrome:
- Откройте ваш сайт в Chrome.
- Нажмите F12 → вкладка Application.
- В левом меню выберите Service Workers.
- Проверьте, что ваш Service Worker отображается и имеет статус «Activated and running».
Как проверить офлайн-режим:
- На вкладке Application → Service Workers поставьте галочку Offline.
- Обновите страницу — вы должны увидеть кэшированную версию или офлайн-страницу.
Если что-то пошло не так, проверьте консоль (F12 → вкладка Console) — там будут ошибки регистрации.
Какие файлы кэшировать: рекомендации
Кэшируйте все файлы, которые необходимы для базовой работы сайта:
- Главная страница —
/ - CSS и JavaScript — все файлы стилей и скриптов
- Шрифты —
.woff,.woff2 - Иконки и изображения — логотип, иконки соцсетей
Не кэшируйте:
- Динамические файлы — API-запросы, личные кабинеты, корзины интернет-магазинов.
- Страницы административной панели —
/wp-admin/.
Как обновлять Service Worker
Когда вы меняете файлы сайта (CSS, JS, изображения), нужно обновить версию кэша. Самый простой способ — изменить версию кэша в настройках генератора (например, с v1.0.0 на v1.0.1).
Браузер автоматически обнаружит, что файл изменился, и загрузит новую версию. Также можно изменить сам файл service-worker.js — браузер сравнивает его по байтам и обновляет при изменении.
Как отключить Service Worker
Если вам нужно отключить Service Worker, сделайте следующее:
- В Chrome: F12 → вкладка Application → Service Workers → нажмите Unregister напротив вашего сайта.
- Также можно использовать кнопку Clear storage в той же вкладке, чтобы очистить все данные.
- Для полного отключения удалите скрипт регистрации из HTML.
Плагины для WordPress: упрощённый путь
Если вы не хотите разбираться в настройке вручную, можно использовать плагины:
- PWA for WP — автоматически устанавливает Service Worker и кэширует внешние объекты.
- Super Progressive Web Apps — превращает сайт в PWA с офлайн-режимом и установкой на экран.
- SiteEase PWA — настраивает кэширование через интерфейс без кода.
Но даже с плагинами вам понадобится файл service-worker.js — его можно создать через наш генератор и затем использовать в настройках плагина.
Что в итоге?
Service Worker — это мощный инструмент, который делает сайт быстрее, доступнее и удобнее для пользователей. Особенно это важно для мобильного трафика и интернет-магазинов, где каждая секунда загрузки влияет на покупку.
Если вы не хотите разбираться в технических деталях — мы поможем. В WebForge24 мы настраиваем Service Worker и полностью адаптируем сайт под стандарты PWA.
Закажите внедрение Service Worker — и ваш сайт будет работать даже без интернета.
