Web pushed библиотека

Инструкция по использованию

Посмотрите SDK в нашем Github

1. Создать вебсайт в личном кабинете https://admin.multipushed.ru/websites

При создании обязательно указать домен сайта (без https://), на который будут отправляться пуши.

2. Установите WebSDK из npm с помощью следующей команды:

npm install @pushedlab/pushed-web-sdk --save

3. Создать Service Worker

importScripts('https://multipushed.ru/sw.js');

Этот файл должен быть доступен по адресу https://example.com/sw.js, где example.com имя хоста вашего веб-сайта.

4. Регистрация пользователей

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

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

// Добавьте импорт, если устанавливаете через npm
import Pushed from 'pushed-web-sdk';

// Регистрация браузера пользователя
Pushed.registerWebPushes().then(function (deviceToken) {
 // Отправьте токен на ваш бэкэнд сервер
//fetch('https://your.api.hostname/register/device?token=' + deviceToken);
}).catch(function (err) {
 // Уведомите пользователя об ошибке
console.log('Registration failed: ' + err.message);
});

Убедитесь, что вызываете Pushed.registerWebPushes() внутри onClick() ссылки или кнопки на вашей странице, так как некоторые браузеры блокируют регистрацию без события, инициированного пользователем.

Регистрация не будет выполнена, если пользователь отклонит диалоговое окно с разрешением Web Push.

5. Валидация подписки

Для валидации и актуализации действующей подписки необходимо вызвать функцию:

Pushed.validateSubscription().catch(function (err) {
                // Выдаёт исключение, если регистрация еще не была выполнена
                console.log('Validation failed: ' + err.message);
            });

Функция должна быть вызвана в onLoad событии

Перехват веб пушей

При помощи метода setNotificationListener вы можете перехватывать веб пуши и дополнять их необходимым поведением. Перехват веб пушей происходит после их отображения сервис воркером.

(Опционально) Добавьте следующий код после регистрации веб пушей для обработки уведомлений:

// Обработка push-уведомлений (только при открытой веб-странице)
Pushed.setNotificationListener(function (data) {
// Вывести данные payload 
console.log('Received notification: ' + JSON.stringify(data));

// Попытка извлечь "body" из payload: {"body":"Добрый день"}
const body = data.body || 'Test notification';

 // Отобразить оповещение с сообщением, отправленным с сервера
alert('Received notification: ' + body );
});

Вызов функции setNotificationListener должен идти сразу после вызова registerWebPushes.

Анализ данных уведомлений

Любые данные payload, которые вы отправляете с вашим пуш уведомлением, становятся доступны на вашей веб странице при помощи параметра обратного вызова setNotificationListener.

Если бы вы отправили push-уведомление со следующими данными:

{"id": 1, "body": "Добрый день"}

Сможете получить обратно эти значения выполнением команды:

let id = data.id;
let body = data.body;

Проблемы с подпиской в браузере Safari

В браузерах по типу Safari иногда возникают проблемы с пересозданием подписки на веб пуши (при очистки истории браузера). Запрос на отображение веб пушей отрабатывает корректно, но не дожидается действий пользователей, что приводит к тому, что не получается сгенерировать новую подписку после нажатия согласия на веб пуши. Для решения проблемы нужно добавить:

1. Явно разделить запросы на отображение пушей и подписку:

//запрос нотификации должен быть от действий пользователя, например onClick
var isGranted = await Pushed.requestNotificationPermission();
    if (isGranted){
      var clientToken = await Pushed.validateSubscription();
}

2. Метод validateSubscription

//validateSubscription 
Pushed.validateSubscription().then(function (clientToken) {
    
  }).catch(function (err) {
    
  });

Метод validateSubscription можно использовать, когда пользователь уже согласился на отображение пушей, т.е. Notification.permission === "granted", иначе возникнет ошибка:

throw new Error('Request permissions was denied or not requested');

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

localStorage.removeItem('clientToken')

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

Возможные исключения:

Сообщение	Причина
Web push is not supported	Браузер не поддерживает веб пуши
For Web Push on iOS 16.4+, you will first need to click the "Share" button -> "Add to Home Screen" before you can sign up for push notifications	Если это iOS и клиент не сделал PWA
Local storage is not supported	Не поддерживается localStorage
Request permissions was denied or not requested	Пользователь отказался от веб пушей
Request permissions was denied or not requested	Если попытаться вызвать validateSubscription без разрешения отображения пушей от пользователя или отказа от пушей