Web Push уведомления. Что это и зачем? HTML5 Notifications — это просто: делаем уведомления одной строкой, как в GMail А есть готовые решения для браузерных оповещений

16.03.2024

Вы наверняка принимаете оповещения на свою электронную почту: заходите в почтовый клиент и смотрите пришедшие письма. В данном случае эта технология является технологией pull (тянуть), т.е. вы заходите на сайт и "тянете" с него данные, когда они вам нужны.

В случае же с push (толкать) уведомлениями, ресурс проталкивает новые данные вам сам. При этом вы сразу получаете самые свежие данные, ведь в данной технологии нет определенного периода проверки данных, они приходят в режиме онлайн. Используя "пуши" вы не обязательно должны получать уведомления. Через push-технологию можно например синхронизировать данные если они обновились.

Уведомления бывают:

Браузерные - через push api или через дополнение
Мобильные - через мобильное приложение
На PC через приложение, независимо от браузера

Вы можете сразу приступить к созданию канала Push-уведомлений, Браузерные (web) push-уведомления Они приходят в браузер с сайта, на котором подписан пользователь. Они могут приходить как на компьютер, так и на андроид-устройство в браузер хром, но iOS устройства не могут принимать веб-пуши ни при каких обстоятельствах.

Вот так выглядят уведомления разных типов в браузере Chrome

Первое оповещение сделано через стандартный Notification API, второе сделано через Push API. Эти оповещения не исчезают - но для них не применяется сглаживание изображения на многих платформах. (вы можете заметить по качеству картинок)
Третий пуш сделан через Rich Notification. Эти оповещения приходят через расширения , в них может быть дополнительная информация, кнопки, изображение под уведомлением. Возможностей больше - но они автоматически скрываются, хотя возможно в будущем будет доступно из "закрепление".
Это оповещения в хроме, но есть еще оповещения в Firefox и Safari.

Firefox

Safari

Эти виды оповещений предоставляют многие сервисы web push уведомлений. Однако мы хотим объяснить вам, что сама по себе отправка оповещений бесплатна . Эти оповещения отправляются через:

GCM : Google, полностью бесплатно, нужно лишь создать ключ в консоли разработчика
APNS : Apple, требуется любой знакомый разработчик с сертификатом, либо за 100$ в год можно взять его самому
MSP : Mozilla Push Service, полностью бесплатно. Даже не нужна регистрация. Открытый стандарт.

Мы предостерегаем вас, не нужно платить несколько тысяч рублей за количество оповещений или подписчиков. Так как сама услуга рассылок бесплатна (в отличии например от SMS, где нужно платить оператору) брать деньги можно только за услуги посредника, удобство, статистику и т.д. Но это никак не стоит несколько тысяч рублей, тем более с ростом числа подписчиков. Да нагрузка от миллиона оповещений в час будет значительна - за такие цифры можно платить деньги, т.к. ваш сервер может не потянуть. Но поверьте - отправлять даже 100 тысяч оповещений в сутки это ерунда. Через GCM можно за секунду отправить более 5-7 тысяч пушей 5-7 пакетами. Многие сервисы веб-пушей требуют за это по 1000 рублей в месяц или даже больше. За 1 секунду работы небольшого скрипта.
PushAll поддерживает все эти типы оповещений и позволяет делать рассылки абсолютно бесплатно и без ограничений.

Мобильные push-уведомления Это оповещения, которые приходят вам на мобильный телефон от различных приложений.

Например оповещения на Android, через приложение PushAll выглядит вот так

А вот так на iOS в нашем приложении

Вы не сможете прикрутить эти оповещения "нативно" на свой сайт. Существует возможность принимать браузерные оповещения на андроиде через хром, но эти оповещения очень громозки и некачественны, разницу можно оценить на примере ниже:

Сравнение оповещений

Вы можете например отправить оповещение через телеграм (1) , но тогда у вас не будет иконки вашего сайта, а при клике пользователь будет попадать в диалог, а не сразу на ваш ресурс. (2) Это как раз браузерное оповещение на Android, на этом скриншоте не так заметно, но изображение более низкого качества, лишняя кнопка с настройками, и строка с адресом сайта. Плюс ко всему из за обновления контента может появляться лишнее оповещение (4) . Нативное решение через приложение (3) является наиболее привлекательным для пользователя решением.
Push-уведомления на смарт-часах Moto 360:

Наиболее заметна разница на смарт-часах. Сверху веб-оповещение, снизу оповещение через приложение

Также уведомления на Android в последней версии нашего приложения умеют группироваться по каналам:

Группировка уведомлений на Android

