Как добавить поддержку push-уведомлений в WordPress для мобильных устройств

Push-уведомления — мощный инструмент для удержания посетителей и повышения вовлечённости на вашем WordPress-сайте, особенно на мобильных устройствах. В этой статье разберём, как реализовать поддержку push-уведомлений в WordPress с помощью популярных плагинов, а также покажем пример самостоятельной реализации с использованием сервисов Firebase Cloud Messaging (FCM).

Основы push-уведомлений и их преимущества на мобильных устройствах

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

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

Популярные плагины для push-уведомлений в WordPress

OneSignal — бесплатный и мощный сервис

OneSignal — один из самых популярных сервисов для push-уведомлений, поддерживает мобильные и десктопные браузеры. Для интеграции с WordPress есть официальный плагин.

• Установка плагина OneSignal Push Notifications из репозитория WordPress.
• Регистрация на сайте OneSignal, создание приложения и получение API ключей.
• Настройка плагина в админке WordPress: ввод ключей, выбор триггеров для уведомлений.

Плагин поддерживает автоматическую отправку уведомлений при публикации новых постов, сегментацию пользователей и кастомные уведомления через REST API.

PushEngage — удобный сервис с расширенными возможностями

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

• Установка плагина PushEngage Web Push Notifications.
• Регистрация на PushEngage и получение API ключей.
• Настройка шаблонов уведомлений и триггеров.

Плагин позволяет детально настраивать опыт получения уведомлений и анализировать эффективность кампаний.

Пример самостоятельной реализации push-уведомлений с Firebase Cloud Messaging

Если вы хотите полный контроль и не зависеть от сторонних плагинов, можно реализовать push-уведомления через FCM напрямую. Для этого понадобится:

• Создать проект в Firebase Console.
• Настроить Web Push сертификаты (VAPID ключи).
• Добавить JavaScript для регистрации сервис-воркера и подписки пользователя.
• Реализовать серверную часть на PHP для отправки сообщений через FCM HTTP API.

Регистрация сервис-воркера и подписка пользователя

if ('serviceWorker' in navigator) {
  navigator.serviceWorker.register('/firebase-messaging-sw.js')
    .then(function(registration) {
      console.log('Service Worker зарегистрирован:', registration);
      // Запрашиваем разрешение на уведомления
      return Notification.requestPermission();
    })
    .then(function(permission) {
      if (permission === 'granted') {
        // Получаем токен подписки для FCM
        return messaging.getToken({ vapidKey: 'ВАШ_VAPID_КЛЮЧ' });
      } else {
        console.log('Разрешение на уведомления не получено');
      }
    })
    .then(function(token) {
      console.log('FCM токен:', token);
      // Отправьте токен на сервер для сохранения
    })
    .catch(function(err) {
      console.error('Ошибка при регистрации Service Worker или подписке:', err);
    });
}

Пример PHP-функции для отправки push-уведомлений через FCM

function wpmobile_send_push_notification($fcmToken, $title, $body) {
    $url = 'https://fcm.googleapis.com/fcm/send';
    $serverKey = 'ВАШ_SERVER_KEY_ИЗ_FIREBASE';

    $notification = [
        'title' => $title,
        'body'  => $body,
        'sound' => 'default'
    ];

    $fields = [
        'to' => $fcmToken,
        'notification' => $notification
    ];

    $headers = [
        'Authorization: key=' . $serverKey,
        'Content-Type: application/json'
    ];

    $ch = curl_init();
    curl_setopt($ch, CURLOPT_URL, $url);
    curl_setopt($ch, CURLOPT_POST, true);
    curl_setopt($ch, CURLOPT_HTTPHEADER, $headers);
    curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
    curl_setopt($ch, CURLOPT_POSTFIELDS, json_encode($fields));
    $result = curl_exec($ch);
    if ($result === FALSE) {
        error_log('Ошибка отправки push-уведомления: ' . curl_error($ch));
    }
    curl_close($ch);

    return $result;
}

Эту функцию можно вызывать, когда нужно оповестить пользователя, например, при публикации нового поста. Для упрощения можно интегрировать вызов в хук publish_post вашему сайту WordPress.

Советы по улучшению UX push-уведомлений на мобильных устройствах

Чтобы push-уведомления приносили пользу, а не раздражали пользователей, придерживайтесь нескольких правил:

• Запрашивайте разрешение на отправку уведомлений в подходящий момент, не сразу при заходе на сайт.
• Используйте сегментацию, чтобы отправлять релевантный контент.
• Не злоупотребляйте количеством уведомлений — достаточно 1-3 в неделю.
• Предоставляйте пользователям возможность легко отписаться.
• Тестируйте отображение уведомлений на разных мобильных устройствах и браузерах.

Заключение

Добавление поддержки push-уведомлений в WordPress для мобильных устройств — отличный способ повысить вовлечённость и вернуть посетителей на сайт. Выбор между использованием готовых плагинов (например, OneSignal или PushEngage) и самостоятельной реализацией через Firebase зависит от ваших потребностей и уровня технических навыков.

Для быстрого запуска рекомендуем попробовать плагин OneSignal Push Notifications на WPSHOP.ru. Для более глубокой настройки и полного контроля используйте Firebase и собственный код.