Web Notificationsのつかいかた - ゆうなんとかさんの雑記帳的な。

Web Notificationsとは？

ユーザーに対してブラウザからなにかしらの通知を行うための仕組みを提供するものです。IEでは残念ながら使えません。
f:id:yuu_xxxx:20131111194101p:plain
これはWindows版のGoogle Chromeの例ですが、こういうのが出てきます。ダイアログのようにユーザーの操作を止めないので、裏で何かしていたことが完了したときにぽんと出してあげるといい感じになるのではないでしょうか。
ちなみにMavericksのSafariはこれが通知センターに出てきます。
f:id:yuu_xxxx:20131111194534p:plain
これもこの前のGeolocationAPIと同じく、ユーザーの権限が必要です。

つかいかた

使えるかどうか確認するには以下のようにします。
if(window.Notification) {
  // 使えるブラウザでの処理
} else {
  // 使えないブラウザでの処理
}

ユーザーに許可を求めるときは

Notification.requestPermission()

を使います。許可があるか確認するには、Firefoxの場合Notificationクラスに、Google Chromeの場合はNotificationクラスのインスタンスにpermissionというプロパティがあるのでそれを確認します*1。
表示させるには次のようにします。

var note = new Notificaiton("タイトル", { tag: "タグ", body: "本文", iconUrl: "アイコンURL(Firefox)", icon: "アイコンURL(Google Chrome)" });
note.onclick = function() { /*このようにイベントも設定できる*/ }
note.show();

アイコンURLはData URIも使えます。

*1:JavaScriptでこの言い回しが正しいかはこの際おいておきましょう