Push уведомления OneSignal на сайте за 5 минут

Сегодня я расскажу, как быстро и бесплатно подключить push уведомления на сайте с HTTPS-соединением. Ниже пошаговое руководство, которое займет у вас до 5 минут.

Что такое Push уведомления?

Для тех, кто не знает, вкратце расскажу.

Push  (с англ. “колокольчик”) – это веб-технология передачи данных в интернете, которая работает с помощью сервера отправителя и постоянно работающей службы в операционной системе клиента. Технология была изобретена еще в далеком 1990 году, благодаря приложению PointCast, которое использовало Push-оповещения и отображало новости на Рабочем Столе пользователя через интернет-соединение.

Установить push-уведомления на своем вебсайте можно с помощью бесплатного онлайн-сервиса OneSignal, выбрав один из вариантов: с помощью скрипта или плагина для CMS. Ниже рассмотрим оба варианта отдельно.

Подключение Push c помощью скрипта OneSignal

1. Регистрация на One Signal

Со всего набора онлайн-сервисов для подключения Push я выбрал самый популярный – One Signal, у которого почти полумиллиона пользователей.

Для начала переходим на официальный сайт https://onesignal.com и кликаем в верхнем правом углу на Sign Up:

Регистрируемся и входим в свой аккаунт.

2. Создание нового приложения

  • Нажимаем “Add App”:

  • Вводим название сайта и выбираем платформу -> “Web Push” со значком Google Chrome, жмем Next:

3. Подключение и настройка

На следующем этапе нужно выбрать тип сайта: “Типичный сайт”, “Сайт на WordPress с плагином” или “Подключение с помощью веб-кода”.

Если у вас не WordPress и вы хотите подключить push без плагинов – выбирайте “Typical site”:

Переходим вниз к вкладке “Site Setup”. Здесь заполняем поля: “Название сайта”, “URL сайта” и “Логотип”, больше ничего не трогаем:

Скролим вниз и переходим на вкладку “Permissions Prompt Setup”, нажимаем на кнопку “Add A Prompt”:

Здесь собственно и начинается настройка Push уведомлений. Есть возможность выбрать тип уведомления:

  1. Колокольчик в нижнем правом угле
  2. HTTPS-уведомление по умолчанию – Native Prompt (это нас и интересует)
  3. Slide Prompt (отдельное окно с уведомлением).

Если выберите последний вариант – то все ровно будет показываться на некоторых браузерах дополнительно еще и родное HTTPS-уведомление. В итоге будет показано 2 PUSH сообщения, что может показаться очень навязчивым. Все это конечно можно настроить, также можете выбрать другие варианты, но для тех, кто хочет подключить PUSH быстро и просто – выберите второй вариант (стоит на большинстве сайтов) и дальше кликаем Save:

Переходим к вкладке “Welcome Notification” – приветствие с успешной подпиской. Тут все просто, заполняете поля, которые будут выводится пользователю после того, как он активирует push-уведомления на вашем сайте:

В окне справа вы сможете также визуально посмотреть как это будет выглядеть на MACOS, WINDOWS и ANDROID.

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

После этого появятся подсказки от One Signal, что нужно выполнить, чтобы активировать PUSH-уведомления:

  1. Скачать SDK-файлы и поместить в корневую директорию сайта – /
  2. Скопипастить веб-код и поместить его перед закрывающим тегом </HEAD> в веб-коде своего сайта

Все. После этих действий PUSH мгновенно заработает на вашем сайте.

Но можно также дополнительно активировать PUSH для браузера Apple Safari, то есть обладателей Mac – переходим на вкладку SETTINGS и выбираем “Apple Safari”:

В открывшемся окне ввести стандартно название и URL вашего сайта, но не включать галочку “I’d like to upload my own .p12 certificate”!  Вместо этого нажмите “I’d like to upload my own notification icons” и загрузите лого сайта.

Вот и все. Дальше вы сможете управлять своими PUSH-подписками, мониторить юзеров, следить за их активностью в One Signal.

Подключение Push-уведомлений с помощью плагина OneSignal для WordPress

Если у Вас WordPress, подключить PUSH еще проще. Алгоритм следующий:

  1. Переходим в репозиторий WordPress и устанавливаем плагин “OneSignal – Web Push Notifications”:
  2. Создаем учетную запись в веб-сервисе OneSignal и добавляем новое приложение (Add App) с интеграцией WordPress-плагина:
  3. Вводим название проекта, URL-адрес сайта и загружаем логотип. Жмем “Save”:
  4. Копируем APP ID и API KEY:
  5. Переходим в панель управления WordPress, открываем настройки плагина OneSignal, пункт “Configuration” и вводим ключи.
    В поле Safari Web ID вбиваем ключ, который появился на этапе подключения APP SAFARI (подключается отдельно в сервисе OneSignal, см. выше “подключение с помощью скрипта”):
  6. Далее необходимо тщательно настроить остальные параметры плагина.
    Для удобства, покажу основные настройки у меня:

  7. Не забудьте нажать “Save“, чтобы настройки вступили в силу.

Push готово. Протестируйте и собирайте подписчиков!

Пишите, если я что-то забыл или у вас есть свои замечания к этой заметке.

Оценка:
( 1 оценка, среднее 5 из 5 )
Подписка на KRASHENININ.TECH

Получайте регулярные обновления на почту!


Виталий Крашенинин aka KRV/ автор статьи
Основатель блога, публицист, IT-специалист. Предоставляю услуги по администрированию, техническому обслуживанию и поисковому продвижению веб-сайтов.
Понравилась статья? Поделись в соцсетях:
KRASHENININ.TECH - блог о веб-технологиях, и не только
Подписаться
Уведомление о
guest
0 Комментарий
Встроенные отзывы
Просмотреть все комментарии
0
Буду рад вашим мыслям, пожалуйста, прокомментируйте.x
()
x