0
實作小玩具功能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

667

Published on

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

Published in: Technology, Business
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
667
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
8
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Transcript of "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
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×