Как добавить оповещение о новых постах в WordPress через Web Push

В современном вебе push-уведомления становятся одним из самых эффективных способов удержания аудитории и повышения вовлечённости пользователей. Особенно в блогах и новостных сайтах на WordPress, где важно мгновенно информировать посетителей о выходе новых постов. В этой статье подробно рассмотрим, как добавить оповещение о новых публикациях в WordPress при помощи технологии Web Push, а также приведем примеры реализации и разберем полезные плагины.

Что такое Web Push уведомления и зачем они нужны в WordPress

Web Push — это сообщения, которые браузер показывает пользователю даже если он не находится на сайте. Это отличный канал коммуникации, позволяющий оперативно уведомить о новых статьях, акциях или важных событиях. В WordPress с помощью Web Push можно:

• Увеличить число возвратов на сайт.
• Повысить вовлеченность и активность аудитории.
• Повысить охват публикаций без затрат на email-маркетинг.

Технология работает через сервисы уведомлений браузера (Google Chrome, Firefox, Safari и др.) и требует согласия пользователя на получение сообщений.

Основные принципы работы Web Push в WordPress

Для реализации Web Push уведомлений необходимо:

• Получить согласие пользователя на получение уведомлений.
• Сформировать и отправить уведомление с сервера при появлении нового поста.
• Обеспечить корректную работу скриптов и сервис-воркеров в браузере.

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

Как реализовать Web Push уведомления на WordPress самостоятельно

1. Регистрация сервис-воркера

Для начала нужно создать файл service-worker.js в корне сайта, который будет обрабатывать push-сообщения:

self.addEventListener('push', function(event) {
  var data = {};
  if (event.data) {
    data = event.data.json();
  }
  var title = data.title || 'Новое уведомление';
  var options = {
    body: data.body || 'Появился новый контент на сайте',
    icon: data.icon || '/wp-content/uploads/icon-192x192.png',
    badge: data.badge || '/wp-content/uploads/badge-72x72.png',
    data: data.url || '/'
  };
  event.waitUntil(self.registration.showNotification(title, options));
});

self.addEventListener('notificationclick', function(event) {
  event.notification.close();
  event.waitUntil(clients.openWindow(event.notification.data));
});

Этот скрипт отвечает за показ и обработку клика по уведомлению.

2. Подключение сервис-воркера и подписка пользователя

В файле шаблона сайта (например, footer.php) подключаем JavaScript для регистрации сервис-воркера и запроса разрешения на уведомления:

if ('serviceWorker' in navigator) {
  navigator.serviceWorker.register('/service-worker.js')
    .then(function(registration) {
      console.log('Service Worker зарегистрирован');
      return registration.pushManager.getSubscription()
        .then(function(subscription) {
          if (subscription) {
            return subscription;
          }
          return registration.pushManager.subscribe({
            userVisibleOnly: true,
            applicationServerKey: urlBase64ToUint8Array('ВАШ_PUBLIC_VAPID_KEY')
          });
        });
    }).then(function(subscription) {
      // Отправить subscription на сервер для хранения
      fetch('/wp-json/wp-code/v1/save-subscription', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json'
        },
        body: JSON.stringify(subscription)
      });
    }).catch(function(error) {
      console.error('Ошибка при регистрации Service Worker или подписке:', error);
    });
}

function urlBase64ToUint8Array(base64String) {
  const padding = '='.repeat((4 - base64String.length % 4) % 4);
  const base64 = (base64String + padding).replace(/-/g, '+').replace(/_/g, '/');
  const rawData = window.atob(base64);
  const outputArray = new Uint8Array(rawData.length);
  for (let i = 0; i < rawData.length; ++i) {
    outputArray[i] = rawData.charCodeAt(i);
  }
  return outputArray;
}

Здесь ВАШ_PUBLIC_VAPID_KEY — публичный ключ для Web Push, который нужно сгенерировать заранее.