Android

История внутри приложения для iOS Экзотические оповещения

Вы уже видели выше, что оповещения от нашего сервиса могут приходить даже через телеграм . Засчет этого, пользователи которые используют активно телеграм могут легко подключиться. Также мы отправляем оповещения на электронную почту. При этом оповещения приходят "пачками", через установленные промежутки времени.

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

Письма приходят в стилистике оповещений Какие виды оповещений наиболее популярны? У нас большой опыт в рассылки push-уведомлений, мы отправили их более 60 миллионов. Ниже представлены данные по 33214 устройствам в нашей системе, а также какие устройства и методы подключения предпочитают пользователи:

11936 35% - Android приложение
6992 22% - Chrome дополнение
6204 18% - WebPush
3514 11% - Telegram
2688 8% - Email
1465 4% - SocketPush
227 1% - iOS
188 1% - Safari

Как вы видите, около 60% пользователей выбирают нативные решения, которые устанавливаются на их устройства. Проще - не значит лучше. Только 18% пользователей выбирают оповещения, которые включаются в один клик, скорее всего это связано с предыдущим плохим опытом на других сайтах. 11% пользователей используют Telegram - большая часть из них пользователи iOS, которые ранее ждали нативное решение.

По итогам мы хотим донести до своих читателей, что реализация веб-пушей на вашем сайте покроет лишь 18% потребностей вашей аудитории, вы теряете мобильных пользователей, теряете тех, у кого был плохой опыт с веб-пушами и многое другое.
Также интересна высокая доля Email и SocketPush. Для пользователя это наиболее безопасный метод, когда он может открыть сайт и получать с сервисов оповещения, а потом закрыть его и они перестанут ему мешать. При этом нужно понимать, что тут работает тот же принцип, что и в других Push-уведомлениях - когда пользователь появляется онлайн - все пропущенные оповещения приходят . Почему-то многие сервисы web push уведомления преподносят эту функцию как инновацию, но это уже заложено в протоколы GCM и APNS.

Интересно увидеть статистику за последние 2 недели, дело в том, что недавно у нас вышло приложение для iOS, и мы обновили приложение для Android и все несколько изменилось.
Нужно учитывать, что новых крупных каналов за это время не прибавилось - то есть это чисто пассивный приток новых пользователей - 950 устройств.

202 20% - WebPush
72 8% - iOS
38 4% - Email
3 около 0% - Safari
1 около 0% - SocketPush

По этой статистике видно - пассивно сильно растет WebPush как самый простой способ подписки для небольшого числа каналов. Однако при этом 70% используют нативное решение. Более того - iOS приложение устанавливают чаще чем добавляют бота в телеграм. Если мне все таки нужны чистые web push уведомления на своем сайте? Начнем с того, что вам понадобится:
1. SSL-сертификат. Его можно получить бесплатно, но основная его проблема не в том, что его можно купить или получить. Основная проблема в нагрузке. Дело в том, что при осуществлении зашифрованного соединения расходуется очень много ресурсов сервера. Это значит, что если у вас сервер справлялся с нагрузкой без SSL, но был нагружен на 50%, скорее всего вам придется купить еще 2-3 сервера, либо провести очень большую оптимизацию. Также в моменты рассылок, вам нужно будет отдавать контент (заголовок и текст) оповещения всем пользователям, которые его примут. То есть если у вас 100 тысяч подписчиков, то к вам на сервер за 10 секунд придет несколько тысяч запросов и все они будут требовать SSL Handshake.

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

3. Ключ для GCM в консоли Google - это бесплатно. Чтобы отправлять оповещения на Safari нужен аккаунт разработчика - он стоит 100$ в год.

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

Пользователи iGuides "очень рады" оповещениям

Дело в том, что многие пользователи активируют оповещения, не понимая что это такое. Фактически, если пользователь не подтвердил своё желание получать от вас рассылки (в здравом уме), а вы присылаете ему контент, то по закону это является спамом. То есть, любой пользователь, который нечаянно кликнет "Разрешить" на вашем сайте, а вы его у себя на сайте не предупредите о том, что вы будете ему рассылать оповещения, может подать на вас в суд за спам.

Вы можете сами реализовать оповещения, и мы не будем её тут полностью переписывать (только если потом, подробно сами инструкции с кодом)

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

Ни в коем случае не используйте сервисы, которые просят с вас деньги за число подписчиков. Дело в том, что со временем все больше и больше пользователей будут запрещать эти оповещения на вашем сайте. Вы обнаружите, что некоторая доля ваших оповещений не доходит. Сначала это будет 30%, потом 40% и может дойти даже до 80%. При этом с вас будут требовать сумму за полное число подписчиков.

