Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
實作小玩具功能Chrome Desktop NotificationBruce2012/7/13雲端線上科技股份有限公司
Desktop Notification      像這樣的:
Require permission                                    必須綁在user操作(例如click)上<script>	  	  $("#request-­‐permission").click(f...
產生Notification<script>	  	  var	  popup	  =	  window.webkitNotifications.createNotification(	  	  	  	  	  	  	  	  	  	  	...
HTML Notification<script>	  	  var	  popup	  =	  window.webkitNotifications.createHTMLNotification(	  	  	  	  	  	  	  	  ...
替換notification
替換notification
替換notification<script>	  	  var	  popup	  =	  window.webkitNotifications.createNotification(	  	  	  	  	  	  	  	  	  	  	...
按⼀一下切換到該tab<script>	  	  var	  popup	  =	  window.webkitNotifications.createNotification(	  	  	  	  	  	  	  	  	  	  	  ...
播放音效• 我還沒實作到這塊• 原理是在 ondisplay event 播放聲音• Google 是使用flash播放聲音
Notification interface  interface	  Notification	  :	  EventTarget	  {  	  	  //	  display	  methods  	  	  void	  show(); ...
官方API文件• http://dev.chromium.org/developers/design-  documents/desktop-notifications/api-  specification
Upcoming SlideShare
Loading in …5
×

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

1,044 views

Published on

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

Published in: Technology, Business
  • Be the first to comment

  • Be the first to like this

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

  1. 1. 實作小玩具功能Chrome Desktop NotificationBruce2012/7/13雲端線上科技股份有限公司
  2. 2. Desktop Notification 像這樣的:
  3. 3. Require permission 必須綁在user操作(例如click)上<script>    $("#request-­‐permission").click(function()  {        //                                                    0  is  PERMISSION_ALLOWED  ↓        if  (window.webkitNotifications.checkPermission()  !=  0)  {            window.webkitNotifications.requestPermission();        }    });</script>
  4. 4. 產生Notification<script>    var  popup  =  window.webkitNotifications.createNotification(                                  "icon.png",  "greet",  "hello  world"  );    popup.show();</script>
  5. 5. HTML Notification<script>    var  popup  =  window.webkitNotifications.createHTMLNotification(                                  "http://www.myoops.org/main.php"  );    popup.show();</script>
  6. 6. 替換notification
  7. 7. 替換notification
  8. 8. 替換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>
  9. 9. 按⼀一下切換到該tab<script>    var  popup  =  window.webkitNotifications.createNotification(                                  "icon.png",  "greet",  "hello  world"  );    popup.onclick  =  function(){  window.focus();  popup.cancel();  }    popup.show();</script> 切換到該tab 順便把notification關掉
  10. 10. 播放音效• 我還沒實作到這塊• 原理是在 ondisplay event 播放聲音• Google 是使用flash播放聲音
  11. 11. 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; }
  12. 12. 官方API文件• http://dev.chromium.org/developers/design- documents/desktop-notifications/api- specification

×