3. Создание REST API для сохранения подписок

В functions.php или собственном плагине можно добавить обработчик REST API, чтобы принимать и сохранять подписки:

add_action('rest_api_init', function() {
  register_rest_route('wp-code/v1', '/save-subscription', [
    'methods' => 'POST',
    'callback' => 'wp_code_save_subscription',
    'permission_callback' => '__return_true'
  ]);
});

function wp_code_save_subscription(WP_REST_Request $request) {
  $subscription = $request->get_json_params();
  if (!$subscription) {
    return new WP_Error('no_subscription', 'Нет данных подписки', ['status' => 400]);
  }
  // Сохраняем подписку в базе, например, в опциях или собственной таблице
  update_option('wp_code_push_subscription', $subscription);
  return ['success' => true];
}

4. Отправка уведомления при публикации нового поста

Используем хук publish_post для отправки уведомления всем подписчикам:

add_action('publish_post', 'wp_code_send_push_notification', 10, 2);
function wp_code_send_push_notification($ID, $post) {
  $subscription = get_option('wp_code_push_subscription');
  if (!$subscription) {
    return;
  }
  $payload = json_encode([
    'title' => 'Новая статья: ' . $post->post_title,
    'body' => wp_trim_words($post->post_content, 20),
    'url' => get_permalink($ID),
    'icon' => get_site_icon_url(192)
  ]);

  // Отправка push через библиотеку web-push-php
  if (!class_exists('Minishlink\WebPush\WebPush')) {
    require_once __DIR__ . '/vendor/autoload.php';
  }

  $auth = [
    'VAPID' => [
      'subject' => 'mailto:admin@yourdomain.com',
      'publicKey' => 'ВАШ_PUBLIC_VAPID_KEY',
      'privateKey' => 'ВАШ_PRIVATE_VAPID_KEY',
    ],
  ];

  $webPush = new Minishlink\WebPush\WebPush($auth);
  $webPush->sendNotification(
    $subscription,
    $payload
  );
  foreach ($webPush->flush() as $report) {
    // Логируем ошибки или успех отправки
  }
}

Для работы с Web Push на PHP удобно использовать библиотеку web-push-php.

Готовые плагины для Web Push уведомлений в WordPress

Если вы не хотите реализовывать всё вручную, есть несколько качественных плагинов с поддержкой Web Push:

• OneSignal — один из самых популярных сервисов и плагинов для Web Push. Позволяет быстро подключить уведомления, с удобной панелью управления. Подробнее на WPSHOP.
• PushEngage — платный сервис с плагином, который также предлагает гибкие настройки уведомлений и сегментацию.
• WebPush Notifications — простой плагин с базовыми функциями, подходит для небольших сайтов.

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

Рекомендации по улучшению UX при использовании Web Push в WordPress

1. Правильное время запроса разрешения

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

2. Персонализация уведомлений

Чем релевантнее уведомление, тем выше вероятность клика. Можно использовать категории, теги или индивидуальные настройки подписки, чтобы отправлять пользователю именно интересный ему контент.

3. Отслеживание эффективности

Используйте UTM-метки в ссылках уведомлений, чтобы видеть в аналитике, сколько пользователей возвращается по push-уведомлениям. Например, ?utm_source=wp-code.ru&utm_medium=article&utm_campaign=kak-dobavit-opoveshhenie-o-novykh-postakh-v-wordpress-cherez-web-push.

Итог

Добавление Web Push уведомлений в WordPress — мощный инструмент для увеличения вовлеченности и возврата посетителей. Можно реализовать это как самостоятельно, используя API браузеров и PHP-библиотеки, так и с помощью готовых плагинов. Главное — грамотно реализовать подписку и отправку уведомлений, а также заботиться о комфорте пользователя.

Для более простого старта рекомендую ознакомиться с плагином OneSignal на WPSHOP, который автоматизирует большую часть процесса.