Как отключать пуш(push) -уведомления в Yandex браузере, Chrome, Firefox и Opera. Push-уведомление: что это такое и как отключить Как PushAll решает проблему

15 апреля Google Chrome выпустил протокол push-уведомлений от сайтов - без необходимости ставить дополнительные приложения или плагины. Основатель сервиса по мобильному маркетингу Jeapie Александр Михайленко написал для ЦП колонку с рассказом о новой технологии, методах использования и преимуществах для владельцев сайтов.

15 апреля 2015 года Google выпустила новую 42-ю версию Chrome, добавив в браузер ряд нововведений, включая предустановку закладок на стартовый экран браузера и поддержку Push API .

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

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

В этой колонке я решил расписать анатомию Chrome оповещений и опубликовать инфографику, которую наша команда специально подготовила. Уверен, что эта технология в ближайшие годы станет трендом и существенно потеснит с рынка RSS, email-рассылки и даже подписку на соцсети. Эти сообщения объединяют в себе лаконичность, высокую читаемость, защиту от спама и возможность персонализации.

Для тех, кто не любит долго рассматривать картинки - попробовать как это работает «на себе» в 2 шага (подписаться на push и отправить себе уведомление) можно .

Итак, браузерные push-уведомления - это короткие сообщения от сайта пользователям. Они приходят прямо на рабочий стол компьютера (Windows, OS X, Linux) или lockscreen Android-устройства, даже если браузер полностью закрыт. Для подписки и получения рассылок не требуется установка каких-либо дополнительных плагинов либо приложений.

Подчеркну, на iOS это не работает и в ближайшее время скорее всего не заработает. Apple выдала протокол браузерных push-уведомлений еще в 2013 году для Safari в OS X, на iOS он не распространился.

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

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

Уникальным идентификатором пользователя является так называемый токен - шифрованная строка. Токен будет уникальным для каждого устройства, домена и ключа. Это означает, что утечка данных подписчиков технически невозможна, впрочем, как и попытка взять базу из одного собственного проекта и перенести ее на второй. Один и тот же пользователь с одного и того же устройства зайдя и подписавшись, к примеру, на siliconrus.com и tjournal.ru, получит абсолютно разные токены.

Каждое push-сообщение имеет в себе зашитую произвольную ссылку. При клике на сообщение открывается Chrome и вкладка с соответствующей страницей. Таким образом пользователя можно направлять на отдельные лендинги либо страницы с любым типом контента. В своем сервисе мы также добавляем к ссылке UTM-метки, чтобы пользователей, которых вы вернули при помощи push, можно было отследить.

На данный момент push-канал показывает отличные результаты по подписке и количеству открытий. Впрочем, учитывая удобство управления подписками и получением уведомлений, мы считаем, что именно за таким способом коммуникации будущее в Web.

Для установки push на сайт (в виде автоматического диалогового окна) Google требует установки SSL-сертификата и перевода домена на HTTPS-протокол. Напомним, что «корпорация добра» уже пару лет евангелизирует SSL и даже обещала добавки к SEO-рангу за сертификат. Понимая, что большинству небольших сайтов это будет не по силам в краткосрочной перспективе, мы создали у себя систему, которая позволяет и сайтам на http подключиться к рассылкам push. В таком случае окно подписки всплывет при нажатии на специальный виджет.

В целом процесс подключения по сложности аналогичен установке Google Analytics на сайт - нужно вставить пару строчек кода в шаблон сайта и подгрузить файл push-воркера в корень.

Если говорить о конкретных цифрах: первым нашим пользователем стал стартап Poster . Ребята получили конверсию подписки среди новых посетителей порядка 15% и планируют в ближайшем релизе добавить push-уведомления по API в свою POS-систему. Наш API позволяет создавать полный white-label и включать push как часть своего продукта платформам, поставщикам CRM и решений, агентствам.

