Push уведомления или как сделать так, чтобы клиент Вас услышал? Push-уведомления - что это? Как подключить и как отключить Push-уведомления
Дорогие друзья, давно не писал сам статьи на сайт, решил что от себя буду писать только полезные статьи, которые будут интересны не только мне, но и моим читателям. Как вы наверное заметили на сайте появилась интересная функция, это push notification (в народе пуш уведомления). Эта функция по моему личному мнению революционная, которая отодвинет в сторону подписки на e-mail рассылки и социальные далеко в сторону, и даже в будущем заменит их. А вот почему:
На примере будет показана настройка push notification в wordpress сайте (я ярый фанат вордпресса, т.к. эта удобная и популярная CMS и реализация пуш уведомления реализуется в пару кликов).
Для начала вам понадобится SSL сертификат, да, к сожалению обычные "http" сайты не смогут полноценно работать с push notification. Есть сторонние сервисы, которые конечно могут вам позволить добавить эту функцию на ваш сайт, но есть несколько минусов:
В моем же случае, пользователю достаточно 1 раз нажать кнопку "разрешить" в маленьком окне, и он уже будет зарегистрирован в системе и в при выходе новой статьи он будет получать уведомления уже прямо от моего сайта.
Думаю хватит воды, и перейду к делу.
Как я сказал выше, вам нужен SSL сертификат (те кто не знает что такое SSL и https, большой брат google вам поможет). Вы можете воспользоваться сервисом CDN cloudflare и в нем включить поддержку https (это самый легкий вариант, если будет интересно, могу написать статью как добавить сайт в cloudflare). Но я решил, что хочу добавить свой сертификат на сайт.
По гуглив немного, я нашел сервис "Let’s Encrypt" (https://letsencrypt.org) который позволяет бесплатно получить самый простой ssl сертификат с проверкой домена. Этого для нашего дела будет достаточно. Написал своему хостеру, что хочу добавить SSL сертификат от "Let’s Encrypt", хостеру правда пришлось поменять панель управление хостингом с ISPmanager на Plesk т.к в Plesk есть плагин, который в один клик добавляет SSL сертификат от "Let’s Encrypt". Если ваш хостер не может вам поменять панель управления, или в Plesk не установлен плагин "Let’s Encrypt" вы можете воспользоваться как я написал выше сервисом CDN cloudflare или поменять ваш хостинг на более "нормального" хостера.
Если у вас панель управления Plesk и в нем установлен плагин "Let’s Encrypt".
После подготовки вашего сайта, и проделывания нужных нам действий. Вам понадобится настроить wordpress, чтобы он переадресовывал посетителей на "https://" версию вашего сайта. Делается это следующем образом, заходите в админку вашего сайта. Настройки - Общие настройки. В общих настройках, в "Адрес WordPress (URL)" и "Адрес сайта (URL)" меняете "http://вашсайт" на "https://вашсайт". Все, если вы правильно установили SSL сертификат, то ваш сайт будет работать как и прежде, но в адресной строке появится значок зеленого замка. Это означает, что ваше соединение защищено, и канал между вами и сервером будет шифроваться.
Следующим этапом будет установка плагина "Chrome Push Notifications" (https://wordpress.org/plugins/chrome-push-notifications) этот плагин сделает за вас грязную работу, в нем будет достаточно написать ключи которые выдаст вас google, об этом чуть ниже. Почему-то после установки плагина и после заполнения нужных форм у меня ничего не заработало, возможно разработчик плагина исправит это, но я решил, что не буду ждать пока исправят работу плагина, и вручную вписал нужные строки в шаблон моего блога.
Предположим вы установили плагин и сайт у вас с ssl сертификатом. Теперь вам необходим аккаунт в gmail, для того, чтобы попасть в консоль и активировать нужные нам API. Снизу добавил видео что нужно сделать в "google developer console", а это пошаговая текстовая инструкция:
Все с Google мы разобрались, перейдем на наш сайт. Как я говорил, у меня почему-то плагин сразу не заработал, возможно это только мне не повезло, мне пришлось поковыряться на сайте разработчика, чтобы понять, почему у меня не заработал плагин. Если плагин у вас тоже не работает, то можете повторить мои действия.
1. Нужно добавить jQuery в вашу тему, если он у вас не стоит. Я использую CDN от google, вы можете загружать его с него же или со своего сайта. Добавить нужно в header.php
2. Создайте файл с названием и расширением manifest.json в корневой папке своего сайта и впишите туда, номер вашего проекта, который вы взяли с "google developer console":
{"gcm_sender_id": "номер-вашего-проекта"}
Запись добавляется до тега
3. После этого, зайдите в меню "виджеты" и добавьте текстовый виджет и в него впишите следующие значения, замените "вашсайт.кз" на домен вашего сайта.
/* */
4. После всех этих действии, обновите кэш wordpress (если у вас установлен плагин кэширования) и зайдите на главную страницу. У вас должно появится окно push notification. Надеюсь статья вам помогла, если будут вопросы обращайтесь, по мере возможности буду помогать.
P.S: Забыл сказать, этот push notification работает только в браузерах хром от google, думаю в будущем напишу как реализовать такую функцию и в iOS устройствах и в других браузерах.
Как сделать push уведомление (notification) на сайте
62 оценок, Средняя оценка: 4.9 из 5В мире информационных технологий используется только малая часть всех изобретений. А ведь большинство вещей разрабатывается именно для того, чтобы облегчить нашу жизнь. Вот про одно из таких улучшений и пойдёт разговор в статье. Это Push-уведомления. Что они собой представляют и где могут быть использованы? Push-уведомления - что это? iPhone, Android, многофункциональные телефоны - где они настраиваются и как их включить/отключить?
Знакомьтесь - Push-уведомленияЧто это такое?Так называют краткие всплывающие уведомления, которые появляются на экранах сенсорной техники (планшетах, телефонах) и сообщают о важных обновлениях и событиях. При желании они могут быть использованы в качестве простой формы диалога между продавцом и покупателем, что обусловило их широкое применение в сфере маркетинга.
Так, если рассматривать вариант с приложением, то здесь основная задача - информирование об обновлениях, новом контенте (или просто напоминалка, что оно долго не использовалось). Как сделать Push-уведомления для приложения? Для этого необходимо использовать прикладной интерфейс программирования, который существует для конкретного телефона (собственно, для используемой операционной системы).
Причиной возникновения данной технологии стало желание специалистов поддерживать круг пользователей своих разработок. Настройка Push-уведомлений не представляет собой ничего сложного. В конце статьи содержится информация об особенностях их включения/отключения на разных операционных системах.
Варианты применения Push-уведомленийГде же можно использовать такую технологию? Давайте немного остановимся на статистике, которой могут похвастаться Push-уведомления. Что это нам даст, рассмотрим позднее. Итак:
Если не приходят Push-уведомления от тех, на кого вы подписаны, а в настройках ничего не менялось, это не значит, что их не будет вообще. Может быть, причиной проблемы стал просто обрыв связи. Если вы - разработчик, значит, что-то не так было настроено в самих приложениях.
Новый канал маркетингаПрежде чем рассматривать, как взаимодействовать с данной технологией, с точки зрения пользователя, позвольте потратить ещё немного времени и рассказать о концепции Push-уведомления в маркетинге. При использовании подобной разработки необходимо внимательно следить, чтобы не перейти тонкую грань, которая отделяет сотрудничество от навязчивости. Если эти строки читает маркетолог или человек, получающий соответствующее образование, следует запомнить, что таким способом должна предоставляться ценная информация, которая будет позитивно отображаться на последующем взаимодействии.
Push-уведомления должны содержать своевременный и релевантный контент. Так, в приложении, которое нацелено на детей, реклама кофе будет очень не к месту, что, в свою очередь, наверняка приведет к к потере популярности.
Популярным является применение такой технологии для краткого уведомления о действии друзей. Рассматривая это, можно вспомнить про "Твиттер", который информирует своих пользователей о возникающих изменениях в профилях друзей.
Некоторые компании используют GPS, чтобы определять, где находятся их клиенты, и в случае если вблизи окажется их торговая точка, они шлют соответствующее уведомление. Важным является своевременность получения сообщения. Реализационная особенность заключается в том, что для Push-уведомления не нужен доступ в Интернет, ведь зачастую вся необходимая информация хранится в самом приложении (как правило).
Особенности использованияИтак, если было принято решение об использовании Push-уведомлений как части маркетингового плана, то не лишним будет убедиться, что они отвечают таким условиям:
Сейчас можно переходить уже к активации подобной технологии. Для простоты понимания порядок действий будет разбит в зависимости от операционной системы, которая установлена на мобильном устройстве. Итак, как настроить Push-уведомления?
Это самая популярная операционная система, которая получила свой статус благодаря бесплатному распространению и постоянному совершенствованию. Как включаются/выключаются Push-уведомления на нём? Для отключения необходимо выполнить ряд действий в таком порядке:
Но что делать, если есть желание включить/отключить Push-уведомления не для всех, а только для одного приложения? На этот случай тоже предусмотрен свой алгоритм:
Как видите, в выполнении данных действий нет ничего сложного, и это не только на операционной системе "Андроид". Push-уведомления с такой же легкостью включаются/отключаются и на других устройствах.
iPhone и iPadКак здесь включить и iPad ничем принципиальным здесь не отличаются. Здесь будут рассмотрены операции с данной технологией по предыдущему принципу. Итак, чтобы отключить или включить сообщения, получаемые от конкретных программ, вам необходимо выполнить такую последовательность действий:
А как отключить подобные сообщения совсем? Для этого выполните такую последовательность действий:
Вот как включить Push-уведомления на айфоне. Учитывая, что настройки у них меняются не слишком ощутимо, проблемы с изменением параметров на разных версиях возникнуть не должны.
Многофункциональный телефонСледует отметить, что в таком случае работать с Push-уведомлениями можно только на определённых моделях, и широкой практики применения данная функция здесь не приобрела. Но если вы являетесь владельцем такой единицы техники, то предлагаем ознакомиться с тем, как включить/отключить подобное дополнение телефона. Следует учитывать, что путь может меняться в зависимости от модели, поэтому если вы не найдёте необходимое благодаря указаниям в статье, то следует поискать в других местах:
Вот мы и рассмотрели Push-уведомления, что это такое, зачем они необходимы. Напоследок вспомним о ранее упущенных моментах. Push-уведомления являются довольно ценными с точки зрения маркетинга и при грамотном использовании могут принести существенную пользу предприятию и облегчить жизнь потребителям. Но во всём следует придерживаться золотой середины.
Push-уведомления ценны еще и тем, что если какое-то приложение и не требует постоянной рассылки информации от своего имени, то этим можно воспользоваться в рекламных целях, предоставляя возможность другим разработчикам или предприятиям (компаниям) информировать пользователей о новых событиях. Но важно учитывать в таком случае тематичность предоставляемой информации.
В части мы вкратце поговорили о том, что такое Веб-уведомления от Chrome и даже начали их реализацию на своем сайте. Сегодня мы закончим разработку и даже отправим первое самое настоящее push-уведомление.
В конце первой части я написал о том, как вызвать JS-метод 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 вот в такой форме:
{
"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.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 . Создадим этот метод.
Многие пользователи активно используют социальную сеть Одноклассники именно для общения. Учитывая, что не всегда бывает возможность находиться возле компьютера, давайте разберемся, как можно сделать так, чтобы вы знали, когда придет новое сообщение или подарок. Или же, наоборот, отключим настроенные уведомления.
Как включить или убрать уведомления в ОдноклассникахНастроить уведомления в Одноклассниках совсем несложно. При этом самостоятельно можно выбрать, о чем именно сообщать: о новом письме, приглашении дружить, новой отметке на фото и прочее. Уведомления могут приходить как на электронную почту, так и на телефон в виде sms. Рассмотрим два способа.
На электронную почтуЧтобы уведомления приходили в виде письма на почту, которая указана в основных настройках профиля, сделайте следующее.
В меню, под своей аватаркой, кликните по кнопочке «Изменить настройки».
В списке слева откройте раздел «Уведомления».
Перед вами откроется список. В столбце «эл. почта» поставьте галочки в тех полях, о чем хотели бы получать уведомления. Затем нажмите «Сохранить».
Функция оповещения в Одноклассниках путем получения сообщения на свой телефон, доступна не в каждой стране. Если можете воспользоваться данной услугой, то кроме столбца «эл. почта» будет еще один столбец «SMS».
Здесь будут активны не все поля, поставьте галочки в доступных. Также лучше указать время, когда будут приходить сообщения, чтобы телефон не будил вас ночью. Нажмите «Сохранить».
Для того чтобы отключить уведомления, достаточно просто в столбцах «эл. почта» и «SMS» убрать галочки в нужных полях. После этого, нажмите «Сохранить».
Если пользуетесь мобильным приложением, то открыть настройки уведомлений в Одноклассниках на телефоне можно следующим способом.
В левом верхнем углу нажмите на кнопочку меню в виде трех горизонтальных полос.
Теперь в боковом меню выберите пункт «Настройки».
В настройках профиля найдите пункт «Уведомления».
Если не хотите получать уведомления про определенные события, уберите напротив них галочки. Чтобы их вообще отключить, снимите все галочки. Не забудьте нажать «Сохранить».
Для того чтобы при получении нового письма социальная сеть оповещала об этом, или наоборот, нужно отключить звук при получении входящих сообщений, сделайте настройки, описанные в следующих подпунктах.
В браузере на компьютереЕсли заходите в Одноклассники с компьютера или ноутбука, тогда откройте свою страничку и кликните в верхнем меню по кнопочке «Сообщения».
С левой стороны откройте один из диалогов. Затем вверху справа нажмите на кнопочку настроек в виде шестеренки.
Появится небольшое меню.
В «Настройках переписки» можете отметить галочкой пункт «Не беспокоить». Тогда, получая письма от того человека, диалог с которым открыт на данный момент, звуком оно сопровождаться не будет.
Если нужно вообще убрать звук сообщения в Одноклассниках, то в «Настройках браузера» уберите галочку в поле «Звуковой сигнал о новых сообщениях».
Если возник вопрос: почему нет звука для входящих сообщений в Одноклассниках, значит в описанных выше настройках, сделайте все наоборот.
После этого, если профиль в браузере будет открыт, и придет новое письмо, вы услышите соответствующий звуковой сигнал.
Если заходите в Одноклассники, используя мобильное приложение на телефоне или планшете на Андроид, то откройте боковое меню, нажав на кнопочку в левом верхнем углу.
В нем выберите пункт «Настройки».
Чтобы включить звук сообщения в Одноклассниках, в поле «Не беспокоить» ползунок должен быть передвинут так, чтобы он был серого цвета.
В поле «Звуковой сигнал» можете выбрать звук для входящих писем в Одноклассниках. Чуть ниже можно включить вибрацию, световой индикатор или сопровождение звуком отправленного сообщения – поставьте галочки в нужных полях.
Если нужно убрать звук для сообщений в Одноклассниках, передвиньте ползунок в поле «Не беспокоить» в положение включен. Появится небольшое окошко, в котором можно выбрать подходящее время.
Теперь любые оповещения не будут сопровождаться звуковым сигналом в течение выбранного времени.
Настраивайте уведомления так, как вам удобно. Одноклассники могут оповещать вас или по электронной почте, или по SMS. Если же вы переписываетесь с другом и хотите быть в курсе, когда придет очередное сообщение, выберите подходящий для вас способ оповещений.
Push-уведомления — это неотъемлемая часть операционной системы iOS, начиная с пятой ее версии. Они используют постоянно открытые IP-связи для доставки информации от сервера к клиенту. С их помощью владельцы iPhone и iPad получают данные о поступлении новых писем электронной почты, входящих сообщениях в мессенджеры, упоминаниях в социальных сетях и множестве других касающихся их действий оперативно и без лишних проблем. Кроме необходимой информации, через Push к пользователю могут попадать и бесполезные данные от игр и программ, которые навязали ему такого рода оповещения, что отвлекает от дел и уменьшает время автономной работы iPhone и iPad (ознакомиться с инструкцией по увеличению времени работы устройств от аккумулятора можно по
).
Так как же настроить push-уведомления на iPhone и iPad?
1.
;
2.
.
Здесь можно изменить параметры отображения информации на экранах центра уведомлений, включить/выключить определенные виджеты и произвести некоторые другие корректировки.
Есть возможность получать их в виде небольших баннеров, которые будут появляться в верхней части экрана и быстро пропадать, а также в виде напоминаний, отображаемых в центре экрана (убрать их можно лишь нажатием соответствующей кнопки).
