Push notification на сайтДорогие друзья, давно не писал сам статьи на сайт, решил что от себя буду писать только полезные статьи, которые будут интересны не только мне, но и моим читателям. Как вы наверное заметили на сайте появилась интересная функция, это push notification (в народе пуш уведомления). Эта функция по моему личному мнению революционная, которая отодвинет в сторону подписки на e-mail рассылки и социальные далеко в сторону, и даже в будущем заменит их. А вот почему:

  1. Push notification приходят прямо в браузер или в ваш смартфон.
  2. Более высокий ctr (нажатия по ссылке) по сравнению с обычными рассылками, так как читатель (подписчик) получит уведомление прямо в своем браузере в нижнем правом углу (или в виде push уведомления в строке состояния в смартфоне).
  3. Вы больше не будете зависеть от службы рассылки писем (если вы не использовали свой почтовый сервер для рассылки своих писем).
  4. Это круто использовать новые технология в своем проекте.

На примере будет показана настройка push notification в wordpress сайте (я ярый фанат вордпресса, т.к. эта удобная и популярная CMS и реализация пуш уведомления реализуется в пару кликов).

Для начала вам понадобится SSL сертификат, да, к сожалению обычные “http” сайты не смогут полноценно работать с push notification. Есть сторонние сервисы, которые конечно могут вам позволить добавить эту функцию на ваш сайт, но есть несколько минусов:

  1. Не все сервисы бесплатные, у большинства сервисов push уведомления есть базовый тариф, который позволит подписать/отправить 500-1000 подписчиков, но вы не будете хозяином своей жизни.
  2. Как я заметил некоторые сервисы злоупотребляют вашими подписками, и могут отправить свои рекламные уведомления (по крайнее мере в базовом тарифе было так) я очень удивился и был зол, когда получил левую ссылку не относящую к моему сайту.
  3. Жирный минус, пользователю придется 2 раза нажать “разрешить” уведомление, в первый раз на вашем сайте, а второй раз выйдет диалоговое окно от сервиса с “https” и в нем, в домене этого сервиса пользователю придется еще раз нажать кнопку “разрешить”. Как вы наверное догадались, это может отпугнуть вашего потенциального подписчика от подписки, слишком много телодвижении. Хватит это терпеть!

В моем же случае, пользователю достаточно 1 раз нажать кнопку “разрешить” в маленьком окне, и он уже будет зарегистрирован в системе и в при выходе новой статьи он будет получать уведомления уже прямо от моего сайта.

Думаю хватит воды, и перейду к делу.

Как я сказал выше, вам нужен SSL сертификат (те кто не знает что такое SSL и https, большой брат google вам поможет). Вы можете воспользоваться сервисом CDN cloudflare и в нем включить поддержку https (это самый легкий вариант, если будет интересно, могу написать статью как добавить сайт в cloudflare). Но я решил, что хочу добавить свой сертификат на сайт.

