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 (отдельное окно с уведомлением).
Читайте также:  Поисковые алгоритмы Google

Если вы выберите последний вариант — то все ровно будет показываться на некоторых браузерах дополнительно еще и родное 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.

Читайте также:  5 вещей, которые нужно сделать перед запуском нового сайта

Установка плагина 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 )
Виталий Крашенинин / автор статьи
Основатель блога, публицист, IT-специалист
Понравилась статья? Поделиться с друзьями:
Opt In Image
Хочешь первым получать свежую информацию от меня?
Тогда подписывайся ↓
Krasheninin IT Блог - все о веб-технологиях, и не только
Добавить комментарий

;-) :| :x :twisted: :smile: :shock: :sad: :roll: :razz: :oops: :o :mrgreen: :lol: :idea: :grin: :evil: :cry: :cool: :arrow: :???: :?: :!:

семь + двенадцать =

>