Push notifications что это

Основы успешной реализации push-уведомлений для мобильных приложений

Наши разработчики в Techmas часто сталкиваются с задачами создания уведомлений (push notifications). Несмотря на простоту и популярность технологии, в её реализации есть ряд особенностей, о которых и пойдёт речь в этой статье.

Push notifications что это. image loader. Push notifications что это фото. Push notifications что это-image loader. картинка Push notifications что это. картинка image loader

Push-сообщения могут стать великолепным маркетинговым инструментом, если они грамотно реализованы. Любое мобильное приложение или игра должны выполнять не только свои прямые функции, но и (даже в большей степени) так взаимодействовать с пользователями, чтобы последние с удовольствием возвращались в приложение и покупали дополнения к нему. К слову, по статистике сервиса Kahuna хорошо разработанные push-уведомления увеличили показатель возвратов пользователей в приложения более чем в 2 раза. Анализируемые периоды: 30, 60, 90 дней. Но прежде, чем говорить о грамотной реализации, посмотрим, как работают push-уведомления.

Общие сведения о технологии Push Notification

Push-уведомления – это такой способ распространения контента (системных сообщений), когда уведомления отправляются от сервера клиенту по инициативе сервера на основе определённых параметров. В отличие от обратной схемы «клиент-сервер» (Pull), push-технология выгодна тем, что даёт пользователю таргетированную информацию, которая может быть ему полезна, но об этой пользе он может пока не знать.
Изначально технология Push Notification имела отношение не к мобильным приложениям, а к сети PointCast, занимавшейся рассылкой новостей фондового рынка. Эту же систему давно используют суды США для рассылки подписчикам данных о процессах. Позже Microsoft и Netscape включили технологию в свои браузеры, но из-за низкой скорости подключения пользователей в то время она была вытеснена pull-технологией RSS. И лишь потом термин получил широкую известность после внедрения технологии компанией Google в ОС Android (Google Cloud Messaging, GCM) и компанией Apple в iOS 3 (Apple Push Notification Service, APNS). На примере последнего рассмотрим элементарную схему работы Push-уведомлений.

Схема работы Push Notification на примере сервиса APNS

Зачем нужны промежуточные сервисы

Существуют нюансы в рассылках push-уведомлений для разных мобильных платформ (Android, iOS, Windows Phone). Допустим, если приложение было удалено пользователем, то все сервисы сообщают о том, на какие устройства не следует больше отсылать уведомления. Осуществляется данный процесс посредством сообщения серверу токенов этих устройств. Однако если у GCM отсылка идентификаторов происходит сразу, то у APNS имеется специальный feedback server (сервер обратной связи), с которого список таких токенов забирается раз в сутки. Для рутинной работы с этими различиями и нужны промежуточные сервисы.

В случае разработки мобильного приложения с помощью какого-либо кроссплатформенного решения (к примеру, Appcelerator) такой промежуточный сервис, как правило, интегрирован в него. Допустим, в том же Appcelerator это Appcelerator Cloud Services (ACS), представляющий собой дополнительный сервис каналов уведомлений. Такой канал (channel) объединяет несколько устройств, являясь своеобразным идентификатором, состоящим из цифр и букв. ACS даёт возможность отправлять пуши и по токену устройств. Итак, данный промежуточный сервис берёт на себя функцию обновления информации об устройствах и взаимодействует с APNS и GCM.

Форма уведомления. Сразу выдавайте интересную информацию, лучше в заголовке. Одинаковые пуши вида «Новые распродажи в нашем магазине» не работают: дайте конкретику. Неплохо также использовать Deep Linking (указывать в сообщение внешние ссылки на конкретную страницу сайта).

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

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

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

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

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

Сервисы автоматизации Push-рассылки

Push Woosh. Выдаёт удобные и понятные отчёты, совместим со многими платформами, отлично сегментирует аудиторию по разным группам признаков.

Urban Airship. Осуществляет таргетинг и анализ аудитории, позволяет выбирать различные стратегии удержания пользователя и создавать уведомления расширенного формата.

