Web Push уведомления. Что это и зачем? Как отключить браузерные Push-уведомления Но прежде, небольшой пример

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

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

Это так называемые 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 (например, ), предлагает пользователю совершенно открытый формат подписки, который не требует от него сделать какой-либо выбор.

Пуш-запрос в Гугл Хроме содержит две функциональные кнопки:

«Разрешить» для одобрения доставки сообщений (1 на рис. 2) и

«Блокировать» для добавления сайта в перечень заблокированных (2 на рис. 2).

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

Есть и третий вариант: нажатие на крестик в окошке запроса позволяет отложить принятие решения (3 на рис. 3). Сайт не будет заблокирован, и через время такой запрос в левом верхнем углу окна Chrome появится снова.

Рис. 2. Как выглядит запрос на push-уведомление в Google Chrome Настройка push-уведомлений в Мозилле

В Mozilla Firefox (и прочих браузерах на базе такого же движка Gecko) форма запроса на поставку web-push обустроена более хитро, чем в Гугл Хроме, а точнее, со склонением пользователя к конкретному выбору.

На кнопке «Разрешить уведомления» (1 на рис. 3) сделан акцент цветовой индикацией,

а в качестве альтернативы ей противопоставляется кнопка отложенного решения «Не сейчас» (2 на рис. 3).

Кнопка блокировки уведомлений «Никогда не разрешать» (4 на рис. 3) оформлена мельче и скрыта внутри кнопки «Не сейчас» (3 на рис. 3).

Рис. 3. Как выглядит запрос на push-уведомление в Mozille Firefox

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

Отписка от web-push и их блокировка

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

Как в таких случаях отписаться от неактуальных сайтов или вовсе отключить поставку браузером push-уведомлений? И как, наоборот, разблокировать сайты, ошибочно заблокированные при появлении запроса?

Правда жизни такова:

Это реально сложно получать трафик на сайт.

Но знаете что еще хуже?

90% посетителей, побывавших на вашем сайте не вернутся больше никогда.

Эксклюзивный бонус: Нажмите здесь чтобы скачать чеклист по созданию магнетических текстов. Статьи, написанные по этому чеклисту будут словно магнитом удерживать внимание читателя (нажмите чтобы скачать ).

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

Но не отчаивайтесь, есть решение:

Установите на свой сайт браузерные пуш уведомления .

Вот в чем фишка:

Пуш уведомления для сайта позволяют быть на связи с вашими посетителями.

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

Да и просто, это хорошая альтернатива email рассылке.

В этой статье вы узнаете:

• В чем преимущество пуш уведомлений
• Стоит ли использовать эту относительно новую технологию
• Список лучших сервисов пуш уведомлений
• Как подключать push`ы на свой сайт

Но прежде, небольшой пример...

Компания Extra - один из крупнейших ритейлеров на Ближнем Востоке.

С помощью пуш уведомлений они смогли увеличить продажи мобильным пользователям в 2 раза:

Если вы думаете, что на этом все - вы глубоко ошибаетесь.

Помимо этого, доля повторных покупок выросла в 4 раза (!!!).

Как итог, маркетологи компании Extra признали пуш уведомления как самый эффективный инструмент удержания клиентов.

Что такое push уведомления для сайта?

Все еще не уверены, что такое push уведомления для сайта?

Все очень просто:

Заходя на какой-нибудь веб ресурс вы можете увидеть вот такое всплывающее окно:

Пример запроса на получение push уведомлений

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

Сообщения появляются в правом углу экрана. При этом браузер может быть свернут или даже закрыт.

Пример пуш уведомления:

Браузеры, поддерживающие Push уведомления

Первой технологию пуш уведомлений в браузере начала поддерживать Safari . Затем, в апреле 2015 года ее внедрили в Chrome версии 42 .

И наконец, в начале 2016 года пуш уведомления начали поддерживаться в браузере Firefox версии 44 .

На данный момент уже более 75% всех браузеров поддерживают отправку Push уведомлений.

Почему пользователям стоит подписываться на пуш уведомления

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

1. Удобство прежде всего

То, что вы должны уяснить как дважды два:

Люди покупают на тех сайтах, которые предлагают лучший сервис. Это же касается лояльности читателей.

Но как быстро и просто сделать сайт удобным для посетителей?

Ответ очевиден:

С помощью пуш уведомлений.

Представим, я подписался на обычные обновления вашего сайта...

Мне придется частенько открывать свой почтовый ящик в ожидании email письма от вас.

В случае с push уведомлениями все намного проще.

OneSignal

После этого в левой колонке вашей админ зоны появится раздел OneSignal Push.

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

Перед вами откроется окно, в котором нужно перейти в раздел Configuration:

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

Введите номер проекта в поле Google Project Number в разделе Configuration. API ключ вам нужно сохранить (еще понадобится).

Там же укажите API ключ от Google проекта и наличие SSL сертификата на вашем сайте.

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

Зачем это нужно?

Дело в том что push уведомления поддерживаются только на https сайтах. Однако, сервис OneSignal решает проблему тем что создает для вас субдомен у себя.

В качестве субдомена можете использовать адрес вашего сайта. Например, вместо сайт - я сделал site4business.onesignal.com

В подразделе Modify Site рассказывается о видах внедрения пуш уведомлений. В подразделе Safari Push все аналогично предыдущим шагам.

И наконец, расположение кнопки подписки и ее текст вы можете изменить в разделе Configuration.

Имейте ввиду что для http доступна подписка на уведомления только при помощи кнопки. Ее дизайн вы можете свободно изменять.

А всплывающие попап окна доступны только для https сайтов.

PushCrew

Для начала установите плагин PushCrew.

После этого, заведите аккаунт на сайте сервиса .

И наконец, в разделе Customize for desktop вы можете настроить внешний вид всплывающих окон.

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

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-уведомлениях можно забыть.

Как отключить пуш (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 (пуш) уведомления, которые он получает на Рабочий стол своего компьютера, разрешив отправку оповещений с конкретного веб-сайта.

сайт 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 страниц. Поистине универсальный вариант!

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

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

Прощёлкав до последнего окна, нажмите на располагающуюся там кнопку Add a New App .

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

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

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

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

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

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

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

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

• manifest.json
• OneSignalSDKWorker.js
• OneSignalSDKUpdaterWorker.js

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

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

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

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

Но это ещё не всё. Теперь вам необходимо добавить код непосредственно в шаблон сайта. Если это WordPress, то перейдите в папку (\wp-content\themes\ ), где располагается используемая вами тема, и отыщите там файл header.php . Откройте данный файл на редактирование и впишите где-нибудь между тегами … следующий код:

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 с вписанным вами кодом.

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

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

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

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

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

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

Для включения поддержки 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 подписавшимся

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

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

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

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

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

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

Иконки (Icon — миниатюра, отображающаяся рядом с текстом) поддерживает Google Chrome, Mozilla Firefox (и браузеры на основе Chromium), большую картинку (Image ) только Chrome и только с версии 56. Для браузера Safari нет возможности указать иконку, в приходящих оповещениях всегда будет отображаться иконка, что была загружена на 16 шаге инструкции по подключению Веб Пуш на сайт. Такова реализация поддержки Пуш уведомлений в браузере Сафари.

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

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

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

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

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

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

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

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

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

Краткий итог

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

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

Пожертвование сайту сайт (cбор пожертвований осуществляется через сервис Яндекс Деньги)