Также обращайте внимание на мелкий текст - некоторые сервисы ограничивают оповещения. Например ограничение в 30 оповещений в месяц каждому пользователю. Что это значит? Это значит, что вы сможете отправить 1 оповещений в сутки всем пользователям. Если у вас статьи на сайте, это еще не так плохо - можно выделить одну важную и отправить. Если же вам нужно рассылать личные сообщения и иногда больше 1го оповещения в сутки - это недопустимо. Такие сервисы будут требовать с вас за каждые 30 оповещений полную ежемесячную плату - за бесплатные оповещения.

Итоги Push-уведомления это полезный инструмент, но с ним надо уметь работать и знать подводные камни. Этот рынок сейчас только развивается, появляются сервисы, которые требуют деньги "за новизну". Но на самом деле во всем цивилизованном мире уведомлениями давно пользуются, и там они уже по большей мере бесплатные. Также нужно учитывать интересы пользователей и не ограничивать их в выборе методов приёма оповещений.

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

Наверняка все, кто пользовался почтой от Google, хоть раз видели уведомления вроде этого:

Уведомления почты gmail

Эти уведомления называются HTML5 Notifications, и они видны, даже если перейти в другую вкладку или вообще свернуть браузер.

После прочтения этой статьи вы сможете сделать такие же уведомления и для своего сайта. Код простой, кроссплатформенный, и непосредственно отправка уведомления занимает всего 1 строку на любимом JavaScript.

Также в конце статьи есть готовая функция, с помощью которой можно начать отправлять уведомления, не вникая в подробности.

Согласно сайту caniuse.com , сейчас такие уведомления (HTML5 Notifications) работают в браузерах Chrome, Firefox (35+), Opera (27+), Safari (7.1+). Internet Explorer поддержки интернета уведомлений не имеет. Если рассматривать мобильные платформы, то частичная поддержка HTML5 Notifications есть только у Android Browser.

Перед тем, как непосредственно отправлять уведомления, нам нужно получить права (permission) на это.
Сделать это можно методом Notification.requestPermission() :

