Web Notifications をクロスブラウザで使ってみる

概要

caniuse.com を見たら、Firefoxでも Web Notifications をサポートしていたので、クロスブラウザ(Chrome,Firefox)で動くコードを書いてみた。
(webkitのベンダープレフィックス無しのサンプル)

Web Notifications APIをサポートしているかのチェック処理

CoffeeScript

  if window.Notification

既にパーミッションがあるかチェックする処理

CoffeeScript

    $("#checkPermission").on "click", ->
      if Notification.permission
        ## Firefox
        $("#result").text Notification.permission
      else
        ## Chrome
        $("#result").text (new Notification "check").permission

• Firefoxの場合は、グローバルスコープから参照可能なNotificationコンストラクタののpermissionから参照可能
• Chromeの場合は、Notificationインスタンスから参照可能
• Notificationインスタンスを生成すると、パーミションがある場合、通知が表示されてしまうので、Firefoxの方が使いやすい

ブラウザの外に通知を表示するため、ユーザに権限を求める

CoffeeScript

    $("#requestPermission").on "click", ->
      Notification.requestPermission()

• Geolocation APIと同じようなinfobarが表示される
• Chromeの場合は、[拒否]か[許可]を選択
• Firefoxの場合は、以下から選択
  • このセッションでは表示する
  • 常に通知を表示する
  • 通知をブロックする
  • 今回は無視する

ここからが本題、通知の表示処理

CoffeeScript

    $("#show").on "click", ->
      notification = new Notification $("[name=title]").val(),
                       tag: $("[name=tag]").val()
                       body: $("[name=body]").val()
                       iconUrl: $("[name=icon]").val()  ## Firefox
                       icon: $("[name=icon]").val()     ## Chrome

• Notificationインスタンスを生成すると即座に表示 (webkitのベンダープレフィックスがついてた場合と大きく違う箇所)
• 同じtagを設定しているnotificationは同じ場所に表示
• bodyには、htmlのタグも書ける
• Firefoxの場合、iconUrlに画像のurlを設定可能 (Data URI Schemeも利用可能)
• Chromeの場合、iconに画像のurlを設定可能 (Data URI Schemeも利用可能)
• Specを見る限りは、FirefoxのiconUrlの方が正しい?

おまけ、通知をクリックしてブラウザのサイズを元に戻すコード

通知機能は、ブラウザが最小化している場合にも表示可能なので、通知をクリックしてブラウザのサイズを元に戻すコードを書いてみた、ただし、Chromeしか期待した動作にはならない。
(これだけはクロスブラウザで書けなかった)

CoffeeScript

      notification.onclick = ->
        notification.close()
        ## chrome only 
        ## If the window is minimized, restore the size of the window
        window.open().close()
        window.focus()

• Firefoxでも最小化しているブラウザを元のサイズに戻して、フォーカスを当てるコードの書き方はあるのかな？

サンプルコード

JSFIDDLE

• Chrome 26+
• Firefox 22+

参考にした記事

• HTML5 ROCKS webkitのベンタープレフィックスの付きの記事
• W3C
• WHATWG