• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
006 實作小玩具功能:chrome desktop notification
 

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

on

  • 787 views

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

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

Statistics

Views

Total Views
787
Views on SlideShare
787
Embed Views
0

Actions

Likes
0
Downloads
7
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

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

    • 實作小玩具功能Chrome Desktop NotificationBruce2012/7/13雲端線上科技股份有限公司
    • Desktop Notification 像這樣的:
    • Require permission 必須綁在user操作(例如click)上<script>    $("#request-­‐permission").click(function()  {        //                                                    0  is  PERMISSION_ALLOWED  ↓        if  (window.webkitNotifications.checkPermission()  !=  0)  {            window.webkitNotifications.requestPermission();        }    });</script>
    • 產生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