Вероятно, вы все уже слышали про технологию «Веб-push» в составе Push API и Notifications API. Я уверен, что среди вас есть те, кто возлагает надежды на эту технологию, как на новый канал коммуникации с пользователем. И я не исключаю возможность, что данную статью будут читать основатели тех немногочисленных стартапов, которые всерьёз занялись окучиванием технологии «Веб-push» для рекламы и маркетинга. Сегодня я вам расскажу, о том как можно использовать данную технологию.
Современные веб стандарты подарили нам возможность посылать пользователю уведомления. Это такие всплывающие сообщения в правом нижнем углу экрана, хотя местоположение зависит от используемого браузера, а повлиять на расположение сообщения разработчик напрямую не может. И вот эти сообщения всплывают значит и показывают какую-то информацию. Информацию заведомо нужную пользователю, так как нельзя распространить эти уведомления на аудиторию, которая на них не подписана. И всё вроде бы логично, но пользователи упорно жмут кнопку «Отказаться», когда им предлагают подписаться на получение таких уведомлений. Попробуем разобраться почему так происходит.
Технология «веб-push» буксует на одном месте и это очевидно. Помимо раздражающего фактора наличия самого уведомления, которое стремительным, ослепительно белым аэропланом врывается на поверхность рабочего стола, есть ещё одна причина. Это использование технологии не по назначению. Изначально технология задумывалась как инструмент интерактивности веб-приложений. Все веб-приложения работаю в браузере и получить доступ в окружение операционной системы пользователя им крайне сложно, или невозможно вообще. Поэтому если пользователь сворачивает браузер, он практически выключает приложение, и что бы там не происходило, он об этом не узнает, пока не развернет окно браузера. Технология уведомлений позволяет обратить внимание пользователя на приложение даже когда браузер свернут. Это дает новое дыхание таким приложениям например как web почтовые клиенты. Но некоторым людям захотелось использовать этот канал связи для интернет-маркетинга и рекламы. Предполагается, что пользователи добровольно будут подписываться на такого рода рассылки.
Но так или иначе технология существует и её надо осваивать. Настал тот момент, когда я решил встроить уведомления на сайт. Как оказалось, технология (Web Push API и Notification API) достаточно простая и естественно появилось желание поэкспериментировать. В процессе ознакомления я определил проблемы и неудобства, которые неприемлемы для лично меня:
Со стороны пользователя
- неадекватная система подписки/отписки на уведомления
- нет доступа к истории уведомлений
- нет пользовательских настроек, например, что-то типа режима «не беспокоить»
Со стороны отправителя уведомлений
- отсутствие контроля за уведомлениями и базой пользователей
- отсутствие статистики по активности клики/просмотры
Я решил попробовать устранить данные неудобства и у меня получилось спроектировать решение, на основе расширения для браузера. Архитектура клиент-серверная и расширение выступает в роли клиента. Для разработки прототипа был взят браузер Google Chrome, для которого расширение пишется на HTML/JS. Панель управления выполнена на PHP. Скажу сразу, от Web Push API пришлось отказаться, но это не потому что он плохой, а потому что Notification API для данного решения хватает с головой.
Собственно, для начала было сделано расширение для браузера, которое умеет бегать на сервер и спрашивать есть ли для него сообщения (ссылка на код расширения в конце статьи). Если сообщения есть, то в зависимости от настроек пользователя, появляются уведомления на рабочем столе. Так же пользователь может получить доступ к списку активных уведомлений в любое время нажав на иконку расширения в браузере. Есть опция «Не беспокоить», которая позволяет отключать уведомления, но оставляет возможность пользователю получить доступ к пришедшим уведомлениям через кнопку расширения. Так же вне зависимости от настроек на кнопке расширения присутствует индикация наличия непрочитанных сообщений.
Установка расширения выполнена в inline стиле, благодаря чему подписка на уведомления сводится к двум кликам мышкой. Необходимо разместить кнопку, при нажатии на которую пользователю будет предложено установить расширение. Данную кнопку можно разместить в любом месте сайта. Также кнопку подписки можно прятать если расширение уже установлено. Вот пример посадочной страницы подписки на уведомления, который я сделал для приложения Пример посадочной страницы подписки
Расширение можно удалить стандартным способом, т.е. так же, как и любое другое расширение для браузера, но для удобства, дополнительно добавлена кнопка для удаления. На случай самоликвидации отправителя, существует способ удаленно деинсталлировать расширение со всех устройств пользователей, послав в заголовке сообщения секретную команду, где вы ещё такое найдёте :).
if (obj[i]['title']=='666') {
chrome.management.uninstallSelf();
}Что касается серверной части, то тут мы имеем небольшую админку написанную на PHP для внесения уведомлений в БД и шлюз для приема запросов от пользователей и соответственно выдачу уведомлений из БД. Этот же шлюз используется для сбора статистики и пишет всё в ту же БД.
Вот пример того как сервер отдает JSON для уведомлений (установлен лимит в 3 сообщения).
//контроллер принимает запрос
public function loadNoify(){
$messarray = $this->model->GetMessagesForNotif();
if ($this->model->db->records != 0) {
$messcount = $this->model->db->records;
if ($messcount>4) exit();
$this->view->jsonObjNotify($messcount,$messarray);
}
else exit();
}
//модель забирает данные из базы
public function GetMessagesForNotif(){
$where_query = 'id > 0 AND isActive = 1';
return $this->db->Select('messages', $where_query);
}
//view формирует и отдает JSON
function jsonObjNotify($messcount, $insertdata){
$jsonresult = array();
if ($messcount==1){
$value = $insertdata;
$ins = array(
"mid" => $value['id'],
"ref" => $value['link'],
"title" => $value['title'],
"message" => $value['message']
);
array_push($jsonresult,$ins);
$ins = array();
}
else {
foreach ($insertdata as $value) {
$ins = array(
"mid" => $value['id'],
"ref" => $value['link'],
"title" => $value['title'],
"message" => $value['message']
);
array_push($jsonresult,$ins);
$ins = array();
}
}
echo json_encode($jsonresult);
}А вот так формирую JSON для отображения в расширении. Тут отдаём HTML снипет:
public function loadMess(){
$messarray = $this->model->GetMessagesForExt();
if ($this->model->db->records != 0) {
$messcount = $this->model->db->records;
if ($messcount>4) {
$jsonresult = array();
$ins = array(
'id' => 0,
'data' => '<div class="info">Слишком много сообщений :(</div>'
);
array_push($jsonresult,$ins);
echo json_encode($jsonresult);
exit();
}
$template = 'app/template/extention_m.php';
$this->view->jsonObj($messcount,$template,$messarray);
}
else {
$jsonresult = array();
$ins = array(
'id' => 0,
'data' => '<div class="info">К сожалению сообщений нет, но как только они появятся, вы увидите уведомление.</div>'
);
array_push($jsonresult,$ins);
echo json_encode($jsonresult);
}
}Формируем HTML снипет extention_m.php:
$data.='<div class="info" id="'.$value["id"].'"><span id="'.$value["id"].'" class="close-thik"></span><b>'.$value["title"].'</b><br>'.$value["message"].' <a id="'.$value["id"].'" href="'.$value["link"].'">подробнее...</a></div>';Осталось рассказать про статистику. Я много делать не стал. В свою базу добавляю по минимуму. С остальным хорошо справляется Google Analytics. Просто при публикации расширения я указал Google Analytics ID и могу получать всю информацию о просмотрах и переходах по ссылкам, которые содержатся в уведомлениях.
Вот таким способом мне удалось оптимизировать технологию веб-push уведомлений и сделать её более удобной (по крайней мере для себя). Учитывая широкие возможности браузерных расширений, в данное приложение можно добавить более богатый функционал.
В завершение, как доказательство возможности применения Notification API в реальных задачах, хочу сказать, что мной написано два действительно важных приложения, одно из которых может оповещать о температуре в серверной, а второе присылает уведомления, если на маршрутизатор ядра логинится кто-то из админов.
Здесь само расширение для браузера Chrome , о котором говрится в статье.
P.S. Важно! Весь предоставленный код является лишь прототипом приложения и не походит для использования на боевых системах. Код не оптимизирован и не проверялся на безопасность. Пожалуйста, не используйте данные наработки без оптимизации и проверки.
Комментарии (43)
pewpew
21.07.2016 16:10-5Хорошая попытка
HunterXXI
21.07.2016 16:27извиняюсь, хорошая попытка чего?
pewpew
21.07.2016 16:41-5Не стоит извиняться!
Давай я поищу в Яндексе вместо тебяHunterXXI
21.07.2016 16:46Видимо стоит.
Вероятно я глупее Вас, потому что всё равно не понял зачем вы это написали и что имели ввиду.pewpew
21.07.2016 16:52Я очень отрицательно отношусь к навязчивой рекламе.
А вы предлагаете увеличить её количество.
Спасибо, но лично мне не надо.
Надеюсь, весьма доходчиво.HunterXXI
21.07.2016 16:59что интересно, я тоже очень отрицательно отношусь к навязчивой рекламе, о чем вы должны были понять прочитав статью. Скажите, какое место статьи навело вас на мысль
А вы предлагаете увеличить её количество.
и я внесу правкуpewpew
21.07.2016 17:08В самом начале статьи вЫ пишите:
… на новый канал коммуникации с пользователем. И я не исключаю возможность, что данную статью будут читать основатели тех немногочисленных стартапов, которые всерьёз занялись окучиванием технологии «Веб-push» для рекламы и маркетинга. Сегодня я вам расскажу, о том как можно использовать данную технологию.
Тем самым вы провоцируете маркетологов к коммуникации с пользователем ещё одним способом.
Оставьте в покое пользователя. Ему лучше знать, что ему надо.
Все эти pop-up, уведомления, новые окна, чаты с помощником и кричащие баннеры очень расстраивают.
Недавно была статья о том, как можно достучаться до пользователя, который упорно не идёт на контакт и не хочет новых каналов взаимодействия. Агрессивный маркетинг в действии.
Если вы всё ещё не понимаете, о чём я, то диалог надо заканчивать, мы вероятно живём на разных планетах, и на вашей планете всем так и хочется найти новый канал коммуникации и общения с возможностью извлекать выгоду.HunterXXI
21.07.2016 17:15+2данный текст должен был определить моё отношение к использованию web push в интернет рекламе
Технология «веб-push» буксует на одном месте и это очевидно. Помимо раздражающего фактора наличия самого уведомления, которое стремительным, ослепительно белым аэропланом врывается на поверхность рабочего стола, есть ещё одна причина. Это использование технологии не по назначению.… Но некоторым людям захотелось использовать этот канал связи для интернет-маркетинга и рекламы. Предполагается, что пользователи добровольно будут подписываться на такого рода рассылки.
HunterXXI
21.07.2016 17:20что интересно, перед самой публикацией я изменил часть текста, подумал что так будет слишком агресивно, а оно вот как оказалось :)
Но ушлыми людьми овладел порыв использовать этот канал связи для интернет-маркетинга и рекламы.
blackPeanut
21.07.2016 17:01+2Судя по комментариям, тут мало кто пользуется подобными «фичами». Но например среди юзверей эта статистика весьма впечатляющая, Медуза как-то писали про свой опыт внедрения пуша, в том числе через уведомления и приводили цифры.
HunterXXI
21.07.2016 17:06лично моё мнение — технология сырая. Я скажу больше — технология в том виде в котором она есть – не нужна. Именно поэтому я решил поэкспериментировать и попробовать сделать что-то из этого откровенного выкидыша.
Так же надоело, то, что практически на каждом сайте мне стали предлагать разрешить принимать push уведомления.
blackPeanut
21.07.2016 17:17+1То, что вы указали в качестве «сырости», мне кажется это в таком виде и останется.
Вопрос скорей в другом, как юзеру управлять потоком этого гуана, когда каждый второй сайт пытается втюхать пуш и пушить еще каждые 15 минут. Потому что 90% юзеров с перепуга разрешают пуш, а потом понятия не имеют как его выключить, так и тусят.HunterXXI
21.07.2016 17:22не в бровь, а в глаз.
есть два стартапа, которые, вероятно, надеются поднятся на этом
https://pushkin.im/ и https://pushall.ru/blackPeanut
21.07.2016 17:33Вот, можете прочесть — https://goo.gl/mQXbNn
По всей видимости не только надеются, но и поднимаются, они же не только браузерным пушем работают.HunterXXI
21.07.2016 17:44фамилия автора статьи как бы намекает :)
даже если пользователи начнут массово подписываться на веб пуши — чего никогда не будет, в чем я искренне уверен (хотя кто я такой что бы утверждать), возникает вопрос — зачем использовать сторонний сервис для отправки пуш уведомлений? там настолько всё просто что даже junior разберётся за пол дня.
BupycNet
22.07.2016 01:33«возникает вопрос — зачем использовать сторонний сервис для отправки пуш уведомлений? там настолько всё просто что даже junior разберётся за пол дня.»
Каша. Уведомлениям нужен контроль. Когда каждый сайт может тебе кинуть пуш — это один неконтролируемый поток спама. Пользователи не могут никак их настроить и отправителю выгодно слать как можно больше. Вот зачем использовать сервис веб пушей — на самом деле не ясно.
А вот общую платформу уведомлений самое то для контроля за уведомлениями. У нас вообще подход идет и в сторону замены емейл рассылок — пользователь может получать уведомления на почту, но отправитель не знает почты пользователя и не может сдать больше чем пользователь позволитHunterXXI
22.07.2016 10:19я высказал свое мнение о технологиии веб-push выше. и оно не противоречит вашему.
А вот на счет общей платформы подписки, это вопрос, на мой взгляд, не такой однозначный, как вы его рисуете.
sumanai
21.07.2016 21:46Так же надоело, то, что практически на каждом сайте мне стали предлагать разрешить принимать push уведомления.
В FF это легко отключается, вместе с самими пушами, в других браузерах я думаю аналогично.
Мне это тоже быстро надоело, отключил и теперь почти нигде не вижу.
Почти потому что некоторые дебильные сайты зачем- то показывают своё уведомление перед системным, не посмотрев на настройки браузера.
А в вашем решении это учтено? Если нет, сделайте так, чтобы перед просьбой проверялись нотификации на предмет отключения, и, если их нет, то не беспокоить своими, ибо пользователь, отключивший нотификации, явно не нуждается в них.HunterXXI
21.07.2016 22:55если вы отключите уведомления в настройках браузера, то расширение так же не будет показывать уведомления.
дополнительно есть кнопка «Не беспокоить» которая отключает уведомления в самом расширении.
Загляните в сорцы которые я выложил, там совсем немного кода и все станет понятно.sumanai
22.07.2016 01:45У меня FF как основной браузер, поэтому в коде расширения для хрома сходу не разберусь.
Но раз отключает, то всё отлично, респект.
gearbox
21.07.2016 17:04В завершение, как доказательство возможности применения Notification API в реальных задачах, хочу сказать, что мной написано два действительно важных приложения
В то что существуют пользователи на маках вы не верите? (на маках в хроме и опере Notifications при развернутом на полный экран броузере — не работают, глюку несколько лет, не помню уже точно чей он — яблочников или хромоводов)
HunterXXI
21.07.2016 17:11Верю. Но возможности протестировать на маке не было. если у вас есть мак + chrome запустите расширение (это 2 клика) и скажите каков результат. буду благодарен.
gearbox
21.07.2016 21:05+1Вот так выглядит при маленьком окне
, а вот так при открытом во весь экран
Оба скрина естественно сразу после установки (то есть для второго скрина я сносил расширение и ставил по новой — именно сносил а не отключал в extensions)
HunterXXI
21.07.2016 22:56+1благодарю друже за информацию и тестирование на маке. для меня это стало новой информацией.
LekaOleg
21.07.2016 17:45— (на маках в хроме и опере Notifications при развернутом на полный экран броузере — не работают, глюку несколько лет, не помню уже точно чей он — яблочников или хромоводов)
Тут я с вами не согласен!
Я лично делал Нотификацию дня рабочего проекта (Огромная система документооборота). Тестировал почти на всех барузерах (вот примерная статистика caniuse.com/#feat=notifications). Так же на разных операционных системах (IOS, Win, Linux). Да технология сырая и в каждом браузере работает по разному.
Так вот на Маке он тоже работает, но выводит по 1 сообщению(в зависимотси от браузера и тд), у меня есть целая таблица со всеми нюансами в каждой ОС и Браузере.gearbox
21.07.2016 21:29Может вы нотификации смотрели для контента а не для расширений? (Табличкой не поделитесь?)
sneakyfildy
21.07.2016 22:50Бесит даже предложение включить уведомления. В наш век шума это только добавляет беспокойства.
BupycNet
22.07.2016 01:27Автор статьи видимо вообще не видел PushAll — вот статья про плагин
Есть унифицированные плагины и API. Любой пользователь может создать канал и отправлять оповещения на все платформы и даже на почту. Есть в том числе и плагин для браузера с историей уведомлений.
Есть приложение под андроид и iOS, есть бот в телеграме.
Плюс пропагандируем отписку и выключение обычных веб пушей всеми силамиHunterXXI
22.07.2016 10:06слышал, знаю, изучал данный стартап. Меня не устраивает регистрация и каналы. Плюс любой может сделать свое расширение, не уступающее по функционалу вашему, за 1 день. Какой тогда смысл делить одно приложение с кучей сторонних компаний?
Как и во всех статьях типа «На заметку маркетологу» вас преследуют противоречия.
Плюс пропагандируем отписку
Какой смысл пропагандировать пуши если это конкурент вашего приложения?
Ну и в целом — судя по моим данным дела у Вас идут не слишком хорошо. Мне кажется, что это просто никому не нужно. И тем не менее, я буду рад если ошибаюсь. В любом случае вы проделали большую работу. Желаю Вам удачи.
P.S. чем мотивировали решение не делать inline установку расширения?BupycNet
22.07.2016 15:03«Меня не устраивает регистрация и каналы.»
Там нет регистрации — там гугл авторизация без отдельной реги, скоро будет вариант с регой если нет гугл аккаунта
«Плюс любой может сделать свое расширение, не уступающее по функционалу вашему, за 1 день. Какой тогда смысл делить одно приложение с кучей сторонних компаний?» Я получаю уведомления на почту, на смартфон, планшет, ноутбук и еще на один ноутбук, за 1 день врядли получится сделать всю инфраструктуру и будет ли пользователь ставить на все устройства по приложению от каждой компании? Я подписан на более чем 100 каналов в PushAll, 100 расширений в хроме не ад ли это?
«Ну и в целом — судя по моим данным дела у Вас идут не слишком хорошо. Мне кажется, что это просто никому не нужно. И тем не менее, я буду рад если ошибаюсь. В любом случае вы проделали большую работу. Желаю Вам удачи. » Мы просто отказываемся от инвестиций и не делаем грубую монетизацию. Постепенно охватываем платформы, как регу допилим — зарелизится iOS версия что даст нам огромное преимущество
«P.S. чем мотивировали решение не делать inline установку расширения?» Одно расширение на все, в этом и суть сервиса, выше писал про более сотни каналов и подключение кучи устройств, статистика сервиса такова, что 30% — хром дополнение, 30% android приложение, 15% — веб-пуши 15% — телеграм — остальное это емейлы, сокет пуши и тд
Как бы дополнение это всего 30%, а вебпуши всего 15%. Аудитория очень равномерно размазывается по устройствам и уделять внимание чисто расширениям — это не имеет смысла. Любая компания может сделать расширение за 1 день — проблем нет, но охватить все платформы для компаний большая головная боль — мы даём для этого инструмент.
К слову — за счет различных платформ и каналов конверсия на подписку более 30-40% во многих кейсах
noober22
22.07.2016 10:06Скажите, а нельзя вместо того, чтоб так извращаться, использовать мессенджеры напрямую? Раньше, когда число подписчиков было небольшим, а Skype делали приличные люди, ты просто ставил на сервер клиент с его API + плагин к этому клиенту, служащий связкой между клиентом и серверным кодом. Теперь, вот, всюду пишут про мессенджерских «ботов».
Мессенджеры люди, хотя бы, действительно читают. У них есть встроенные средства извещений (попапы, трей, кто во что горазд), управления каналами (добавить/выкинуть контакт), мультимедийности (преобразование URL в картинки, например). Немаловажно, что если речь идет о самых реальночитаемых уведомлениях — мгновенных извещениях от СЭД и прочих корпоративных штук — можно для пущей безопасности поднять свой сервер, благо, старые протоколы типа XMPP все еще активно поддерживаются на всех платформах. Да и почтовые клиенты на месте не стояли, многие из них не уступают по части мгновенности мессенджерам, а по части всего остального — настроек, нотификаций, поиска, защищенности и т.д. — значительно их превосходят.
Какую пользу дает использование этой технологии? Кроме откручивания показов малоэффективной рекламы, конечно. Кто-нибудь для себя лично или своих клиентов видит пользу?HunterXXI
22.07.2016 10:11если первый вопрос не риторический, то он не по адресу.
а по поводу последнего, я ясно высказался в статье
хочу сказать, что мной написано два действительно важных приложения, одно из которых может оповещать о температуре в серверной, а второе присылает уведомления, если на маршрутизатор ядра логинится кто-то из админов.
noober22
22.07.2016 11:35Нет, все вопросы не риторические и заданы всем, кто имеет ответ. Может быть, на мессенджеры есть какие-то драконовские ограничения, которых мне со стороны не видно. Возможно, мне самому надо будет думать об оповещениях в будущем, вот я и пытаюсь понять, стоит ли с этим web-push связываться.
«По поводу последнего»: а вы не думали сразу в какой-нибудь Телеграм кидать оповещалку? Или, допустим, отправить старый добрый e-mail? Клиент K-9 на Андроиде мгновенно получает по IMAP письмо, показывая число непрочитанных писем прямо поверх иконки, не хуже других инструментов извещения. На десктопном компьютере все еще лучше. Почему было сделано именно так?HunterXXI
22.07.2016 11:47начну с последнего вопроса — это разработка ради разработки. просто разбираюсь в технологии и пытаюсь найти ей применение.
все важные бизнес оповещения в серьёзных компаниях используют email. супер важные, дублируются через СМС. все остальные каналы связи это по сути моветон для реальных проектов.
я бы советовал вам обратить внимание на уведомления в том случае, если вы делаете веб-приложение корпоративного уровня по типу почтового клиента, которому крайне необходимы оповещения на рабочий стол.
RouR
Вот не надо меня отвлекать.
HunterXXI
так вы и не отвлекайтесь
bustEXZ
Почему ваш код не в какой либо системе контроля версий? Вы думаете легко с драйва читать что у вас написано?)
HunterXXI
согласен, неправ. я посчитал, что код уж больно примитивный, что бы удостаивать его контроля версий.