Как сделать web push (веб пуш) на своём сайте бесплатно через OneSignal – инструкция

Доброго времени суток, уважаемый посетитель.

Мгновенные уведомления с сайта о появлении нового материала, а также прочих событиях, что может быть лучше?! Данная технология пришла к нам из мира мобильных технологии – изначально мгновенные уведомления были лишь уделом мобильных приложений, но со временем «фича» была внедрена и в браузеры (мобильные, а затем и десктопные).

Оповещения увеличивают количество посетителей на ваш сайт, и являются более эффективными, нежели E-Mail подписка. Т.е. если пользователь посетил ваш сайт, одобрил запрос на включение оповещений от сайта, то он их будет видеть практически всегда, и для этого не надо совершать каких-либо лишних телодвижений, как это традиционно бывает с E-Mail рассылкой.

Однако это не значит, что от рассылки по электронной почте надо отказываться, просто мгновенные сообщения отлично её дополняют.

Сразу хочу заметить, что Web Push оповещения могут быть интегрированы только на те сайты, которые работают по защищённому протоколу (https) – таково требование технологии.

Содержание:

Что собой представляет Web Push

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

Запрос на включение оповещений с сайта в компьютерных браузерах

На изображении приведён пример с предложением подписаться на оповещения с сайта в десткопном браузере Google Chrome и Mozilla Firefox.

Запрос на включение оповещений с сайта в мобильном браузере Chrome

А вот так этот же запрос выглядит в мобильном браузере Chrome for Android.

Приветственное сообщение, которое отправляется при согласии на включение оповещений

Когда пользователь соглашается на приём оповещений, то можно задать «приветственное» оповещение, смысл которого сводится к тому, что вы были подписаны на оповещения о новых материалах сайта. И при их появлении вы будете оповещены соответствующем уведомлением.

Оповещение с сайта о новом материале

Как вы можете видеть, в мобильных браузерах оповещения зачастую выводятся в панели уведомлений, а в десктопных (компьютерных) браузерах – они всплывают в правом нижнем углу.

Сами оповещения также настраиваются: можно установить картинку, заголовок, текст сообщения, и открытие определённой страницы при нажатии по оповещению.

Как подключить Web Push на сайт

Необходимо понять, что Web Push – это сервис, который едва ли можно реализовать за счёт просто установки плагина и подобных манипуляций. Потому то мы будем пользоваться соответствующим сторонним сервисом. В данном случае речь пойдёт о сервисе OneSignal, с помощью которого наделим наш сайт описанным выше функционалом. Почему именно он? Потому что он полностью бесплатен, не отправляет пользователям никакой рекламы и прочего.

Едва ли вообще пользователи будут знать, что Web Push вашего сайта реализован с помощью сервиса OneSignal. В этом и заключается его неоспоримое преимущество.

Каковы его минусы? Они тоже имеются. Интерфейс данного сервиса англоязычный, и к нему надо будет привыкнуть, если вы планируете формировать оттуда оповещения, которые будут отправляться подписавшимся на них пользователям.

Для интеграции в WordPress имеется официальный плагин, который, однако, мне совершенно не понравился. Его размер составляет 6.5мегабайт, что весьма немало… меня уже это ототкнуло от его использования.

Я интегрировал на сайт Web Push «ручками», прочтя руководство по интеграции (на английском), которое на сайте сервиса изложено довольно подробно.

А сами сообщения я формирую через личный кабинет на сервисе.