В качестве итога могу сказать, что на данный момент можно отлично дополнить функциональность своего сайта или сервиса этой технологией, дать дополнительную ценность пользователям и опередить массовый рынок. Реальность устройства Chrome Push местами сильно отличается от той скудной документации, которую можно найти по этой теме. Мы постараемся восполнить эти пробелы на глобальном рынке, а также написать ряд статей «сделай сам» для рунета.

Google Chrome начиная с версии 42 поддерживает Push API через сервера Google, используя GCM Вы наверняка уже видели эти запросы для доступа к уведомлениям. Если разрешить доступ, сайт сможет отправлять вам уведомления. Эта функция совсем новая, и о ней мало кто знает, однако, по моему мнению, у нее уже есть большие недостатки:

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

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

Немного теории Основную статью по которой я собственно делал эту функцию можно найти
Если вкратце, то браузер создает Service-Worker (доступен с Chrome 40), это фоновый процесс на JS. Он не постоянно работает в фоне, а откликается на различные запросы извне. Например, на приход Push-сообщения. Конечно же, он не требует открытой страницы. Более того, он работает даже если браузер закрыт (ну не совсем закрыт, а в фоновом режиме.)

При приходе Push-сообщения, браузер показывает уведомления. Вот и все. Это позволяет полностью реализовать прием Push-уведомлений без каких-либо приложений, более того, это работает и на андроиде в мобильном хроме! Из явных недостатков можно выделить на данный момент то, что нельзя передать в push-сообщении полезную нагрузку, т.е. само сообщение. Google объясняет это проблемами безопасности, и сообщает, что в Chrome 44 проблема полностью решена и браузер сможет принимать данные напрямую. Также, по некоторым данным, если браузер был закрыт, то до него не дойдет запрос. Эта проблема решаема тем, что можно вывалить все уведомления, которые не были подтверждены при получении любого следующего сообщения.Как PushAll решает проблему Вы можете отправлять уведомления через Push API даже без сайта вовсе. То есть вы можете создать канал и отправлять уведомления вручную, либо с сервера через curl, либо подключив RSS-ленту. В данном случае пользователь разрешает доступ к отправке сайту PushAll.
При этом разработчику не надо задумываться кому он отправляет уведомление. На приложение под Android, на дополнение хром, или сразу через Push API. Он может отправить сообщение десятку пользователей, а на деле оно уйдет на каждое из 2-3 устройств каждого пользователя. В дальнейшем это будут и другие браузеры, и другие платформы, такие как iOS и WP.Тестирование Функция была написана буквально вчера и поэтому требуется тестирование.

Для теста уведомлений через Push API нужно зайти на сайт PushAll.ru и войти используя аккаунт Google.

Сразу после входа вы попадете в каталог каналов. Сверху справа есть переключатель, включающий новую функцию.

После включения, хром запросит у вас доступ к уведомлениям. После этого надо перейти в раздел профиля и «пингануть» устройство

Отпишите мне в личку, или в комментариях, как работают уведомления. У некоторых были проблемы с работой уведомлений, и мне хотелось бы исправить ситуацию. Также проверьте уведомления на вашем Android смартфоне. Как протестируете, думаю найдете парочку интересных каналов в каталоге.

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

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

Зарегистрироваться.
Войти
Подписаться
Включить Push API уведомления в браузере.

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

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

Что такое push-уведомления

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

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

Что такое push-уведомления? Этим вопросом широко стали интересоваться после внедрения корпорацией Apple для iOS 3 сервиса передачи пользователю быстрых уведомлений APNS (Apple Push Notification Service). Стоит отметить, что до "Яблока" технология уже была внедрена Google для Android-устройств - практически на год раньше.

Мобильное push-уведомление

Таким образом, для смартфонов от разных корпораций действуют свои определенные сервисы пуш-уведомлений. Кратко коснемся их всех. Как уже говорилось, сервис от "Эпл" называется APNS. Он функционирует также для браузера "Сафари" и OS X. Push-уведомления для iPhone и iPad доступны в следующим многообразии:

