Повідомлення в браузері і приклад того, як їх можна використовувати з користю



Ймовірно, ви чули про технологію «Веб-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. Важливо! Весь наданий код є лише прототипом програми і не підходить для використання на бойових системах. Код не оптимізований і не перевірявся на безпеку. Будь ласка, не використовуйте дані напрацювання без оптимізації та перевірки.
Джерело: Хабрахабр

0 коментарів

Тільки зареєстровані та авторизовані користувачі можуть залишати коментарі.