Об этом способе интеграции (без плагина) я и хочу вам рассказать. Стоит отметить, что воспользовавшись описываемым способом интеграции, можно наделить Web Push функционалом не только сайт на WordPress, но и работающий на любом другом движке, или вовсе состоящий из статических html страниц. Поистине универсальный вариант!

  1. Первым делом необходимо перейти на сайт сервиса OneSignal и зарегистрироваться. Для этого нажмите по ссылке LOG IN и в отобразившемся окне кликните по ссылке Sign up, которая располагается внизу. Там вам необходимо будет ввести электронную почту, пароль, название компании или организации (введите любое), а также принять соглашение об использовании. Вы также можете пройти ускоренную регистрацию, если у вас имеется учётная запись Google, Facebook, Github.
  2. Зарегистрировавшись, и войдя в личный кабинет, вы увидите приветственное сообщение, в котором перечисляются возможности сервиса.
  3. Прощёлкав до последнего окна, нажмите на располагающуюся там кнопку Add a New App.

    Нажмите на кнопку Add a New App

  4. В открывшемся окне введите имя, к примеру, название сайта, и нажмите кнопку Create.

    Дайте имя создаваемому профилю веб-рассылки

  5. После этого вашему взору предстанет окно, в котором необходимо будет нажать на кнопку с надписью Website Push и нажать на клавишу Next.

    Выберите Website Push

  6. В следующем окне нажмите по кнопке с надписью Google Chrome & Mozilla Firefox, после чего нажмите Next.

    Выберите Google Chrome & Mozilla Firefox

    Примечание: там ещё имеется кнопка Apple Safari, и у вас может возникнуть закономерный вопрос: а как же данный браузер? Не волнуйтесь, его мы добавим в одном из следующих шагов.

  7. В следующем окне нам будет предложено ввести адрес сайта, а также его логотип (не обязательно, можно добавить потом). Введя данные, нажмите клавишу Save.

    Введите адрес вашего сайта

  8. В результате откроется окно, в котором надо будет выбрать из вариантов, как будет интегрироваться сервис, вам надо будет кликнуть по кнопке Website Push, и нажать Next.

    Выберите пункт Website Push

  9. Информация в окне сменится, и высветится ваш Your App ID. Не закрывайте данное окно, оно нам ещё понадобится. Сейчас же перейдём к интеграции кода сервиса на сайт.

    Ваш Your App ID

  10. Для интеграции кода на сайт необходимо скачать данный архив (архив скачивается с официального сайта) с файлами, которые потребуются для успешной интеграции. В архиве имеется папка OneSignalSDKFiles, а в ней три файла:

    manifest.json
    OneSignalSDKWorker.js
    OneSignalSDKUpdaterWorker.js

    Распакуйте эти файлы.

  11. Далее вам необходимо открыть в текстовом редакторе файл manifest.json и отредактировать надпись OneSignal Example на имя своего сайта. Тут нет строгих требований, можно вписать имя сайта и его лозунг.

    Отредактируйте файл manifest.json

  12. Теперь закачайте данные файлы в корень вашего сайта, чтобы эти файлы были доступны, если набрать их адрес в строке браузера:

    https://sitename.ru/manifest.json
    https://sitename.ru/OneSignalSDKWorker.js
    https://sitename.ru/OneSignalSDKUpdaterWorker.js

  13. Но это ещё не всё. Теперь вам необходимо добавить код непосредственно в шаблон сайта. Если это WordPress, то перейдите в папку (\wp-content\themes\<папка с названием темы>), где располагается используемая вами тема, и отыщите там файл header.php. Откройте данный файл на редактирование и впишите где-нибудь между тегами <head>… </head> следующий код:
    <script src="https://cdn.onesignal.com/sdks/OneSignalSDK.js" async></script>
    <link rel="manifest" href="/manifest.json">
    <script> 
      var OneSignal = window.OneSignal || []; 
          OneSignal.push(["init", { 
           appId: "СЮДА впишите присвоенный вам App ID", 
          autoRegister: true, 
          notifyButton: { 
          enable: false 
          }, 
          persistNotification: true,
          safari_web_id: '',
    	  welcomeNotification: {
            "title": "Уведомления включены",
            "message": "При появлении нового материала на сайте вы будете уведомлены"
            // ,"url": ""
        },
       }]); 
    </script>

    Не забудьте за место СЮДА впишите присвоенный вам App ID вписать тот код, что был присвоен в вашем случае, и отображается в том окне, который был высвечен на 9 шаге.

    Title и message отвечают за «приветственное» сообщение при подписке, вы можете изменить текст в этих строках на своё усмотрение.

    Сохраните файл header.php с вписанным вами кодом.

  14. Теперь откройте ваш сайт. Вы должны увидеть оповещение с предложением подписаться на моментальные уведомления. Согласитесь с этим предложением.

    Предложение подписаться на пуш-уведомления с вашего сайта

    Примечание: стоит отметить, что данный запрос отображается один раз. И если вы согласились с ним, то впоследствии он не будет появляться, а будет осуществляться автоматическая подписка. Не поможет даже очистка истории браузера.
    Я просто сам столкнулся с такой особенностью технологии, экспериментируя с интеграцией на сайт. Так что если вы не видите запроса, то не стоит «бить тревогу» и думать что что-то не работает, просто попробуйте зайти с другого браузера, с которого ранее не осуществлялся доступ на сайт.

    Поздравляю – вы первый подписчик на оповещения со своего сайта :-) Но это ещё далеко не всё.

  15. Теперь вернитесь к тому окну, которое мы оставили, дабы перейти к интеграции кода на сайт, и нажмите в нём кнопку Check Subscribed Users. В результате под кнопкой всплывёт сообщение, если оно зелёное, то всё прошло успешно, можно нажать на располагающуюся в правом нижнем углу кнопку Done.

    Сообщение об успешной интеграции пуш-оповещений на сайт

    Web Push будет действовать (подписка, получение) в браузере Google Chrome и основанных на коде Chromium: Opera, Яндекс Браузер и т.д, а также Mozilla Firefox.

  16. Нам остаётся только подключить возможность работы Web Push и в браузере Apple Safari – десктопном варианте браузера Apple (не мобильном, iOS не поддерживает технологию Web Push).

    Для включения поддержки Apple Safari сделайте следующее:

    В личном кабинете OneSignal в левом меню нажмите по ссылке App Settings, в открывшемся меню нажмите на кнопку Configure, что располагается напротив пункта Apple Safari.

    Включаем веб-пуш для браузера Apple Safari

    В открывшемся окне введите имя вашего сайта и впишите его URL адрес, после чего нажмите кнопку Save.

    Впишите имя вашего сайта и его домен

    Вас перебросит на страницу App Settings, но под надписью Apple Safari будет высвечен Web ID.

    Ваш Web ID

    Его необходимо скопировать и вставить в тот код, что мы ранее вставляли в файл header.php:

    Было

    ...sistNotification: true,
          safari_web_id: '',
    	  welcomeNotification: {
            "title": "Уведо...

    Стало

    ...sistNotification: true,
          safari_web_id: 'СЮДА вписать присвоенный Apple Safari ID',
    	  welcomeNotification: {
            "title": "Уведо...

    Сохраните введённые изменения.

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

<script src="https://cdn.onesignal.com/sdks/OneSignalSDK.js" async></script>

переместил в так называемый «подвал» (в исходном коде страницы она отображается внизу).

Как формировать и отправлять Web Push подписавшимся

С кодом и интеграцией мы разобрались, теперь дело за малым – создать рассылку.

  1. Для этого в левом меню нажмите по ссылке New Message.

    Создаём пуш-рассылку

    Там нас будет ждать мастер, с помощью которого мы создадим рассылку.

  2. На странице «Кому отправлять» по умолчанию уже выбран вариант всем (Send to Everyone). Нажмите Next.

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

  3. На следующей странице вводится сообщение. Не обращайте внимание на надпись ENGLISH перед формой ввода, просто можно создать мульти рассылку, для каждого указанного языка. Если вам это не нужно, то смело вводите заголовок (Title) и сообщение (Message) и нажмите Next.

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

  4. На данной странице нам предлагается указать иконки, картинку, и ссылку, которая будет открываться при нажатии на оповещение.

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

    Иконки (Icon – миниатюра, отображающаяся рядом с текстом) поддерживает Google Chrome, Mozilla Firefox (и браузеры на основе Chromium), большую картинку (Image) только Chrome и только с версии 56. Safari не поддерживает иконку вовсе, только текст.

    Можете игнорировать ввод большой картинки (Image), ограничиваясь указанием иконки (Icon).

    Что же касается ссылки, то она вводится в Launch URL.

    Ещё стоит сказать про поле Time to Live – данная опция отвечает за время жизни сообщения, по умолчанию оно равняется трём дням. Если за это время смартфон\браузер не сможет выйти в интернет, то сообщение ему не будет доставлено вовсе.

    Имеет смысл увеличить данный промежуток. Я увеличиваю данный порог до 128 дней (введя 11111111 в поле). Для его увеличения просто начните вводить цифры и в реальном времени будет выводиться устанавливаемый порог.

    Введя все данные, нажмите Next.

  5. На следующей странице указывается момент, когда отправлять. По умолчанию отправка осуществляется незамедлительно, но можно попробовать использовать опцию Intelligent delivery (Recommended) – отправка сообщений в то время, когда они наиболее вероятно будут уместны для тех или иных пользователей (в зависимости от часового пояса и других факторов).

    Четвёртый шаг - укажите, когда необходимо отправлять пуш-рассылку

    Для продолжения нажмите кнопку Confirm.

  6. В результате высветится страница с обобщающей суммарной информацией об отправке сообщения, его содержанию, какому количеству подписчиков и т.д. Для подтверждения отправки нажмите кнопку Send Message.

    Пятый шаг - страница с обобщающей информацией о созданной пуш-рассылке

Всё. Рассылка осуществлена. Подписавшееся посетители увидят оповещение.

Пуш-оповещение

А вас перебросит на страницу статистики, где вы сможете наблюдать, сколько всего сообщений было отправлено, какие из них достигли цели, сколько раз подписчики на него нажали и т.д. Очень удобно и наглядно.

Стоит отметить, что в левом меню вы можете выбрать пункт Templates и создать шаблон рассылки, дабы не вводить каждый раз повторяющуюся информацию при создании очередной рассылки.

Краткий итог

В материале мы подробно рассмотрели преимущества web push, процесса установки сервиса мгновенных уведомлений на сайт, и его использования на примере полностью бесплатного сервиса от OneSignal.

Если имеются вопросы, то в комментариях вы можете уточнить все тонкости и нюансы.