HTML5 Web Notifications

Recently done a copy of the Web version of the site, there is a new requirement, need to implement the new message in the line, the effect of desktop notification, so recently a little bit about this HTML5 new properties.

There's a nice demo:html5 here. Web Notification Demo

From the above demo we can get the basic core code we need, as follows:

<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};i Nstance.onclose = function () {//Something to Do};return false;} </script><a href= "#" onclick= "return Show ()" >notify me!</a>

Where: Notification.requestpermission the function of this code is to ask the user permission to allow.

Well, through the above example, the basic idea has already, the first load document, the user request permission, access to the permissions after all 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 verification is passed, but it is always out of chrome, and later found such a phrase

Not a Bug, feature.desktop notifications can is only triggered via a user action.  Typing into the JavaScript console had 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.

The original in chrome must be manually triggered by the user, otherwise, the Chrome browser will ignore this section of JS

But in our site is certainly not possible to add a button or hyperlink to explicitly let the user authorize it, OK, actually this is not a thing, we can in the user point of the button on the way to deal with this authorization, under Chrome is a license for life-long useful. Unless you enter the setting to ban him.

Integrate, as follows

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); Settimeou T (Instance.close, 3000); };instance.onclose = function () {//Something to do}; }else if (Notification && notification.permission!== "denied") {notification.requestpermission (function (St          ATUs) {if (notification.permission!== status) {notification.permission = status; }//If the user said okay if (status = = = "granted") {var instance = new Notification (ti      Tle, {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; }}