badges - на значке-иконке приложения в меню появляется кружок-символ с количеством новых уведомлений или иной информацией;
banners - в верхней части экрана или на вспыхивающем дисплее в спящем режиме появляется шторка с какой-либо информацией (обычные баннеры исчезают автоматически, а с предупреждениями следует провести определенные действия);
audio, audio/banners - о новом событии пользователя оповещает звук-уведомление (можно настроить его появление на пару с баннером).

Самая первая (2008 год) разработка таковых уведомлений от Google для андроидов называлась C2DM (Cloud to Device Messaging). В 2012 году ее сменила GCM (Google Cloud Messaging). Именно она и позволяет появляться push-уведомлению в приложениях от Chrome. В известной своей открытостью ОС Android нет стандартных форм для "пушек" - они, при согласии на это пользователя, появляются такими, какими их запланировали разработчики того или иного приложения - баннер, подобный айфоновскому, строка в верхней части экрана, окошко в выпадающей "шторке" и т. д.

toast - кликабельный 10-секундный баннер в верхней части экрана;
live title - значок с числом уведомлений на иконке приложения;
raw - произвольная информация от определенной (чаще всего игровой) мобильной программы.

Пуш-уведомления в браузере

Отличие таковых push-уведомлений для стационарных ПК и ноутбуков от мобильных одно - сообщения высылаются не от приложения, а от сайта. Ответственны за их отправку сервисы GCM и APNs (от "Гугл" и "Эпл" соответственно).

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

Отключение push-баннеров в iPhone

Чтобы избавиться от всех назойливых "пушек" сразу, необходимо ползунком активировать в "Настройках" режим "Не беспокоить". Однако в этом случае вы не услышите и входящий звонок, и уведомление о СМС. Если вы хотите отключить push-уведомления от какого-либо конкретного приложения, то вам пригодится следующая схема: "Настройки" - "Уведомления" - выбор нужной программы. На "Допуске уведомлений" делаете ползунок неактивным.

Отключение пуш-уведомлений для Android

Отключение "пушек" на андроидах тоже совсем не сложное: зайдите в "Настройки", затем в "Диспетчер приложений", найдите ту программу, уведомления от которой вам не нужны. Уберите галочку с "Выводить уведомления". Подтвердите свое решение во всплывающем окошке.

Отключение "пушек" в браузере

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

В Google Chrome это можно сделать так:

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

Другой вариант - нажать правой кнопкой мыши на пришедшее вам уведомление и выбрать пункт "Отключить оповещения от..."

В "Яндекс.Браузере" push-уведомления от "Вконтакте" и "Яндекс.Почты" можно убрать на главной странице "Настроек" в разделе "Уведомления" - "Настроить". Тут нужно просто убрать галочку с "Уведомления включены". Для других сайтов в "Настройках" следует отыскать "Дополнительные настройки", затем "Личные данные" и "Настройку содержимого". В "Уведомлениях" вы можете как отключить все "пушки", так и сделать исключения для некоторых сайтов. В "Сафари" следует зайти в "Настройки" - "Уведомления". Затем найти интересующий сайт и поставить галочку на "Отказать".

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

С 2015 года начала стремительно набирать популярность технологияPush API от Chrome. Все чаще, заходя на различные новостные (и не только новостные) сайты, посетителям вылетает вот такой системный фрейм с запросом:

Системное окно Google Chrome, запрашивающее разрешение на доставку уведомлений от сайта.

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

Однако сегодня эта технология еще довольно молода и руководств по её использованию мало не только в отечественном интернете, но и в зарубежном. Для примера далеко ходить не надо - даже сам “Google”, когда анонсировал Push API, выпустил до слёз скудный пресс-релиз. И только сейчас, несколько часов покопавшись в гугловских FAQ для разработчиков, можно собрать информацию, чтобы собрать худо-бедно работающие скрипты для отправки Push-уведомлений своим читателям.

