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

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

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

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

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

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

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

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

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

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

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

  • Выбираем платформу Web Push со значком Google Chrome и жмем Next:

Подключение и настройка Push уведомлений

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

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

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

  • Скролим вниз и переходим ко вкладке “Permissions Prompt Setup”, нажимаем на кнопку Add 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.

Установка плагина OneSignal Push для WordPress

Если у Вас WordPress, то подключить PUSH еще проще. Достаточно установить специальный плагин для WordPress.

С плагином алгоритм будет следующим:

  1. Установить сначала плагин в репозитории WordPress:
  2. Создать учетную запись на сайте OneSignal и добавить приложение с интеграцией WordPress:
  3. Скопировать APP ID и API KEY:
  4. Перейти в настройки Configuration плагина OneSignal и ввести данные ключи. В Safari Web ID вбивает ключ, который появился на этапе подключения APP SAFARI:
  5. Далее необходимо тщательно настроить все параметры плагина в админке WordPress. Для удобства, покажу как настроены у меня основные параметры:

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

Пишите, если я что-то забыл или у вас есть свои замечания и пожелания!

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

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


Виталий Крашенинин aka KRV/ автор статьи
Основатель блога, публицист, IT-специалист
Понравилась статья? Поделись с друзьями:
KRASHENININ.TECH - блог о веб-технологиях, и не только
Оставить комментарий
avatar
500
  Подписаться  
Уведомление о