По гуглив немного, я нашел сервис “Let’s Encrypt” (https://letsencrypt.org) который позволяет бесплатно получить самый простой ssl сертификат с проверкой домена. Этого для нашего дела будет достаточно. Написал своему хостеру, что хочу добавить SSL сертификат от “Let’s Encrypt”, хостеру правда пришлось поменять панель управление хостингом с ISPmanager на Plesk т.к в Plesk есть плагин, который в один клик добавляет SSL сертификат от “Let’s Encrypt”. Если ваш хостер не может вам поменять панель управления, или в Plesk не установлен плагин “Let’s Encrypt” вы можете воспользоваться как я написал выше сервисом CDN cloudflare или поменять ваш хостинг на более “нормального” хостера.

Если у вас панель управления Plesk и в нем установлен плагин “Let’s Encrypt”.

  1. На главной странице панели управления найдите ссылку “Let’s Encrypt” и нажмите на него.
  2. Можете оставить e-mail адрес по умолчанию или указать другой.
  3. Поставьте галочку “Include www. as an alternative domain name. ” для того, чтобы сертификат работал и с “www”
  4. Нажмите кнопку Install и подождите несколько секунд.
  5. Все, сертификат установлен.

После подготовки вашего сайта, и проделывания нужных нам действий. Вам понадобится настроить wordpress, чтобы он переадресовывал посетителей на “https://” версию вашего сайта. Делается это следующем образом, заходите в админку вашего сайта. Настройки – Общие настройки. В общих настройках, в “Адрес WordPress (URL)” и “Адрес сайта (URL)” меняете “http://вашсайт” на “https://вашсайт”. Все, если вы правильно установили SSL сертификат, то ваш сайт будет работать как и прежде, но в адресной строке появится значок зеленого замка. Это означает, что ваше соединение защищено, и канал между вами и сервером будет шифроваться.

Следующим этапом будет установка плагина “Chrome Push Notifications” (https://wordpress.org/plugins/chrome-push-notifications) этот плагин сделает за вас грязную работу, в нем будет достаточно написать ключи которые выдаст вас google, об этом чуть ниже. Почему-то после установки плагина и после заполнения нужных форм у меня ничего не заработало, возможно разработчик плагина исправит это, но я решил, что не буду ждать пока исправят работу плагина, и вручную вписал нужные строки в шаблон моего блога.

Предположим вы установили плагин и сайт у вас с ssl сертификатом. Теперь вам необходим аккаунт в gmail, для того, чтобы попасть в консоль и активировать нужные нам API. Снизу добавил видео что нужно сделать в “google developer console”, а это пошаговая текстовая инструкция:

  1. Зайдите на сайт https://console.developers.google.com
  2. Если вы не разу не создавали проекты, то нажмите ссылку “Create a project”, если Вы ранее уже создавали проект, то правом в верхнем углу нажмите на название старого проекта, выйдет меню, в нем найдите ссылку “Create a project” и нажмите на нее.
  3. Выйдет диалоговое окно “New project”, напишите латинскими символами название проекта и нажмите кнопку “Create”.
  4. Подождите несколько секунд пока проект не создаться, после нажмите на проект (ID) и появится список, в этом списке нам нужен “Project number”, запишите его в блокноте и сразу впишите в плагин “Chrome Push Notifications” в строку “Project Number”.
  5. Следующий пункт, нажмите на “Use Google API” найдите ссылку “Cloud Messaging for Android” и нажмите на нее. Дождитесь пока появится кнопка “Enable API” и нажмите на эту кнопку.
  6. После нажатия кнопки, у вас должна появится предупреждение и кнопка “Go to Credentials” нажмите эту кнопку.
  7. Следующий пункт, нужно выбрать какой API нужно использовать, нужно выбирать именно “Google Cloud Messaging for Android”, а форму вызова API “Web browser” нажмите кнопку “What credentials do I need?”
  8. Можете не менять название ключа, а в строке “Accept requests from these HTTP referrers (web sites)” указать свой сайт, для того, чтобы другие сайты не могли использовать ваш API и нажмите кнопку “Create API key”
  9. Мы почти закончили, запишите или лучше сразу вставьте в плагин ваш API ключ в строку “GCM API Key”.

Все с Google мы разобрались, перейдем на наш сайт. Как я говорил, у меня почему-то плагин сразу не заработал, возможно это только мне не повезло, мне пришлось поковыряться на сайте разработчика, чтобы понять, почему у меня не заработал плагин. Если плагин у вас тоже не работает, то можете повторить мои действия.

1. Нужно добавить jQuery в вашу тему, если он у вас не стоит. Я использую CDN от google, вы можете загружать его с него же или со своего сайта. Добавить нужно в header.php

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js">

2. Создайте файл с названием и расширением manifest.json в корневой папке своего сайта и впишите туда, номер вашего проекта, который вы взяли с "google developer console":

{"gcm_sender_id": "номер-вашего-проекта"}

Запись добавляется до тега </head>

3. После этого, зайдите в меню "виджеты" и добавьте текстовый виджет и в него впишите следующие значения, замените "вашсайт.кз" на домен вашего сайта.

<script type='text/javascript'>
/* <![CDATA[ */
var pn_vars = {"sw_path":"https:\/\/вашсайт.кз\/sw.js","reg_url":"https:\/\/вашсайт.кз\/?regId=","ajaxurl":"https:\/\/вашсайт.кз\/wp-admin\/admin-ajax.php","debug":"1"};
/* ]]> */
</script>

<script type='text/javascript' src='//вашсайт.кз/wp-content/plugins/chrome-push-notifications/assets/js/push.js?ver=1.0'></script>

4. После всех этих действии, обновите кэш wordpress (если у вас установлен плагин кэширования) и зайдите на главную страницу. У вас должно появится окно push notification. Надеюсь статья вам помогла, если будут вопросы обращайтесь, по мере возможности буду помогать.

P.S: Забыл сказать, этот push notification работает только в браузерах хром от google, думаю в будущем напишу как реализовать такую функцию и в iOS устройствах и в других браузерах.

автор: Шухрат Наманов

Как сделать push уведомление (notification) на сайте
62 оценок, Средняя оценка: 4.9 из 5

  1. Подскажите, а что насчёт кеширования? У меня планируется плагин WP Super Cache. И как отразится система пуш уведомлений на нагрузку, для каждого ли посетителя открыт канал и мониторинг (прошу прощения за некомпетентность, я не сталкивался с этими механизмами и не в курсе как он работают).

    И ещё – для чего именно необходим гугл апи? Именно серверы гугл рассылают и мониторят все эти рассылки?

    1. по поводу кэширования не все так плохо. По моим наблюдениям, если включить в WP Super Cache предварительное кэширование (Общий кэш), то плагин все таки будет отдавать уже заранее созданную html страницу, без php функции. Это значительно конечно уменьшит нагрузку на блог, но вы должны понимать, что соединение будет немного медленнее, чем http. Чтобы ускорить сайт, можно использовать разного рода CDN.

      Мониторинг: Возможно уже существуют плагины с богатым функционалом, чтобы можно было сортировать подписчиков по странам, но к сожалению в этом плагине пока (надеюсь в будущем появится) нету. Но вы можете использовать сервис для сокращения ссылок (goo.gl или bitly.com) и мониторить нажатия по ссылке и получать детальную информацию о посетителях.

      По поводу google API, да, пуш уведомления отправляются через сервис гугла (кстати в файрфоксе тоже теперь работают push уведомления, с этим же плагином, т.е не нужно настраивать отдельно под него).

  2. А возможно ли сделать отправку уведомлений конкретному пользователю. Что-то вроде напоминалки?

    1. К сожалению плагин очень медленно развивается. Я бы сам хотел бы иметь сортировку подписчикам по странам, отправлять уведомление только определенным пользователям. И импорт/экспорт подписчиков. Надеюсь разработчик плагина в будущем это реализует.

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

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