FirefoxでのHTML5 Notifications API 通知方法

2013年6月21日金曜日

FirefoxでのHTML5 Notifications API 通知方法

Firefox 22からHTML5 Notifications APIがサポートされるという事で早速使ってみた。とりあえずこんな感じで使える。

HTML5 Notifications APIfunction 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();

HTML5 Notifications API
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26	`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オブジェクトとなっている。
通知クリックで、該当のウィンドウ(タブ)をアクティブ化とかできれば楽しそうだったけど、無理っぽい。