The document discusses implementing desktop notifications in Chrome. It provides code examples for requesting permission to display notifications, creating different types of notifications including images and HTML, replacing existing notifications, and clicking a notification to switch to its associated browser tab. It also mentions playing sounds on notification display and links to the official desktop notification API specification.

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

2. Desktop Notification
像這樣的：

3. Require permission
必須綁在user操作(例如click)上
<script>
$("#request-­‐permission").click(function()
{
//
0
is
PERMISSION_ALLOWED
↓
if
(window.webkitNotifications.checkPermission()
!=
0)
{
window.webkitNotifications.requestPermission();
}
});
</script>

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

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

6. 替換notification

7. 替換notification

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. 按⼀一下切換到該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. 播放音效
• 我還沒實作到這塊
• 原理是在 ondisplay event 播放聲音
• Google 是使用flash播放聲音

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. 官方API文件
• http://dev.chromium.org/developers/design-
documents/desktop-notifications/api-
specification