Настройка Web Push уведомлений на сайта

Как настроить push уведомления на своем сайте от onesignal

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

Как добавить сайт в onesignal

Cначала нужно добавить сайт в систему, загрузить файлы на свой сайт и настроить его. Регистрируемся и входим в onesignal, потом нажимаем на ADD APP, вводим название приложения (или сайта) и Add app.

Добавляем сайт в onesignal
Добавляем сайт в onesignal

Потом выдаст окно с выбором куда интегрировать пуши (на android, iOs, web push и т.д.). Для сайта выбираем Web Push.

Настройка Web Push уведомлений на сайта
Настройка Web Push уведомлений на сайта

Далее будет настройка для сайта: вводим имя сайта (1), его адрес (2) и, по желанию, можно установить иконку для пушей по умолчанию (3).

Настройка сайта в onesignal
Настройка сайта в onesignal

Как настроить вид пуш подписки onesignal

После этого настраиваем вид для формы подписки на пуш. Нажимаем ADD A PROMPT. Я выбираю нативный («природный») вид для пушей, он только для сайтов на https.

Вид запроса на пуш-подписку. Настройка onesignal
Вид запроса на пуш-подписку. Настройка onesignal

На этом же экране можно посмотреть как это выглядит: выберите вид (1), справа пример (2) и нажмите Save (3). Можно это оформить как выпадающее окошко, как иконка или при нажатии на ссылку (так делают на ссылку для скачивания файла).

Можно поставить и нативный запрос на пуш-подписку, и ссылку.

Приветственный пуш

Дальше по умолчанию стоит приветственный пуш сразу после подписки (Welcome Notification (Optional)). Я его отключаю всегда, чтобы сразу не раздражать пользователя. Можно оставить и настроить его как угодно, зависит от Вашего сайта или желаний. И сразу видеть как это выглядит.

Далее я ничего не меняю и просто в конце жму Save.

Настройка кода для пуш подписок на своем сайте

Теперь нам нужно добавить коды на сайт. Для wordpress и других движков есть уже готовые плагины, я настраивал «обычно», через добавление кода.

Качаем все файлы, разархивируем в папку и загружаем в корень нашего сайта (1). Также нужно добавить код в тег head сайта (2).

Настройка пуш-уведомлений для сайта
Настройка пуш-уведомлений для сайта

В архиве будет 3 файла и папка, я загружал только эти три файла:

Файлы для загрузки. Настройка push-уведомлений на своем сайте. Onesignal
Файлы для загрузки. Настройка push-уведомлений на своем сайте. Onesignal

Кстати, я настраивал push-уведомления на сайт под управлением Modx, и там по умолчанию запрещено загружать файлы с расширением .json через админ-панель. Как это исправить читайте в статье Как разрешить типы файлов в modx.

Как выглядит форма пуш-подписки на сайте

Я выбирал нативное отображение и в браузере Chrome форма подписки на push выглядит вот так:

Как выглядит нативная форма подписки на пуш в браузере Chrome
Как выглядит нативная форма подписки на пуш в браузере Chrome

Как выглядит push-уведомление с сайта

А вот выглядит само пуш-сообщение:

Как выглядит push-уведомление в браузере Chrome
Как выглядит push-уведомление в браузере Chrome

Как создать push-сообщение и разослать его я напишу пост позже.

0 Comments

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *