006 實作小玩具功能:chrome desktop notification

12
實作小玩具功能 Chrome Desktop Notification Bruce 2012/7/13 雲端線上科技股份有限公司

description

簡單的tutorial:如何實作像Gmail、Google Calendar的Desktop Notification

Transcript of 006 實作小玩具功能:chrome desktop notification

Page 1: 006 實作小玩具功能:chrome desktop notification

實作小玩具功能Chrome Desktop Notification

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

Page 2: 006 實作小玩具功能:chrome desktop notification

Desktop Notification

像這樣的:

Page 3: 006 實作小玩具功能:chrome desktop notification

Require permission

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

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

Page 4: 006 實作小玩具功能:chrome desktop notification

產生Notification

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

Page 5: 006 實作小玩具功能:chrome desktop notification

HTML Notification

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

Page 6: 006 實作小玩具功能:chrome desktop notification

替換notification

Page 7: 006 實作小玩具功能:chrome desktop notification

替換notification

Page 8: 006 實作小玩具功能:chrome desktop 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>

重點

Page 9: 006 實作小玩具功能:chrome desktop notification

按⼀一下切換到該tab

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

切換到該tab

順便把notification關掉

Page 10: 006 實作小玩具功能:chrome desktop notification

播放音效

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

• Google 是使用flash播放聲音

Page 11: 006 實作小玩具功能:chrome desktop notification

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