006 實作小玩具功能:chrome desktop notification
-
Upload
bruce-li -
Category
Technology
-
view
846 -
download
4
description
Transcript of 006 實作小玩具功能:chrome desktop notification
實作小玩具功能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