Notification.requestPermission(function(permission){ // переменная permission содержит результат запроса console.log("Результат запроса прав:", permission); });

После выполнения метода, результат запроса на права будет лежать в переменной permission .

Вот её разные значения с пояснениями:

default - запрос на получение прав не отправлялся;
granted - пользователь разрешил показывать уведомления;
denied - пользователь запретил показывать уведомления.

Получив права, можем приступать непосредственно к отправке уведомлений.
Делается это очень просто, одной строкой:

Var notification = new Notification(title, options);

title - заголовок уведомления,

options (опционально) имеет следующие параметры:

body - тело уведомления (основной текст), в разных браузерах и ОС обрезается по-разному (например, в Chrome под Win 8.1 максимальная длинна – 200 символов);
dir - направление отображения уведомления, может быть auto, ltr (слева направо) или rtl (справа налево);
lang - язык уведомления;
tag - уникальный идентификатор уведомления, с помощь которого можно заменить его другим уведомлением или удалить;
icon - URL изображения, которое будет показано в уведомлении (рекомендуем разрешение 40×40 px).

Попробуем установить параметры и отправить уведомление:

Var notification = new Notification("Сколько ТЫЖ программистов нужно чтобы вкрутить лампочку?", { body: "Только ты!", dir: "auto", icon: "icon.jpg" });

Результат выполнения кода выше

Также у notification есть методы-обработчики событий onclick , onshow , onerror , onclose:

Function clickFunc() { alert("Пользователь кликнул на уведомление"); } notification.onclick = clickFunc;

Результат:

При клике

Одна функция для всего

Теперь соберем всё в единую функцию и добавим несколько проверок на ошибки:

Function sendNotification(title, options) { // Проверим, поддерживает ли браузер HTML5 Notifications if (!("Notification" in window)) { alert("Ваш браузер не поддерживает HTML Notifications, его необходимо обновить."); } // Проверим, есть ли права на отправку уведомлений else if (Notification.permission === "granted") { // Если права есть, отправим уведомление var notification = new Notification(title, options); function clickFunc() { alert("Пользователь кликнул на уведомление"); } notification.onclick = clickFunc; } // Если прав нет, пытаемся их получить else if (Notification.permission !== "denied") { Notification.requestPermission(function (permission) { // Если права успешно получены, отправляем уведомление if (permission === "granted") { var notification = new Notification(title, options); } else { alert("Вы запретили показывать уведомления"); // Юзер отклонил наш запрос на показ уведомлений } }); } else { // Пользователь ранее отклонил наш запрос на показ уведомлений // В этом месте мы можем, но не будем его беспокоить. Уважайте решения своих пользователей. }

Теперь у нас есть красивая функция, с помощью которой можно просто отправлять уведомления, не отвлекаясь на запрос прав или поддержку браузера:

SendNotification("Верните Линуса!", { body: "Тестирование HTML5 Notifications", icon: "icon.jpg", dir: "auto" });

Результат выполнения функции в разных браузерах:

Как отключить пуш (push) уведомления - такой вопрос волнует некоторых пользователей, которые видят оповещения в браузере, после входа на многие сайты в интернете. Технология Push предназначена для распространения информации в интернете от поставщика, в данном случае, сайта, к пользователю данного сайта.

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

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

Что такое пуш уведомление на компьютере? Если посетитель сайта соглашается на получение сообщений с данного ресурса, то время от времени, уведомления о новостях этого веб-сайта появляются на Рабочем столе пользователя.

Как работают push уведомления

При заходе на сайт, на котором включена функция отправки оповещений, посетитель каждый раз видит запрос на разрешение показа уведомлений, в котором предлагается нажать на кнопки «Разрешить» или «Блокировать». Названия кнопок могут быть разными, но смысл везде одинаковый.

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

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

Нажимая на кнопку «Разрешить», вы соглашаетесь получать push сообщения на свой компьютер.

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

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

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

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

Как удалить push уведомления после получения оповещения

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

Для этого нажмите на значок настроек (шестеренка), а затем выберите пункт «Отключить уведомления с сайта».

После этого, уведомления с данного сайта больше не будут появляться на вашем компьютере.

Как отключить пуш уведомления в Google Chrome

Войдите в настройки браузера Google Chrome, прокрутите вниз колесико мыши, нажмите на ссылку «Дополнительные».

В разделе «Конфиденциальность и безопасность» нажмите на кнопку «Настройки сайта». В открывшемся окне «Настройки сайта» найдите раздел «Уведомления».

Здесь вы можете настроить получение оповещений с сайтов. По умолчанию выбрана опция «Спрашивать разрешение перед отправкой (рекомендуется)».

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

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

В окне «Добавление сайта» введите адрес сайта, а затем нажмите на кнопку «Добавить».

Для настройки получения push сообщений, нажмите на кнопку «Добавить», расположенную напротив опции «Разрешить».

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

Как отключить push сообщения в Mozilla Firefox (1 способ)

Войдите в настройки браузера Mozilla Firefox, откройте раздел «Приватность и защита». В параметре «Разрешения» перейдите к опции «Уведомления».

Поставьте галку в пункте «Отключить уведомления до перезапуска Firefox». После этого, Push уведомления не будут показываться до отключения браузера Mozilla Firefox.

Для управления оповещениями нажмите на кнопку «Параметры…». В окне «Параметры - Разрешение на показ уведомлений» находится список сайтов, уведомления с которых разрешены или заблокированы.

Если напротив сайта стоит статус «Блокировать», то уведомления с данного сайта не появляются на вашем компьютере, потому что вы ранее блокировали запрос на оправку оповещений с этого сайта.

Если напротив адреса сайта стоит статус «Разрешить», то на вашем ПК будут появляться оповещения с этого сайта.

Вы можете удалить любой сайт из списка при помощи кнопки «Удалить веб-сайт», или удалить все сайты из списка, нажав на кнопку «Удалить все веб-сайты».

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

Для блокировки получения новых сообщений от сайтов, кроме перечисленных в этом списке, поставьте флажок в пункте «Блокировать новые запросы на отправку вам уведомлений».

В завершение настройки порядка получения уведомлений, нажмите на кнопку «Сохранить изменения».

Как удалить пуш уведомления в Mozilla Firefox (2 способ)

Для полного отключения уведомлений в браузере Mozilla Firefox, необходимо войти в скрытые настройки браузера.

Введите в адресную строку выражение: «about:config» (без кавычек). В открывшемся окне нажмите на кнопку «Я принимаю на себя риск!».

В новом окне введите в поле «Поиск» выражение: «dom.webnotifications.enabled» (без кавычек), а затем нажмите на клавишу «Enter».

В этой настройке по умолчанию стоит значение параметра «true». Выделите строку, кликните правой кнопкой мыши, выберите в контекстном меню «Переключить». Значение параметра изменится на «false».

Как отключить пуш уведомления в Яндекс.Браузер

Войдите в настройки Яндекс Браузера, перейдите во вкладку «Сайты».

В разделе «Сайты» перейдите к опции «Запросы на отправку уведомлений». Здесь предлагается три варианта возможных действий:

Показывать запросы на отправку (рекомендуется).
Не показывать запросы на отправку.
Автоматически подписываться на уведомления.

Выберите нужный вариант регулирующий порядок получения push сообщений. Для полного отключения всех пуш уведомлений в Яндекс Браузере выберите пункт «Не показывать запросы на отправку».

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

Откройте вкладку «Разрешена» или «Запрещена», с помощью кнопки «Добавить» добавьте ссылку на сайт в соответствующий раздел.

Как отключить push оповещения в Opera

Войдите в меню браузера Opera, нажмите на пункт контекстного меню «Настройки». Далее выберите раздел «Дополнительно», нажмите на «Безопасность».

В разделе Конфиденциальность и безопасность выберите параметр «Настройки контента». Найдите опцию «Уведомления».

В окне «Уведомления» по умолчанию активирован параметр «Спрашивать разрешения перед отправкой (рекомендуется)».

Здесь нужно добавить сайт в раздел «Блокировать» или «Разрешить».

Как убрать пуш уведомления в Microsoft Edge

Войдите в настройки браузера Microsoft Edge. Выберите «Параметры», В окне «Параметры» нажмите на пункт «Посмотреть дополнительные параметры». В окне «Дополнительные параметры» выберите «Уведомления», а затем нажмите на кнопку «Управление».

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

Выводы статьи

Пользователь может самостоятельно отключить в браузере push (пуш) уведомления, которые он получает на Рабочий стол своего компьютера, разрешив отправку оповещений с конкретного веб-сайта.

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

Push notification приходят прямо в браузер или в ваш смартфон.

Более высокий ctr (нажатия по ссылке) по сравнению с обычными рассылками, так как читатель (подписчик) получит уведомление прямо в своем браузере в нижнем правом углу (или в виде push уведомления в строке состояния в смартфоне).

Вы больше не будете зависеть от службы рассылки писем (если вы не использовали свой почтовый сервер для рассылки своих писем).

Это круто использовать новые технология в своем проекте.

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

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

Не все сервисы бесплатные, у большинства сервисов push уведомления есть базовый тариф, который позволит подписать/отправить 500-1000 подписчиков, но вы не будете хозяином своей жизни.

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

Жирный минус, пользователю придется 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".

На главной странице панели управления найдите ссылку "Let’s Encrypt" и нажмите на него.

Можете оставить e-mail адрес по умолчанию или указать другой.

Поставьте галочку "Include www. as an alternative domain name. " для того, чтобы сертификат работал и с "www"

Нажмите кнопку Install и подождите несколько секунд.

Все, сертификат установлен.

После подготовки вашего сайта, и проделывания нужных нам действий. Вам понадобится настроить 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", а это пошаговая текстовая инструкция:

Зайдите на сайт https://console.developers.google.com

Если вы не разу не создавали проекты, то нажмите ссылку "Create a project", если Вы ранее уже создавали проект, то правом в верхнем углу нажмите на название старого проекта, выйдет меню, в нем найдите ссылку "Create a project" и нажмите на нее.

Выйдет диалоговое окно "New project", напишите латинскими символами название проекта и нажмите кнопку "Create".

Подождите несколько секунд пока проект не создаться, после нажмите на проект (ID) и появится список, в этом списке нам нужен "Project number", запишите его в блокноте и сразу впишите в плагин "Chrome Push Notifications" в строку "Project Number".

Следующий пункт, нажмите на "Use Google API" найдите ссылку "Cloud Messaging for Android" и нажмите на нее. Дождитесь пока появится кнопка "Enable API" и нажмите на эту кнопку.

После нажатия кнопки, у вас должна появится предупреждение и кнопка "Go to Credentials" нажмите эту кнопку.

Следующий пункт, нужно выбрать какой API нужно использовать, нужно выбирать именно "Google Cloud Messaging for Android", а форму вызова API "Web browser" нажмите кнопку "What credentials do I need?"

Можете не менять название ключа, а в строке "Accept requests from these HTTP referrers (web sites)" указать свой сайт, для того, чтобы другие сайты не могли использовать ваш API и нажмите кнопку "Create API key"

Мы почти закончили, запишите или лучше сразу вставьте в плагин ваш API ключ в строку "GCM API Key".

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

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

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

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

Запись добавляется до тега

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

/* */

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

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

Как сделать push уведомление (notification) на сайте

62 оценок, Средняя оценка: 4.9 из 5

Похожие статьи: