Notificationsの使い方

FirefoxでNotification を利用できるようになり、(Chromeはデフォルトで実装されてる)今後実装する機会も多くなりそうです。
Google先生に聞いてみるとdesktopifyが有名ですが中身を見ると自分で実装した方が早い気がしてます。
簡単に以下使い方をメモで残しておきます。

今回確認する用のアプリ

今回はRails 3.1.0rc1で簡単なアプリを作ってみました。

f:id:POCHI_BLACK:20110527181852p:image

簡単ですが、以下の流れで確認していきます。

  • クライアントにデスクトップ通知の確認を実施
  • 現状の通知状態を確認
  • 実際に通知してみる

クライアントにデスクトップ通知の確認を実施

画面のActivateを選択すると以下のダイアログができてデスクトップ通知を有効にするかどうか確認します。

f:id:POCHI_BLACK:20110527182309p:image

ここのコードはこんな感じです。(CoffeeScriptです)

$(document).ready ->
  $("#activate").live("click", ->
    window.webkitNotifications.requestPermission()
  )

<button id="activate">Activate</button>

上記のwindow.webkitNotifications.requestPermission()を呼べばユーザさんに確認できます。

現状の通知状態を確認

画面のConfirmを選択すると以下のダイアログができてデスクトップ通知を有効にするかどうか確認します。

f:id:POCHI_BLACK:20110527182947p:image

ここのコードはこんな感じです。(CoffeeScriptです)

$(document).ready ->
  $("#confirm").live("click", ->
    alert(window.webkitNotifications.checkPermission())
  )

<button id="confirm">Confirm</button>

0がユーザに許可されている状態、2がユーザが拒否している状態です。

実際に通知してみる

画面のNotification!を選択すると実際に通知が表示されます。

f:id:POCHI_BLACK:20110527182948p:image

ここのコードはこんな感じです。(CoffeeScriptです)

$(document).ready ->
  $("#notification").live("click", ->
    window.webkitNotifications.createNotification("mail.png", "pochi", "bowbow!").show()
  )

<button id="notification">Notification!</button>

showメソッドで表示することができます。

まとめ

jQueryPlugin使うのもいいですが結構簡単に使えるのでそのまま呼び出してもいいかなと個人的に思ってます。以下はなんか注意。。。

  • MacユーザはGrowl動いてないとだめ
  • FireFoxだとアドオンだからHTML読み込んだあとでもwebkitNotificationが初期化されてない(僕の勉強不足)
  • FireFoxだけどff5-notifications使ってるときはwebkitNotification使う(mozNotificationか迷った・・・)

作ったコード