實作小玩具功能Chrome Desktop Notification

Bruce2012/7/13雲端線上科技股份有限公司

Desktop Notification

像這樣的：

Require permission

<script>    $("#request-­‐permission").click(function()  {        //                                                    0  is  PERMISSION_ALLOWED  ↓        if  (window.webkitNotifications.checkPermission()  !=  0)  {            window.webkitNotifications.requestPermission();        }    });</script>

必須綁在user操作(例如click)上

產生Notification

<script>    var  popup  =  window.webkitNotifications.createNotification(                                  "icon.png",  "greet",  "hello  world"  );    popup.show();</script>

HTML Notification

<script>    var  popup  =  window.webkitNotifications.createHTMLNotification(                                  "http://www.myoops.org/main.php"  );    popup.show();</script>

替換notification

替換notification

替換notification

<script>    var  popup  =  window.webkitNotifications.createNotification(                                  "icon.png",  "greet",  "hello  world"  );    popup.show();

   popup.cancel();    popup  =  window.webkitNotifications.createNotification(                                  "icon.png",  "greet",  "又⼀一則新訊息"  );    popup.show();</script>

重點

按⼀一下切換到該tab

<script>    var  popup  =  window.webkitNotifications.createNotification(                                  "icon.png",  "greet",  "hello  world"  );    popup.onclick  =  function(){  window.focus();  popup.cancel();  }    popup.show();</script>

切換到該tab

順便把notification關掉

播放音效

• 我還沒實作到這塊• 原理是在 ondisplay event 播放聲音

• Google 是使用flash播放聲音

Notification interface

interface  Notification  :  EventTarget  {    //  display  methods    void  show();    void  cancel();

   //  event  handler  attributes    attribute  Function  ondisplay;    attribute  Function  onerror;    attribute  Function  onclose;    attribute  Function  onclick;}

官方API文件

• http://dev.chromium.org/developers/design-documents/desktop-notifications/api-specification