html5 Web Notifications

標籤：javascript   web   notification   html5   desktop   

最近做的一個仿網頁版的網站，有一個新需求， 需要實現在新訊息入線時，有案頭通知的效果，所以最近就稍微瞭解一下這個html5的新屬性。

這邊有個不錯的demo：html5 web notification demo

從上面這個demo中 我們就可以擷取所需要的基本核心代碼，如下：

<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><a href="#" onclick="return show()">Notify me!</a>

其中：Notification.requestPermission         這句代碼的功能就是向使用者請求許可權允許。

好吧，通過以上的例子，基本思路已經有了，首先載入文檔時，就向使用者請求許可權，擷取許可權後以後都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下  驗證是通過的，但是在chrome下總是出不來，後來發現這樣一段話

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.

原來在chrome下是必須要使用者手動觸發的，否則，chrome瀏覽器會無視這段的js

但是在我們網站裡肯定不可能加一個按鈕或者超連結來顯式的讓使用者授權吧，好吧， 實際上這也不是個事情，我們可以在使用者經常點的按鈕上順便處理下這個授權就好，在chrome下是一次授權終身有用。除非你進入設定把他禁了。

整合一下，如下

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