При посещении новых сайтов в левом верхнем углу браузера иногда появляется небольшое окошко, в котором запрашивается разрешение на доставку Вам неких уведомлений.
Если пользователь единожды одобрил получение таких уведомлений, позднее в области задач компьютера или мобильного устройства он будет периодически наблюдать появление небольших окошек с сообщением о том, что на этих сайтах появились новые публикации.
Это так называемые push-уведомления, они же web-push – современный инструмент и интернет-маркетологов. И удобнейшее средство информирования пользователей, которые хотят держать руку на пульсе интересующих их событий.
Push-уведомления что это?Push-уведомления – это краткие всплывающиеуведомления, которые появляются на экране обычного компьютера или мобильного телефона и сообщают о важных событиях и обновлениях.
При клике на push-уведомление, которое пришло пользователю, новости сайтов тотчас же открываются в окне , и пользователи в числе первых могут познакомиться с только что выложенной в сеть информацией. А иногда это важно – быть в числе первых пользователей, владеющих полезной информацией.
Рис. 1. Как выглядят Push-уведомления
Пуш-уведомления на сайтах включают владельцы сайтов, а пользователи могут управлять пушами через настройки своего браузера. Если вебмастер не включил push на сайте, то у пользователя нет возможности (или необходимости) их использовать, настраивать и т.п.
В чём заключаются преимущества пуш-уведомлений по сравнению с другими способами доставки свежей информации? Как управлять таким средством информирования в десктопных браузерах Google Chrome, Mozilla Firefox или в аналогичных им? Рассмотрим ниже эти вопросы.
Преимущества push-уведомленийВыгоды реализации push-уведомлений на сайтах для их владельцев, то есть, для вебмастеров очевидны. Дело в том, что немногие средства информирования могут обеспечить 90%-ную доставку сообщений пользователю и почти 50%-ную .
А вот какую пользу получает читатель того или иного сайта?
Push-уведомления для некоторых пользователей могут быть более удобны, чем подписка на обновления сайта по E-mail. Сообщения, приходящие с разных сайтов, не скапливаются в почтовом ящике и не усложняют доступ к личной переписке.
Если в данный момент на прочтение новости у пользователя нет времени, то кликнув на push-уведомление, он может открыть страницу в окне браузера и оставить её до удобного момента. Или отправить в сервис отложенного чтения типа Pocket или Readability.
Одним из недостатков подписки на новости сайтов по E-mail является скопление писем о новых статьях в почтовом ящике пользователя. С пуш-уведомления переполнения в почте не будет.
При недостаточной защите сайта от взлома может случиться так, что база данных подписчиков сайта попадет в руки мошенников, которые первым делом организуют по этой базе (так называемая спам-атака). Тогда каждый владелец электронной почты из этой базы получает такие мошеннические спам-письма. Считается, что с push-уведомлениями в этом плане пользователи более надёжно защищены: никто другой, кроме создателей заинтересовавших сайтов, не сможет побеспокоить пользователей, кто бы что ни взламывал на таких сайтах.
Push-уведомления и RSS-лентаПо части защиты от спама web-push схожи с ещё одним средством доставки свежей информации, опубликованной на том или ином сайте – RSS-лентой. Последняя даже выигрывает в том, что хранит историю сообщений о публикациях сайтов, на которые оформлена RSS-подписка . Тогда как всплывающие уведомления через несколько секунд исчезают навсегда.
Но использование RSS-каналов поставки новостей требует от пользователя самостоятельных действий: ему нужно самому отыскать на каждом сайте кнопку подписки (а у неё нет стандартного расположения) и ввести адрес канала в RSS-ридер. Если такого ридера нет в браузере у пользователя, его ещё нужно отдельно организовать, например, установив расширение, подобрав веб-сервис или прибегнув к использованию соответствующей программы.
Push-уведомления же сами выскакивают и предлагают подписаться, а их реализация обеспечивается штатным функционалом практически любого современного браузера.
Настройка push-уведомлений в Google ChromeРеализация всплывающих уведомлений в Google Chrome и браузерах, построенных на базе такого же движка Blink (например, ), предлагает пользователю совершенно открытый формат подписки, который не требует от него сделать какой-либо выбор.
Пуш-запрос в Гугл Хроме содержит две функциональные кнопки:
В последнем случае при следующих посещениях такого сайта запросы больше не будут появляться.
Есть и третий вариант: нажатие на крестик в окошке запроса позволяет отложить принятие решения (3 на рис. 3). Сайт не будет заблокирован, и через время такой запрос в левом верхнем углу окна Chrome появится снова.
Рис. 2. Как выглядит запрос на push-уведомление в Google Chrome
Настройка push-уведомлений в Мозилле
В Mozilla Firefox (и прочих браузерах на базе такого же движка Gecko) форма запроса на поставку web-push обустроена более хитро, чем в Гугл Хроме, а точнее, со склонением пользователя к конкретному выбору.
Кнопка блокировки уведомлений «Никогда не разрешать» (4 на рис. 3) оформлена мельче и скрыта внутри кнопки «Не сейчас» (3 на рис. 3).
Рис. 3. Как выглядит запрос на push-уведомление в Mozille Firefox
Разрешённые и заблокированные push-уведомления не синхронизируются вместе с профилями браузеров. После установки новой операционной системы, при переходе на другой компьютер, да даже после переустановки самого браузера с зачисткой его остатков при деинсталляции нужно всё начинать по новой – снова отвечать на запросы сайтов, с нуля формировать базу разрешений и блокировок для пуш-уведомлений.
Отписка от web-push и их блокировка
Чрезмерное количество всплывающих сообщений со временем может начать раздражать пользователя. Кроме того, могут поменяться наши интересы.
Как в таких случаях отписаться от неактуальных сайтов или вовсе отключить поставку браузером push-уведомлений? И как, наоборот, разблокировать сайты, ошибочно заблокированные при появлении запроса?
Вы наверняка принимаете оповещения на свою электронную почту: заходите в почтовый клиент и смотрите пришедшие письма. В данном случае эта технология является технологией pull (тянуть), т.е. вы заходите на сайт и "тянете" с него данные, когда они вам нужны.
В случае же с push (толкать) уведомлениями, ресурс проталкивает новые данные вам сам. При этом вы сразу получаете самые свежие данные, ведь в данной технологии нет определенного периода проверки данных, они приходят в режиме онлайн. Используя "пуши" вы не обязательно должны получать уведомления. Через push-технологию можно например синхронизировать данные если они обновились.
Уведомления бывают:
- Браузерные - через push api или через дополнение
- Мобильные - через мобильное приложение
- На PC через приложение, независимо от браузера
Вот так выглядят уведомления разных типов в браузере 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 поддерживает все эти типы оповещений и позволяет делать рассылки абсолютно бесплатно и без ограничений.
Например оповещения на 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
По итогам мы хотим донести до своих читателей, что реализация веб-пушей на вашем сайте покроет лишь 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
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 оповещений полную ежемесячную плату - за бесплатные оповещения.
Мы предоставили вам весомые доказательства того, что оповещения используются на множестве платформ и пользователям нравится такой подход. А если рады пользователи, то оповещения будут восприниматься с позитивной стороны. Пользователи будут получать от вас самую полезную информацию в удобном для них виде, что позволит расширить активную аудиторию вашего ресурса.
Наверняка все, кто пользовался почтой от 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-уведомлений, или web push.
Для сайтов такие уведомления - эффективный способ формирования собственной базы подписчиков. Для того, чтобы стать одним из них, пользователю достаточно просто нажать на кнопку во всплывающем окне браузера. После этого сообщения web push всплывают со звуком и и поверх всех окон на экране компьютера, даже когда браузер не запущен.
Кто их рассылает и зачем это пользователямPush-уведомления активно используют новостные порталы, интернет-магазины, туристические агентства и даже некоторые банки. СМИ таким образом анонсируют новые статьи, интернет-магазины - акции, распродажи или обновления ассортимента; турагентства - актуальные предложения по отелям и турам, банки - рассылки по своим продуктам. Кроме этого, так можно получать уведомления об оплате товара, напоминания о продлении тарифов обслуживания, подтверждение информации о выезде/вылете (в случае с турагентствами), и другие оповещения.
Главный плюс push-уведомлений - в отличие от e-mail-рассылок, такие сообщения более адресные. Каждому зарегистрированному подписчику присваивается шифрованная строка (токен). Токен уникален для каждого домена, ключа и типа устройства. Благодаря этому, пользователь, который подписался на web push с рабочего ПК, не будет получать дополнительные уведомления на свой мобильный телефон или личный компьютер. Взять базу токенов чужих подписчиков поэтому тоже невозможно: для каждого сайта токен будет свой.
Почему все жалуются на web pushНедостатки push-уведомлений вытекают из их же достоинств: не все компании используют этот способ по назначению, беспрерывные текстовые сообщения с однотипной рекламой превращаются в спам. Если у пользователя слишком много подписок на уведомления с разных сайтов, в какой-то момент это начинает раздражать.
Как отключить пуш-уведомления в браузере, если они вам не нравятся: В Google Chrome:Запустить бразуер Chrome на компьютере, в правом верхнем углу окна нажать на три точки и перейти в «Настройки»;
В нижней части страницы кликнуть «Дополнительные»;
В разделе «Конфиденциальность и безопасность» выбрать «Настройки контента»;
Выбрать «Уведомления»;
Выбрать подходящий вариант:
1) заблокировать все уведомления - отключить параметр «Спрашивать разрешение перед отправкой».
2) заблокировать уведомления от определенного сайта - рядом с надписью «Блокировать» нажать «Добавить», ввести адрес страницы и снова выбрать «Добавить»;
Для того, чтобы вновь разрешить уведомления от определенного сайта, рядом с надписью «Блокировать» надо нажать «Добавить», ввести адрес страницы и снова выбрать «Добавить».
В Safari:Скрыть запросы сайтов на отправку уведомлений в Safari можно, выбрав меню Safari > «Настройки» > «Веб-сайты» > «Уведомления». В последнем разделе надо снять флажок «Разрешить веб-сайтам запрашивать разрешение на отправку pushуведомлений». С этого момента Safari не будет спрашивать вас при посещении веб-сайтов, которые могут отправлять уведомления. Подключить уведомления снова при необходимости можно также в настройках браузера.
В «Яндекс-браузере»:Для создания этого браузера использовался такой же движок, как в Chrome, поэтому алгоритм действий здесь будет почти одинаков. Для того, чтобы отключить уведомления, надо перейти в «Настройки», затем открыть «Дополнительные», найти в них раздел «Личные данные» и кликнуть по кнопке «Настройки содержимого». В пункте «Уведомления» после этого надо выбрать «Не показывать уведомления с сайтов» и нажать «Готово».
В Opera:Нажать на иконку «Меню» со значком Opera, зайти в «Настройки» и в списке разделов выбрать «Сайты». После этого надо в левой части окна найти пункт «Уведомления» и отметить пункт «Запретить сайтам показывать системные уведомления».
В Mozilla Firefox:Firefox - исключение из всех браузеров: здесь также можно отключить уведомления, отметив галочкой пункт «Не беспокоить» в настройках содержимого, но блокироваться они будут только до того, как вы перезапустите браузер. Пользователям, желающим раз и навсегда отключить push-уведомления, надо открыть в браузере новую вкладку и ввести в адресной строке ввести команду about:config.
После этого браузер покажет предупреждение о риске изменения настроек - нужно подтвердить, что вы его принимаете. Затем набрать в строке поиска dom.push.enabled. В появившемся окне переключить значение параметра с true на false. Это значит, что о push-уведомлениях можно забыть.
сайт 15.12.2017
Доброго времени суток, уважаемый посетитель.
Мгновенные уведомления с сайта о появлении нового материала, а также прочих событиях, что может быть лучше?! Данная технология пришла к нам из мира мобильных технологии – изначально мгновенные уведомления были лишь уделом мобильных приложений, но со временем «фича» была внедрена и в браузеры (мобильные, а затем и десктопные).
Оповещения увеличивают количество посетителей на ваш сайт, и являются более эффективными, нежели E-Mail подписка. Т.е. если пользователь посетил ваш сайт, одобрил запрос на включение оповещений от сайта, то он их будет видеть практически всегда, и для этого не надо совершать каких-либо лишних телодвижений, как это традиционно бывает с E-Mail рассылкой.
Сразу хочу заметить, что Web Push оповещения могут быть интегрированы только на те сайты, которые работают по защищённому протоколу (https) – таково требование технологии.
Что собой представляет Web PushКогда пользователь заходит на сайт, на котором имеется сервис мгновенных сообщений, то будет отображено ненавязчивое сообщение о том, что сайт запрашивает разрешение на отправку уведомлений. Дизайн данного уведомления зависит от используемого браузера.
На изображении приведён пример с предложением подписаться на оповещения с сайта в десткопном браузере Google Chrome и Mozilla Firefox.
А вот так этот же запрос выглядел в мобильном браузере Chrome for Android до версии 63.0.3239.107.
Впоследствии разработчики мобильного браузера Google пересмотрели подход к выводу запроса, сделав его более агрессивным. Отныне он перекрывает контент, пока пользователь не сделает выбор.
Понимая, что это может вызывать раздражение у посетителей, в OneSignal поступили следующим образом: при заходе на сайт с мобильного браузера Google Chrome for Android будет выводиться всплывающее окно, в котором запрашивается разрешение на подписку (текст запроса настраивается). Если пользователь соглашается, то уже выводится стандартный запрос на включение оповещений в браузере.
Это распространяется только на мобильный браузер Google Chrome for Android, во всех остальных браузерах алгоритм вывода запроса подписки на оповещения остаётся неизменным.
Когда пользователь соглашается на приём оповещений, то можно задать «приветственное» оповещение, смысл которого сводится к тому, что вы были подписаны на оповещения о новых материалах сайта. И при их появлении вы будете оповещены соответствующем уведомлением.
Как вы можете видеть, в мобильных браузерах оповещения зачастую выводятся в панели уведомлений, а в десктопных (компьютерных) браузерах – они всплывают в правом нижнем углу.
Сами оповещения также настраиваются: можно установить картинку, заголовок, текст сообщения, и открытие определённой страницы при нажатии по оповещению.
Как подключить Web Push на сайтНеобходимо понять, что Web Push — это сервис, который едва ли можно реализовать за счёт просто установки плагина и подобных манипуляций. Потому то мы будем пользоваться соответствующим сторонним сервисом. В данном случае речь пойдёт о сервисе OneSignal, с помощью которого наделим наш сайт описанным выше функционалом. Почему именно он? Потому что он полностью бесплатен, не отправляет пользователям никакой рекламы и прочего.
Едва ли вообще пользователи будут знать, что Web Push вашего сайта реализован с помощью сервиса OneSignal. В этом и заключается его неоспоримое преимущество.
Каковы его минусы? Они тоже имеются. Интерфейс данного сервиса англоязычный, и к нему надо будет привыкнуть, если вы планируете формировать оттуда оповещения, которые будут отправляться подписавшимся на них пользователям.
Для интеграции в WordPress имеется официальный плагин, который, однако, мне совершенно не понравился. Его размер составляет 6.5мегабайт, что весьма немало… меня уже это ототкнуло от его использования.
Я интегрировал на сайт Web Push «ручками», прочтя руководство по интеграции (на английском), которое на сайте сервиса изложено довольно подробно.
А сами сообщения я формирую через личный кабинет на сервисе.
Об этом способе интеграции (без плагина) я и хочу вам рассказать. Стоит отметить, что воспользовавшись описываемым способом интеграции, можно наделить Web Push функционалом не только сайт на WordPress, но и работающий на любом другом движке, или вовсе состоящий из статических html страниц. Поистине универсальный вариант!
Примечание: там ещё имеется кнопка Apple Safari , и у вас может возникнуть закономерный вопрос: а как же данный браузер? Не волнуйтесь, его мы добавим в одном из следующих шагов.
- manifest.json
- OneSignalSDKWorker.js
- OneSignalSDKUpdaterWorker.js
Распакуйте эти файлы.
https://sitename.ru/manifest.json
https://sitename.ru/OneSignalSDKWorker.js
https://sitename.ru/OneSignalSDKUpdaterWorker.js
var OneSignal = window.OneSignal || ; OneSignal.push(["init", { appId: "СЮДА впишите присвоенный вам App ID", autoRegister: true, notifyButton: { enable: false }, persistNotification: true, safari_web_id: "", welcomeNotification: { "title": "Уведомления включены", "message": "При появлении нового материала на сайте вы будете уведомлены" // ,"url": "" }, promptOptions: { actionMessage: "Желаете получать мгновенные уведомления о новых статьях на сайте?", acceptButtonText: "Да", cancelButtonText: "Нет" } }]);
Не забудьте за место СЮДА впишите присвоенный вам App ID вписать тот код, что был присвоен в вашем случае, и отображается в том окне, который был высвечен на 9 шаге.
Title и message отвечают за «приветственное» сообщение при подписке, вы можете изменить текст в этих строках на своё усмотрение.
А параметры actionMessage, acceptButtonText, cancelButtonText отвечают за текст запроса на подписку, что выводится в мобильном браузере Google Chrome for Android и больше нигде.
Сохраните файл header.php с вписанным вами кодом.
Примечание: стоит отметить, что данный запрос отображается один раз. И если вы согласились с ним, то впоследствии он не будет появляться, а будет осуществляться автоматическая подписка. Не поможет даже очистка истории браузера.
Я просто сам столкнулся с такой особенностью технологии, экспериментируя с интеграцией на сайт. Так что если вы не видите запроса, то не стоит «бить тревогу» и думать что что-то не работает, просто попробуйте зайти с другого браузера, с которого ранее не осуществлялся доступ на сайт.
Поздравляю – вы первый подписчик на оповещения со своего сайта:-) Но это ещё далеко не всё.
Web Push будет действовать (подписка, получение) в браузере Google Chrome и основанных на коде Chromium: Opera, Яндекс Браузер и т.д, а также Mozilla Firefox.
Для включения поддержки Apple Safari сделайте следующее:
В личном кабинете OneSignal в левом меню нажмите по ссылке App Settings , в открывшемся меню нажмите на кнопку Configure , что располагается напротив пункта Apple Safari .
В открывшемся окне введите имя вашего сайта и впишите его URL адрес. По желанию вы можете загрузить логотип сайта, который будет отображаться в оповещении. Для этого поставьте галочку у пункта I’d like to upload my own notification icons и загрузите графический файл. Требование к логотипу – разрешение 256 на 256 пикселей, формат png. Сделав всё необходимое — нажмите кнопку Save .
Вас перебросит на страницу App Settings , но под надписью Apple Safari будет высвечен Web ID .
Его необходимо скопировать и вставить в тот код, что мы ранее вставляли в файл header.php:
SistNotification: true, safari_web_id: "", welcomeNotification: { "title": "Уведо...
SistNotification: true, safari_web_id: "СЮДА вписать присвоенный Apple Safari ID", welcomeNotification: { "title": "Уведо...
Сохраните введённые изменения.
Всё, интеграция и настройка закончена. Если что-то не понятно, то задавайте вопросы, а также ознакомьтесь с тем, как код вписан на этом сайте. Единственное исключение на данном сайте – я строчку кода
переместил в так называемый «подвал» (в исходном коде страницы она отображается внизу).
Как формировать и отправлять Web Push подписавшимсяС кодом и интеграцией мы разобрались, теперь дело за малым – создать рассылку.
Там нас будет ждать мастер, с помощью которого мы создадим рассылку.
Иконки (Icon — миниатюра, отображающаяся рядом с текстом) поддерживает Google Chrome, Mozilla Firefox (и браузеры на основе Chromium), большую картинку (Image ) только Chrome и только с версии 56. Для браузера Safari нет возможности указать иконку, в приходящих оповещениях всегда будет отображаться иконка, что была загружена на 16 шаге инструкции по подключению Веб Пуш на сайт. Такова реализация поддержки Пуш уведомлений в браузере Сафари.
Можете игнорировать ввод большой картинки (Image ), ограничиваясь указанием иконки (Icon ).
Ещё стоит сказать про поле Time to Live – данная опция отвечает за время жизни сообщения, по умолчанию оно равняется трём дням. Если за это время смартфон\браузер не сможет выйти в интернет, то сообщение ему не будет доставлено вовсе.
Имеет смысл увеличить данный промежуток. Я увеличиваю данный порог до 128 дней (введя 11111111 в поле). Для его увеличения просто начните вводить цифры и в реальном времени будет выводиться устанавливаемый порог.
Введя все данные, нажмите Next .
Для продолжения нажмите кнопку Confirm .
А вас перебросит на страницу статистики, где вы сможете наблюдать, сколько всего сообщений было отправлено, какие из них достигли цели, сколько раз подписчики на него нажали и т.д. Очень удобно и наглядно.
Стоит отметить, что в левом меню вы можете выбрать пункт Templates и создать шаблон рассылки, дабы не вводить каждый раз повторяющуюся информацию при создании очередной рассылки.
Краткий итогВ материале мы подробно рассмотрели преимущества web push, процесса установки сервиса мгновенных уведомлений на сайт, и его использования на примере полностью бесплатного сервиса от OneSignal.
Если имеются вопросы, то в комментариях вы можете уточнить все тонкости и нюансы.
Пожертвование сайту сайт (cбор пожертвований осуществляется через сервис Яндекс Деньги)