Как же сделать такие Push-уведомления для своего сайта? Тут есть два пути: использовать сторонние сервисы (они уже есть и некоторые из них очень даже неплохи) или создать собственное решение. Поскольку я сторонник минимального использования сторонних сервисов на сайте, то наш путь вГородебыл предрешен.

Но, ради справедливости, стоит замолвить пару словечек и о внешних решениях. Признаюсь, я не очень изучал этот рынок (причина названа чуть выше), однако нельзя не упомянуть сервисOneSignal, самая привлекательная черта которого в том, что их услуги абсолютно бесплатны - зарабатывают они на продаже данных о посетителях клиентского сайта. Так же есть сервисJeapie , на их стороне очень грамотный маркетинг и, как правило, хорошие отзывы. Однако стоит отметить, что в свое время от их услуготказаласьМедуза - Платформа была попросту не готова к тому количеству пушей, которые приходилось отправлять для огромной аудитории Медузы.

Реализация. Получение учетных данных от Google.

В исходных данных сайт, написанный наRails 3.2.8 и задача сделать на нём пушер уведомлений для Chrome.

Первым делом необходимо перевести сайт на HTTPS (защищённый гипертекстовый протокол), то есть сделать для своего сайта SSL-сертификат. Без него пуши работать не будут (не проверял с обычным http, но так везде пишут). О том, что такое SSL, с чем его едят, как поставить сертификат на сервер и подключить его, я писать не буду - интернет пестрит подобными статьями. Лишь порекомендую для этих целейStartSSL . Это хороший Удостоверяющий центр, с которым дружат все известные мне браузеры, с нарочито простой процедурой регистрации и верификации (нужно лишь минимально знать английский язык) для получения абсолютно бесплатного SSL-сертификата начального уровня, в который можно включить еще пять(sic!) субдоменов.

Итак, мы получили сертификат и соответствующим образом настроили свой Nginx или Apache. Теперь в адресной строке браузера рядом с адресом нашего сайта горит зелёненьким симпатичнейший замочек, надписьhttps://, и, если вам не жалко денег, еще название организации.

Далее идем вGoogle Сloud Platform , где регистрируем новый проект, назвав его, например, MySite-Push.

Создание нового проекта в Coogle Cloud Platform

Через несколько секунд, когда проект будет создан, через разделПодключение к API Google , по ссылкеВключить и настроить API переходим в раздел, где целый список методов API для всех сервисов Google. Там мы должны включить методGoogle Cloud Messaging из раздела Mobile API.

МетодGoogle Cloud Messaging из раздела Mobile API

Скорее всего, при подключении к методу, Google попросит зарегистрировать дополнительные данные. Например, попросит уточнить откуда будет вызываться API, тогда мы указываем необходимый нам тип обработчика (например, Веб-сервер).

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

Сгенерированный закрытый ключ для доступа к Google API

После нажатия кнопкиГотово мы окажемся на странице, где нужно будет указать домен и подтвердить на него права через инструменты Search Console. Об этом тоже довольно много статей в интернете, да и сама процедура интуитивно понятна. Так что не будем здесь останавливаться.

По сути, нам больше от Coogle Cloud Platform ничего и не надо. Ключ и идентификатор.

Реализация. Первичная настройка сайта.

Теперь в корневую папку нашего сайта нам нужно добавить файлmanifest.json, в котором будет указано следующее:

