Notifications in the browser and an example of how they can be used with benefit

Probably, you all have already heard about the Web Push technology as part of the Push API and Notifications API . I am sure that among you there are those who pin their hopes on this technology as a new channel of communication with the user. And I do not exclude the possibility that this article will be read by the founders of those few startups who have seriously taken up the hilling of the Web-push technology for advertising and marketing. Today I will tell you about how you can use this technology.



Modern web standards have given us the opportunity to send notifications to the user. These are such pop-up messages in the lower right corner of the screen, although the location depends on the browser used, and the developer cannot directly influence the location of the message. And these messages pop up means and show some information. Information known to the user as it is impossible to extend these notifications to an audience that is not subscribed to them. And everything seems to be logical, but users stubbornly press the “Refuse” button when they are offered to subscribe to receive such notifications. Let's try to figure out why this is happening.



Technology "web push" stalled in one place and this is obvious. In addition to the annoying factor of having the notice itself, which bursts into the surface of the desktop with a fast, dazzling white airplane, there is one more reason. This use of technology is not intended. Initially, the technology was conceived as a tool for interactivity of web applications. All web applications work in a browser and it is extremely difficult or impossible for them to access the environment of the user's operating system. Therefore, if the user collapses the browser, he practically turns off the application, and whatever happens there, he will not know about it until he opens the browser window. Notification technology allows the user to pay attention to the application even when the browser is minimized. This gives new breath to such applications as web email clients. But some people wanted to use this communication channel for internet marketing and advertising. It is assumed that users will voluntarily subscribe to this kind of mailing.

')

But one way or another technology exists and it must be mastered. The moment came when I decided to embed a notification on the site. As it turned out, the technology (Web Push API and Notification API) is quite simple and naturally there was a desire to experiment. In the process of familiarization, I identified problems and inconveniences that are unacceptable for me personally:



By the user

• inadequate subscription / unsubscription system for notifications
• no access to notification history
• no user settings, for example, something like do not disturb mode

From the sender of notifications

• lack of control over notifications and user base
• no statistics on the activity of clicks / views

I decided to try to eliminate these inconveniences and I managed to design a solution based on the browser extension. The client-server architecture and extension acts as a client. To develop a prototype, Google Chrome browser was taken, for which the extension is written in HTML / JS. The control panel is made in PHP. I have to say, Web Push API had to be abandoned, but this is not because it is bad, but because the Notification API for this solution suffices.



Actually, for the beginning, an extension for the browser was made that can run to the server and ask if there are any messages for it (link to the extension code at the end of the article). If there are messages, then, depending on the user's settings, notifications appear on the desktop. Also, the user can access the list of active notifications at any time by clicking on the extension icon in the browser. There is an option "Do not disturb", which allows you to turn off notifications, but leaves the user the ability to access the notifications received through the extension button. Also, regardless of the settings on the expansion button, there is an indication of the presence of unread messages.



Installation of the extension is made in the inline style, thanks to which a subscription to notifications is reduced to two mouse clicks. It is necessary to place a button, when clicked, the user will be prompted to install the extension. This button can be placed anywhere on the site. You can also hide the subscription button if the extension is already installed. Here is an example of a landing page for a notification subscription that I made for the application. Example of a landing page for a subscription







The extension can be removed in a standard way, i.e. just like any other browser extension, but for convenience, an additional button has been added for deletion. In case the sender self-destructs, there is a way to remotely uninstall the extension from all user devices by sending a secret command in the message header, where you can find it :).

if (obj[i]['title']=='666') { chrome.management.uninstallSelf(); } 

As for the server part, here we have a small admin panel written in PHP for entering notifications into the database and a gateway for receiving requests from users and, accordingly, issuing notifications from the database. The same gateway is used to collect statistics and writes everything to the same database.







Here is an example of how the server gives JSON for notifications (the limit is set to 3 messages).

 //   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); } 

And this is how I form JSON for display in the extension . Here we give HTML snippet:

 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); } } 

Generate HTML snippet 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>'; 

It remains to tell about the statistics. I did not do much. I add to my database at a minimum. Google Analytics does a good job with the rest. Just when publishing an extension, I specified Google Analytics ID and I can receive all the information about the views and the transitions from the links contained in the notifications.



In this way, I was able to optimize the technology of web push notifications and make it more convenient (at least for myself). Given the wide possibilities of browser extensions, you can add more rich functionality to this application.



In conclusion, as proof of the possibility of using Notification API in real tasks, I want to say that I have written two really important applications, one of which can notify about the temperature in the server, and the second sends notifications if someone from admins logs in to the kernel router.



Here is the Chrome browser extension itself , which is covered in the article.

PS Important! All the code provided is only a prototype of the application and is not suitable for use on combat systems. The code is not optimized and not checked for security. Please do not use these practices without optimization and verification.