Как превратить WordPress в PWA за 5 шагов: сервис‑воркер, манифест и push‑уведомления

Что такое PWA и зачем его WordPress?

Прогрессивное веб‑приложение (PWA) – это сайт, который работает как нативное приложение: быстрый отклик, возможность работать офлайн и получать push‑уведомления. Для владельцев WordPress это шанс повысить вовлечённость, сократить показатель отказов и улучшить SEO, поскольку Google учитывает показатель Core Web Vitals. Если ваш сайт уже оптимизирован по скорости (7 проверенных методов ускорения), добавление PWA станет логичным следующим шагом.

Шаг 1. Выбор подходящего плагина

Самый быстрый путь – установить готовый плагин. Он генерирует манифест, регистрирует service worker и даже поддерживает push‑уведомления.

• Super PWA – бесплатный, прост в настройке, поддерживает кэширование страниц и офлайн‑режим.
• WP Rocket + PWA Add‑on – если уже используете WP Rocket, можно добавить модуль PWA для более гибкой стратегии кэширования.
• PWA for WP & AMP – хорош для мультиязычных сайтов и интеграции с AMP.

После установки активируйте плагин и перейдите к базовой конфигурации: укажите название приложения, цвет темы и иконку. Но готовый плагин не всегда покрывает все требования, поэтому дальше разберём кастомную реализацию.

Шаг 2. Добавление манифеста

Манифест – JSON‑файл, описывающий ваше приложение (имя, иконки, стартовый URL, цветовой набор). Его нужно разместить в корне темы и подключить в head.

Создание файла manifest.json

{
  "name": "My WordPress Blog",
  "short_name": "WPBlog",
  "start_url": "/",
  "display": "standalone",
  "background_color": "#ffffff",
  "theme_color": "#1e73be",
  "icons": [
    {"src": "/wp-content/uploads/2024/01/icon-192.png", "sizes": "192x192", "type": "image/png"},
    {"src": "/wp-content/uploads/2024/01/icon-512.png", "sizes": "512x512", "type": "image/png"}
  ]
}

Регистрация манифеста в теме

function theme_add_pwa_manifest() {
    echo '<link rel="manifest" href="' . get_stylesheet_directory_uri() . '/manifest.json">';
    echo "<meta name='theme-color' content='#1e73be'>";
}
add_action( 'wp_head', 'theme_add_pwa_manifest' );

Не забудьте добавить ссылки на иконки разных размеров, иначе приложение не будет устанавливаться на мобильных устройствах.

Шаг 3. Настройка Service Worker

Service Worker – это JavaScript‑файл, который работает в фоновом режиме, перехватывает сетевые запросы и управляет кэшем.

Создание service-worker.js

self.addEventListener('install', function(event) {
  event.waitUntil(
    caches.open('wp-pwa-v1').then(function(cache) {
      return cache.addAll([
        '/',
        '/wp-content/themes/your-theme/style.css',
        '/wp-content/uploads/2024/01/icon-192.png',
        '/wp-content/uploads/2024/01/icon-512.png'
      ]);
    })
  );
});

self.addEventListener('fetch', function(event) {
  event.respondWith(
    caches.match(event.request).then(function(response) {
      return response || fetch(event.request);
    })
  );
});

Регистрация Service Worker в браузере

if ('serviceWorker' in navigator) {
  window.addEventListener('load', function() {
    navigator.serviceWorker.register('/service-worker.js')
      .then(function(reg) { console.log('SW registered: ', reg.scope); })
      .catch(function(err) { console.error('SW registration failed: ', err); });
  });
}

Для ускорения загрузки разместите service-worker.js в корне сайта, а не в папке темы – так он будет доступен на всех страницах, включая админку.

Шаг 4. Push‑уведомления

Push‑уведомления повышают возврат посетителей. Реализуем их через Uptime‑мониторинг‑сервис, который уже умеет отправлять web‑push.

Клиентская часть (subscription)

function subscribeUser() {
  navigator.serviceWorker.ready.then(function(reg) {
    reg.pushManager.subscribe({
      userVisibleOnly: true,
      applicationServerKey: urlBase64ToUint8Array('YOUR_PUBLIC_VAPID_KEY')
    }).then(function(sub) {
      return fetch('/wp-json/pwa/v1/subscribe', {
        method: 'POST',
        body: JSON.stringify(sub),
        headers: { 'Content-Type': 'application/json' }
      });
    });
  });
}

Серверная часть на PHP (REST‑endpoint)

add_action('rest_api_init', function() {
    register_rest_route('pwa/v1', '/subscribe', array(
        'methods'  => 'POST',
        'callback' => 'pwa_save_subscription',
        'permission_callback' => '__return_true',
    ));
});

function pwa_save_subscription( WP_REST_Request $request ) {
    $subscription = $request->get_body();
    // Сохраняем в таблицу wp_pwa_subscriptions (создайте её заранее)
    global $wpdb;
    $table = $wpdb->prefix . 'pwa_subscriptions';
    $wpdb->insert($table, array('subscription' => $subscription), array('%s'));
    return new WP_REST_Response('OK', 200);
}

Для отправки сообщений используйте любой сервис с поддержкой VAPID (например, Web Push Libraries) или собственный скрипт на PHP + minishlink/web-push.

Шаг 5. Тестирование и отладка

После внедрения проверяем:

1. В Chrome DevTools → Application → Manifest – корректно ли отображаются иконки и название.
2. Service Worker – статус «Installed», отсутствие ошибок в консоли.
3. Оффлайн‑режим – отключите сеть и убедитесь, что главная страница загружается из кэша.
4. Push‑уведомления – отправьте тестовое сообщение через ваш backend.

Не забывайте про CSS / JS оптимизацию – уменьшенный bundle ускорит регистрацию Service Worker и снизит время First Contentful Paint.

Если ваш сайт работает на MariaDB, проверьте, что запросы к таблице wp_pwa_subscriptions не тормозят. Подробнее о настройке MariaDB читайте в статье MariaDB WordPress: преимущества и настройка.

Наконец, настройте мониторинг доступности (Uptime мониторинг WordPress) – PWA должно работать 24/7, а любые падения будут мгновенно известны.

Заключение

Превратить WordPress в PWA – процесс из пяти шагов: выбрать плагин или реализовать кастомно, добавить манифест, написать Service Worker, настроить push‑уведомления и протестировать результат. При правильной оптимизации (шрифты, дешёвый хостинг и firewall) ваше приложение будет работать быстро, надёжно и привлекать больше пользователей через push‑уведомления.