Html5 Web communications

Recently, a website that is similar to a web version has a new requirement. It needs to implement desktop notification when new messages are connected, so I will take a look at the new html5 attribute recently.

There is a good demo here: html5 web notification demo

From the demo above, we can obtain the required basic core code, as shown below:

<script>var Notification = window.Notification || window.mozNotification || window.webkitNotification;Notification.requestPermission(function (permission) {// console.log(permission);});function show() {var instance = new Notification("test title", {body: " test message"});instance.onclick = function () {// Something to do};instance.onerror = function () {// Something to do};instance.onshow = function () {// Something to do};instance.onclose = function () {// Something to do};return false;}</script>Notify me!

The function of the Code Notification. requestPermission is to request the permission to allow the user.

Okay, through the above example, the basic idea is already available. First, when loading the document, we will request the user the permission. After obtaining the permission, it will be so easy.

window.addEventListener('load', function () {  // At first, let's check if we have permission for notification  if (Notification && Notification.permission !== "granted") {    Notification.requestPermission(function (status) {      if (Notification.permission !== status) {        Notification.permission = status;      }    });  }});

Firefox passes the verification, but it always fails in chrome. Later I found such a paragraph

Not a Bug, Feature.Desktop Notifications can only be triggered via a user action.  Typing into the JavaScript console has the same effect as raw javascript code embedded into the web page (no user action).  Typing the javascript into the location bar, however, represents a user-action (the user is intentionally visiting a javascript link to enable notifications, probably for sites that tend to use href="javascript：" instead of onclick="".I'm pretty sure this is a non-issue.

In the past, the user must manually trigger it in chrome. Otherwise, chrome will ignore this section of js

However, you cannot add a button or hyperlink to your website to explicitly authorize users, we can handle this authorization by the way on the buttons frequently clicked by users, which is useful for life in chrome. Unless you go to the settings and disable it.

Integration:

function showMsgNotification(title, msg){var Notification = window.Notification || window.mozNotification || window.webkitNotification;if (Notification && Notification.permission === "granted") {var instance = new Notification(title, {body: msg,icon: "image_url"});instance.onclick = function () {// Something to do};instance.onerror = function () {// Something to do};instance.onshow = function () {// Something to do//console.log(instance.close);setTimeout(instance.close, 3000); };instance.onclose = function () {// Something to do}; }else if (Notification && Notification.permission !== "denied") {      Notification.requestPermission(function (status) {          if (Notification.permission !== status) {            Notification.permission = status;          }          // If the user said okay          if (status === "granted") {          var instance = new Notification(      title, {      body: msg,      icon: "image_url"      }      );      instance.onclick = function () {      // Something to do      };      instance.onerror = function () {      // Something to do      };      instance.onshow = function () {      // Something to do      setTimeout(instance.close, 3000);       };      instance.onclose = function () {      // Something to do      };                }else {          return false          }        });  }else{  return false;  }}