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

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