Перейти к основному содержимому

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

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

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

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

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

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

npm install pushed-web-sdk –save

3. Создать Service Worker​

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

Этот файл должен быть доступен по адресу https://example.com/service-worker.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.

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

При помощи метода 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;