Appsfire`s Appbooster. Бесплатный сервис со стандартным набором функций.

Parse Push. Позволяет собирать уникальные данные для аналитики, с лёгкостью интегрируется в любое приложение.

В заключение отметим, что push-уведомления, конечно, являют собой простой и эффективный способ возврата и удержания пользователя в частности и мощный маркетинговый инструмент в целом. Но это с точки зрения пользователя. Со стороны разработчика же существуют некоторые сложности. Реализация уведомлений сильно зависит от внешних вводных: изменения в OS или в промежуточном софте приводит к необходимости доработки приложения. Так, в Appcelerator появился новый инструмент Arrow Push, который пришел на смену ACS – и это лишь один из примеров. Более того, доставка пуша не гарантирована в принципе, а это поднимает вопрос о надёжности технологии Push Notification. Однако любая технология имеет свои плюсы и минусы, и что перевешивает в данном случае – вопрос открытый.

Источник

Push-уведомления: типы, назначение, советы по созданию

Push notifications что это. 5df0e1f37b16a21778d99ed713feee16. Push notifications что это фото. Push notifications что это-5df0e1f37b16a21778d99ed713feee16. картинка Push notifications что это. картинка 5df0e1f37b16a21778d99ed713feee16

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

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

Существует несколько определений push-уведомления (или пуша), которыми пользуются разработчики и пользователи устройств. Некоторые называют пуши actionable-сообщениями, то есть оповещениями, с которыми пользователь может взаимодействовать. А кто-то называет их rich-сообщениями, то есть «расширенными» уведомлениями с большим количеством информации и дополнительными функциями, которые невозможно реализовать с помощью стандартных СМС.

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

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

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

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

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

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

Для чего используют push-уведомления?

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

Провокация на взаимодействие

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

Провокация на совершение покупки

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

Push notifications что это. 528a16e8f680e5cbf7efbad7917af8efe70f2450. Push notifications что это фото. Push notifications что это-528a16e8f680e5cbf7efbad7917af8efe70f2450. картинка Push notifications что это. картинка 528a16e8f680e5cbf7efbad7917af8efe70f2450

Удержание действующих клиентов

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

Сообщение с актуальной информацией

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

Разница между push-уведомлением и уведомлением из соцсетей и мессенджеров

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

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

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

Разница между web-push-уведомлениями и уведомлениями в приложениях

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

Push notifications что это. de2952570fbf8b760e3aebc80ce038dcb21b9859. Push notifications что это фото. Push notifications что это-de2952570fbf8b760e3aebc80ce038dcb21b9859. картинка Push notifications что это. картинка de2952570fbf8b760e3aebc80ce038dcb21b9859

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

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

На компьютере такие трюки не работают.

Типы push-уведомлений

Есть 4 распространенных типа пушей:

Транзакционные. Это уведомления, сообщающие клиентам о статусе денежных взаимоотношений с приложением или сервисом. Банки предупреждают о снятии или переводе средств, магазины – об успешной оплате товара, онлайн-сервисы – об успешном снятии денег с карты за продление подписки.

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

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

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

Примеры push-уведомлений

Lamoda

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

Регулярно напоминает о платежах, чтобы не остаться без связи или без интернета. Иногда рассказывает о полезных акциях и возможностях сэкономить. Делает все, чтобы клиент не раздражался от своего беспамятства. Справляется с задачей удержания клиента.

Каким должно быть качественное push-уведомление?

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

Персонализация

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

Push notifications что это. 73e3ce25f16578e6940684c0e03b503b5038a41f. Push notifications что это фото. Push notifications что это-73e3ce25f16578e6940684c0e03b503b5038a41f. картинка Push notifications что это. картинка 73e3ce25f16578e6940684c0e03b503b5038a41f

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

Релевантность

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

Учитывайте геолокацию: уведомление об акциях в Бургер Кинг будет как нельзя кстати, если потенциальный клиент как раз проходит мимо заведения. А еще изучайте привычки пользователя, сейчас их не трудно отследить. К примеру, магазин ЛЕНТА уведомляет постоянных покупателей об акциях с определенной периодичностью: обычно за день до того, как клиент собирается пройтись за покупками.

Актуальность

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

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

Эта стратегия сработает в случае с компанией Марка Цукерберга, но у более скромного бизнеса нет такого мощного кредита доверия, поэтому кормить пользователей устаревшими уведомлениями не стоит.

Полезность

Это противоречивый совет. С одной стороны, нужно рассказать в пуш-уведомлении о каком-то продукте и убедить клиента его купить, поэтому нужно бить по конкретным товарам. С другой стороны, важно хоть как-то спровоцировать человека на взаимодействие с приложением. И вот тут как раз могут сработать даже экстраординарные методы, например пустые пуши или какой-то текст, не несущий смысловой нагрузки, но привлекающий внимание (вызывающий интерес). Подобные ухищрения могут сработать даже лучше, чем всем надоевшие generic-тексты в духе «СКИДКИ 50% НА ВАШИ ЛЮБИМЫЕ ТОВАРЫ!».

Но это больше вопрос креативности. Лучше доверить оформление таких текстов профессионалам в области SMM или копирайтерам с соответствующими навыками.

Советы по созданию push-уведомлений

Вот вам 10 полезных советов по созданию эффективных пушей:

Используйте эмоджи. Если с ними не перебарщивать, то они не раздражают, а, наоборот, привлекают внимание. На внушительную часть аудитории это действительно работает. Главное, не устраивать ад в духе постов некоторых маникюрных салонов и кальянных дел мастеров. Push notifications что это. daaed4b164f6b7d1479d4383a22f76df947acdd0. Push notifications что это фото. Push notifications что это-daaed4b164f6b7d1479d4383a22f76df947acdd0. картинка Push notifications что это. картинка daaed4b164f6b7d1479d4383a22f76df947acdd0

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

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

Не частите. Не дайте клиенту от вас устать. Если забросать его сотней сообщений, он их отключит.

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

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

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

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

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

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

На этом и закончим. Теперь вы не только знаете, что такое push-уведомление, но и понимаете, как сделать его полезным для бизнеса. Осталось только реализовать идеи и продумать стратегию оповещений.

Источник

Web PUSH Notifications быстро и просто

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

Информации по этой теме в интернете полно, но она фрагментирована, разбросана по разным ресурсам и перемешена с уведомлениями для мобильных устройств с примерами на Java, C++ и Python. Нас же, как веб-разработчиков, интересует JavaScript. В этой статье я постараюсь саккумулировать всю необходимую и полезную информацию.

Push notifications что это. image loader. Push notifications что это фото. Push notifications что это-image loader. картинка Push notifications что это. картинка image loader

Я думаю, вы уже знаете что такое push-уведомления, но я всё же напишу коротко о главном.

Пользователь, заходя на сайт, вытягивает (pull) с него данные. Это удобно и безопасно, но с развитием интернет ресурсов, появилась необходимость оперативно доставлять информацию пользователям не дожидаясь пока те сами сделают запрос. Так и появилась технология принудительной доставки (push) данных с сервера клиенту.

Push-уведомления работают только если у вас на сайте есть HTTPS.
Без валидного SSL сертификата запустить не получится. Так что если у вас еще нет поддержки HTTPS, то пришло время её сделать. Рекомендую воспользоваться Let’s Encrypt.
Для запуска на localhost нужно прибегать к хитростям. Я же тестировал скрипты на Github Pages.

Оглавление

Хорошие уведомления

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

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

Вернемся к нашим баранам. Так как же всё это работает? Для начала немного теории.

Теория

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

Для начала небольшая схема того как все это работает (анимированная схема):

Push notifications что это. 7d4f5182d7ef455281500be406cf40ac. Push notifications что это фото. Push notifications что это-7d4f5182d7ef455281500be406cf40ac. картинка Push notifications что это. картинка 7d4f5182d7ef455281500be406cf40ac

К сожалению, мне не удалось выяснить кто и как создает ID устройства и как сервер сообщений привязывается к конкретному устройству. Я использовал сервер сообщений Firebase Cloud Messaging от Google и его библиотеку. К сожалению, я не смог выяснить можно ли его заменить на свой сервер и как это сделать.

Изначально для отправки сообщений использовали:
Cloud to Device Messaging

Потом его заменили на:
Google Cloud Messaging

А потом еще раз поменяли на:
Firebase Cloud Messaging

Интересно, что дальше.

Что же происходит на стороне клиента?

Push notifications что это. image loader. Push notifications что это фото. Push notifications что это-image loader. картинка Push notifications что это. картинка image loader

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

Это все выглядит очень сложно, но на сервере все не проще.

Сложности на серверной стороне

Практика

Наконец-то, мы перешли к самому главному. Как я уже говорил ранее, в качестве сервера сообщений мы будем использовать Firebase Cloud Messaging, поэтому мы начинаем с регистрации и создания проекта на Firebase.

Можно еще покопаться в настройках и поиграться с разделением прав доступа, но, в общем-то, работа с сайтом Firebase закончена.

Приступаем к написанию клиента

Начнем с того что создадим Service Worker для получения push-уведомлений.
Создаем файл firebase-messaging-sw.js с следующим содержимым.

Файл Service Worker-а должен называться именно firebase-messaging-sw.js и обязательно должен находиться в корне проекта, то есть доступен по адресу https://example.com/firebase-messaging-sw.js. Путь к этому файлу жестко прописан в библиотеке Firebase.

Написанного кода достаточно для того чтобы показывать уведомления. О дополнительных возможностях поговорим чуть позже. Теперь добавим библиотеку Firebase и скрипт подписки в наш шаблон страницы.

Добавляем на страницу кнопку для подписки на уведомления

Подписка на уведомления

Вот и все. Это весь код который требуется для получения push-уведомлений.

Отправка уведомлений с сервера

В общем виде отправка уведомления выглядит так:

Все поля по порядку:

Push notifications что это. image loader. Push notifications что это фото. Push notifications что это-image loader. картинка Push notifications что это. картинка image loader

Это пример отправки одного уведомления одному получателю. Можно отправить одно уведомление сразу нескольким получателям. Вплоть до 1000 получателей за раз.

Пример ответов от сервера сообщений:

Мы не привязаны к какому-то конкретному языку программирования и для простоты примера будем использовать PHP с расширением cURL. Скрипт отправки уведомления нужно запускать из консоли.

messaging.onMessage

Обработчик messaging.onMessage стоит отдельного упоминания, так как он относится как раз к категории подводных камней. В примерах от Firebase я не видел примера использование этого обработчика. О нем мне рассказал FluorescentHallucinogen, за что ему отдельное спасибо, но он не упомянул о некоторых особенностях его использования.

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

Вроде все просто, но есть подводный камень. Дело все в том что на мобильных устройствах запрещено использовать конструктор Notification. И для решения этой проблемы нужно использовать ServiceWorkerRegistration.showNotification() и обработчик в этом случае будет иметь виде:

Теперь уведомления работают и на мобильных устройствах. Казалось бы уже все, но нет. Не смотря на заверения некоторых, ServiceWorker не должен быть пустым. Мы же хотим, что бы по клику пользователь переходил на нужную нам страницу. Для этого нам нужно добавить обработчик клика по уведомлению в ServiceWorker.

Сохраняем параметры уведомления для доступа свойству click_action в ServiceWorker-е.

Обрабатываем клик по уведомлению в ServiceWorker-е.

TTL и дополнительный контроль над уведомлением

Важным свойством для уведомления может является время его актуальности. Это зависит от ваших бизнес процессов. По умолчанию время жизни уведомлений 4 недели. Это очень много для уведомлений такого характера. Например, уведомление «Ваша любимая передача начинается через 15 минут» актуально в течении 15 минут. После этого сообщение уже не актуально и показываться не должно. За контроль над временем жизни отвечает свойство time_to_live со значением от 0 до 2419200 секунд. Подробней читать в документации. Сообщение с указанным TTL будет иметь вид:

Сообщение вида «Ваша любимая передача начинается через 15 минут» актуально в течении 15 минут, но уже через минуту после отправки оно станет не корректным. Потому что передача начнется не через 15 минут, а уже через 14. Контролировать такие ситуации нужно на стороне клиента.

Для этого мы поменяем отправляемое с сервера сообщение:

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

Заключение

А теперь поговорим о грустном. Не смотря на все прелести технологии, у неё есть ряд недостатков:

Библиотека Firebase скрывает в себе много тайн и её исследование могло бы дать ответы на некоторые вопросы, но это уже выходит за рамки этой статьи.

Поиграться

Проект на GitHub Pages

Так как для запуска Service Worker-а нужен HTTPS, то самым простым решением было разместить проект на GitHub Pages, что я и сделал.

Push notifications что это. image loader. Push notifications что это фото. Push notifications что это-image loader. картинка Push notifications что это. картинка image loader

Проект представляет из себя полноценное приложение для отправки и получения уведомлений. Для того что бы получить уведомление надо:

Можно отправить уведомление через любой инструмент для отправки HTTP запросов. Можно использовать сURL, я предпочитаю приложение Postman для Chrome.

Запрос такой же как и описанный ранее:

Вот и все. Получаем уведомление и радуемся жизни.

Ссылки

Updated at 2018-06-09

Обнаружились некоторые «особенности» в работе уведомлений.

Дубликаты уведомлений

Ко мне несколько раз обращались с вопросом: «Как исправить дублирующиеся уведомления?»

Проявляется эта проблема если открыть сайт отправляющий уведомления одновременно в нескольких вкладках. В этом случае Service Worker отправляет уведомление в обе вкладки и в обоих вкладках срабатывает метод messaging.onMessage. Наблюдать эту проблему можно на моем Demo проекте.

Могу порекомендовать для этих целей библиотеку pamelafox/lscache.
Если у вас есть другой метод решения проблемы, напишите в комментариях.

Картинки в уведомлениях

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

Push notifications что это. image loader. Push notifications что это фото. Push notifications что это-image loader. картинка Push notifications что это. картинка image loader

То есть, если вы отправите сообщение в таком виде, то Firebase потеряет картинку.

Обработчики показа уведомления такие же как в примерах выше.

Источник

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *