Firefox 22から
HTML5 Notifications APIがサポートされるという事で早速使ってみた。
とりあえずこんな感じで使える。
function notifyReq(){
Notification.requestPermission(function(permission){
console.debug("Notification permission: "+permission);
if(Notification.permission == "granted"){
notify();
}
});
};
function notify(){
switch(Notification.permission){
case "granted":
new Notification("デスクトップ通知テスト", {
icon:"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEixMhqVE-KPC4uFvSew7A5jZ64O0oJVsUXtBJVwv6JTF0BRIV_dI0hyYUh8qEGR6pdJ-WJaYd9xk97foeo_VCFIXc1O6vI8wWbl6grHGpbItKdrIMbn4tU8w4Zeaqj05ynBJdbhEHtkyWgE/s220/logroid_150.png",
body:"デスクトップ通知のテストです",
tag:"notification-test",
});
break;
case "default":
notifyReq();
break;
case "denied":
console.warn("デスクトップ通知が拒否されています");
break;
}
};
notify();
こんなカンジで通知されます。
Notification.permission
で現在の権限を見ることができる。
デフォルト状態(ポップアップ表示)なら
"default"
、許可されていれば
"granted"
、拒否されていれば
"denied"
の文字列が返される。
表示が許可されていない場合は
Notification.requestPermission
で、権限をリクエストする。こんなポップアップが表示される。
その後、
new Notification
にタイトルとオプションを設定したハッシュを渡す。
ハッシュの中のiconはURLでも良いし、base64の文字列でも良い。
tagを設定すると、デスクトップ通知が多重表示されるのを防げる。
という感じ。
また、
new Notification
で得られるインスタンスには、
onclose
、
onclick
、
onerror
、
onshow
イベントが登録できる。
onclick時に得られるEventのtargetはNotificationオブジェクトとなっている。
通知クリックで、該当のウィンドウ(タブ)をアクティブ化とかできれば楽しそうだったけど、無理っぽい。
デモ
Firefoxでの HTML5 Notifications (デスクトップ通知) 設定変更方法 - ログろいど