{ "name": "mysite.ru Push test", // Название сайта "display": "standalone", // Указываем, где показывать уведомления "gcm_sender_id": "258466066904" // Тот самый идентификатор приложения в Google Cloud Platform }

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

Ну и добавить в секцию мета-тег со ссылкой на манифест:

Теперь там же, в корневой папке, создаем файлpush.js, куда вписываем вот такой код:

"use strict"; function SendPushMe() { if ("serviceWorker" in navigator) { console.log("Service Worker is supported"); navigator.serviceWorker.register("/sw.js").then(function() { return navigator.serviceWorker.ready; }).then(function(reg) { console.log("Service Worker is ready:^)", reg); reg.pushManager.subscribe({userVisibleOnly: true}).then(function(sub) { console.log("endpoint:", sub.endpoint); $.get("https://mysite.ru/createpushadresat?adresat=" + sub.endpoint, function(data) {}); }); }).catch(function(error) { console.log("Service Worker error:^(", error); }); } }

Что делает этот код? При вызове метода SendPushMe() он проверяет поддерживает ли браузер подписку на пуши. Затем, если поддерживает (в лог-консоли разработчика появится сообщение “Service Worker is supported ”, в противном случае там же появится сообщение об ошибке), попытается зарегистрироватьService Worker , который скоро появится по адресу/sw.js. Именно в этот момент пользователь увидит запрос от браузера на подтверждение действия. Затем, если пользователь даст согласие, воркер будет зарегистрирован, а по адресуhttps://mysite.ru/createpushadresat GET-запросом в переменнойadresat будет передан уникальный идентификатор браузера. Он же отобразится в лог-консоли разработчика.

Теперь создадим Service Worker. Это будет файлsw.js в корневой папке:

"use strict"; self.addEventListener("install", function(event) { event.waitUntil(self.skipWaiting()); }); self.addEventListener("push", function (event) { event.waitUntil(fetch("/latest.json").then(function (response) { if (response.status !== 200) { console.log("Latest.json request error: " + response.status); throw new Error(); } return response.json().then(function (data) { if (data.error || !data.notification) { console.error("Latest.json Format Error.", data.error); throw new Error(); } var title = data.notification.title; var body = data.notification.body; var icon = "https://mysite.ru/my_beautiful_push_icon.png"; return self.registration.showNotification(title, { body: body, icon: icon, data: { url: data.notification.url } }); }).catch(function (err) { console.error("Retrieve data Error", err); }); })); }); self.addEventListener("notificationclick", function (event) { event.notification.close(); var url = event.notification.data.url; event.waitUntil(clients.openWindow(url)); });

Этот код после его вызова создает уведомление, данные для которого берет из файлаlatest.json, расположенного по адресуhttps://mysite.ru/latest.json. Если запрос этого файла не удался, или сайт ответил невалидным json, в лог-консоли разработчика появится соответствующая запись. Если же все хорошо, будет сформирован пуш. Пуш формируется из переменныхbody - это короткое текстовое сообщение,title - заголовок пуша,url - ссылка, по которой перейдет пользователь при клике на уведомление иicon - красивой и восхитительной (желательно квадратной, со стороной не меньше 150px) иконкой, на которой будет показан логотип сайта. Причем конкретно в этом скриптеicon - статичный параметр, а все остальные динамично обновляются изlatest.json .

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

Ну и, наконец, создаемlatest.json, из которого и будет браться информация для уведомлений. Думаю, не трудно догадаться, что лежать он будет в корневой папке. А вот и его содержимое:

{"notification":{"url":"https://mysite.ru/posts/1","title":"Крутейшая новость","body":"Мы сделали офигительную подписку для Chrome"},"_id":319}

Полагаю, объяснять что есть что в этом json’е нет смысла, всё и так понятно.

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

P.S. Кстати, уже сейчас можно вызвать SendPushMe() и посмотреть, что произойдет. Для этого, например, можно создать ссылку, по клику которой будет этот метод и вызываться:

Вызвать SendPushMe

И, если все сделано правильно, за кликом по такой ссылке высветится системное окошко с запросом:

Но не спешите пока давать разрешение. Нажмите на крестик и пока закройте окошко.

Если вы уже нажали, то откройте настройки сайта (нажав на зеленый замочек в адресной строке, если кто не знает) и в пункте “Оповещения” верните Глобальный параметр по умолчанию (“Спрашивать”).

Теперь откройте консоль разработчикаF12 -> Console . Далее нажмите снова ссылку “Вызвать SendPushMe”.

В консоли должны последовательно появиться две строки, содержащие “Service Worker is supported ” и “Service Worker is ready ” соответственно. А сам браузер должен вновь запросить разрешение. И вот теперь можно дать своё согласие.

В итоге в вашей консоли разработчика должны появиться три таких записи:

Лог подписки на Push в браузере Chrome

Если помните, скриптpush.js отправляет GET-запрос. Именно Endpoint и передаётся серверу с этим запросом. Чуть позже мы научим сайт запоминать их, чтобы мы могли отправлять по этим идентификаторам пуши.

Что мы теперь имеем? У нас есть полноценный подписчик на уведомления от сайта и мы теперь умеем вычленять идентификаторы подписавшихся. Теперь сам Бог велел попробовать послать себе самому уведомление.

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

Google уведомляется специальным POST запросом наhttps://gcm-http.googleapis.com/gcm/send вот в такой форме:

Content-Type:application/json Authorization:key=A...A //Закрытый ключ нашего приложения, который мы получили в прошлой части. { "to" : "bk3RNwTe3H0:CI2k_...", // Уникальный идентификатор подписчика. "data" : { "title": "Portugal vs. Denmark", // Данные для уведомления "text": "5 to 1" }, }

Как можно догадаться, этот запрос уведомляет одного конкретного подписчика, причем данные для уведомления передает прямо в запросе. Однако, у нас содержимое уведомления берется из latest.json. Да и отправлять каждому подписчику персональный запрос слишком жирно. Хотя, если вам нужно отправлять индивидуальные и персональные уведомления, этот вариант как-раз вам подойдет. Однако мы будем отправлять запросы пакетно, для чего используем вот такую схему:

Content-Type:application/json Authorization:key=A...A //Закрытый ключ нашего приложения, который мы получили в прошлой части. { "registration_ids" : { [...] // Массив идентификаторов подписчиков. }, }

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

Давайте через терминал (SSH-консоль) сформируем и отправим запрос:

curl --header "Authorization: key=AI...3A" \ --header Content-Type:"application/json" \ https://gcm-http.googleapis.com/gcm/send \ -d "{\"registration_ids\":[\"cym...W3\"]}"

SSH-консоль с отправленным POST-запросом и появившийся от него Push

На этом скриншоте видно и сам запрос и его итог - пришедшее спустя секунду уведомление.

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

Итак, Push-уведомления Chrome для сайта на Ruby On Rails

Сначала скажу, что пример этого кода валиден для сайта на Rails 3.2.8!

По сути, нам нужно сделать:

Функционал, чтобы наш сайт запоминал идентификаторы подписчиков;

Модель для создания push-уведомлений;

Динамически обновляемый latest.json;

Ну и добавить в контроллер пару строк кода, который будет при создании нового Push’а отправлять POST-запрос на сервер Google.

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

Теперь сделаем так, чтобы наш сайт понимал, что это за запрос и сохранял данные. Первым делом создадим модель и контроллер дляPushsubscriber :

Rails g model pushsubscriber browserkey:string rake db:migrate rails g controller pushsubscribers create delete

Match "/createpushadresat", to: "pushsubscribers#create", via: :get

Теперь наш сайт переадресует входящие GET-запросы в контроллерpushsubscribers , где он будет обрабатываться методомcreate . Настроим же его:

def create @newsubscriber = Pushsubscriber.new(:browserkey => URI(params[:adresat].to_s).path.split("/").last) if @newsubscriber.save? render:text => "ok" else render:text => "fail" end end

Сразу скажу, этот код лишь для того, чтобы показать, в каком направлении нужно разрабатывать. Он практически ничего не проверяет и не использует ни валидаторы, ни регекспы - не используйте его в таком виде. Проверяется лишь, чтобы входящий параметр содержал данные в виде ссылки, а затем из этой ссылки вычленяется последний после слэша участок и сохраняется в базе. Именно в таком видеpush.js передаетEndpoint . И именно в последней секции (за слэшем) endpoint’а содержится идентификатор браузера.

Итак, люди начали подписываться на наши обновления и теперь наша База данных пополняется идентификаторами. Пора начать рассылать им уведомления:

Rails g scaffold notification title:string bodytext:string url:string succescount:integer rake db:migrate

Эта команда Скаффолдом создаст нам минимально работающую модельnotification c полямиtitle ,bodytext ,url иsuccesscount . Первые три - соответственно заголовок, текст и ссылка будущего оповещения, аsuccesscount - количество успешно переданных пушей, которое нам будет любезно сообщать Google. Так же будут созданы контроллер с вьюхами для этой модели. Разумеется там еще нужно будет вписать сгенерированные вьюхи в общий дизайн сайта, а контроллер “огородить”before_filter ’ами, чтобы “пушить” могли только люди с соответствующим доступом. Но это вы уже будете решать индивидуально. А сейчас мы лишь чуть-чуть(на самом деле совсем не чуть-чуть) исправим метод create вnotifications_controller.rb :

require "open-uri" require "multi_json" require "uri" def create @notification = Notification.new(params[:notification]) if @notification.save @adresats = Pushsubscriber.all.collect(&:browserkey) @keys = "{"registration_ids":"[email protected]_json+"}".as_json uri = URI.parse("https://android.googleapis.com/gcm/send") http = Net::HTTP.new(uri.host,uri.port) http.use_ssl = true req = Net::HTTP::Post.new(uri.path) req["Authorization"] = "key=A...A" # Тут вписывается закрытый ключ req["Content-Type"] = "application/json" res = http.request(req, @keys) parsed_json = ActiveSupport::JSON.decode(res.body) @notification.update_attribute(:success, parsed_json["success"].to_i) end redirect_to notifications_path end

Этот код, если создано и сохранено новое уведомление (@notification), формирует и передает POST-запрос для Google (точно так же, как мы делали это выше), в котором в формате json по спецификации Google передаются ВСЕ идентификаторы наших подписчиков. Затем нам должен ответить Google своим json’ом. Из которого отпарсивается секция success, из которой сохраняется число - количество успешно переданных пушей. Так же там передается секция failure, в которой, соответственно, хранится число по той или иной причине недоставленных пушей. Вообще, можно самому посмотреть какие данные передает Google, может что-то еще решите сохранить.

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

Ну а теперь пробуем создать на своем сайте пуш через форму Notification.new (созданную Скаффолдом) и… ВУАЛЯ! Система работает - нам пришло уведомление!

Правда содержимое для этого уведомления все еще берется из статичногоlatest.json . Осталось последнее - заставить этот файл обновляться динамически. Как это сделать? Очень просто, ведь у нас уже есть модель Notification, а вlatest.json должно содержаться именно наше последнее Уведомление (то есть Notification.all.last). Для этого удаляем наш статический latest.json из корневой папки сайта и добавляем вroutes.rb следующий маршрут:

Match "/latest.json", to: "notification#latestpush", via: :get

То есть теперьlatest.json будет формироваться методомlatestpush в контроллереnotification . Создадим этот метод:

Def latestpush @push = Pushnotification.all.last render json: "{"notification":{"url":""[email protected]_s+"","title":""[email protected]_s+"","body":""[email protected]_s+""},"_id":"[email protected]_s+"}".as_json end

Теперь создадим еще одно уведомление через форму Notification.new. И, наконец, мы видим в углу монитора пуш именно с тем содержимым, которое только что вбили в форму.

Казалось бы, это все? Все, да не совсем. Во-первых, мы сделали подписку, но не сделали отписку - будьте честны и предоставьте посетителям сайта такую возможность. Во-вторых, подписку-то мы сделали, но она пока малоинформативна и показывается всем, а не только пользователям Chrome, для которых подписка и делается. Ну и в-третьих, мы сделали на своем сайте очень интересную игрушку, у которой есть свои правила использования. Вот об этом всем мы и поговорим в следующей, третьей и, наконец-то, заключительной части нашего повествования оChrome push API .