Webブラウザからの「通知」（Notification）

はじめに

Chrome拡張の通知機能を調べていたのですが、その過程でWebの標準として「通知」があることを知りました。

http://www.w3.org/TR/2013/WD-notifications-20130912/

そこで、Web標準の「通知」機能をひと通り動かしてみました。

動かせるサンプルは以下に置いています。

http://bit.ly/notify9999

GitHubにも置いてあります（https://github.com/kuwalab/WebStandard）

通知はブラウザ「外」に行うため、ブラウザ側ではそのサイトから通知を受けることを許可しないと通知ができません。

サンプルでも2つボタンがあり「通知の許可」ボタンを押すことでユーザーに通知の許可を求めます（画面はChrome）。

f:id:kuwalab:20131019165944p:plain

許可をすると、「通知」ボタンで通知が表示されます。

f:id:kuwalab:20131019165953p:plain

通知を許可したサイトは、設定から確認・削除できます。

f:id:kuwalab:20131019170029p:plain

コードは以下のとおりです。

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>通知のテスト</title>
  <style>
input {
  background-color: #0000ff;
  color: #ffffff;
  border-radius: 5px;
  padding: 5px;
  border: none;
  outline: 0;
}

input:hover {
  cursor: pointer;
}

input:active {
  cursor: pointer;
  background-color: #000099;
}
  </style>
 </head>
 <body>
  <input type="button" id="request" value="通知の許可"><br>
  <input type="button" id="fire" value="通知!!">
  <script>
// 参考 https://developer.mozilla.org/ja/docs/Web/API/notification
(function() {
  if (!window.Notification) {
    // Notificationがなければ無視
    return;
  }
  var permission = 'denied';
  document.getElementById('request').addEventListener('click', function() {
    // permissionを要求する。pは要求の結果
    // Notificaton.permissionはFirefox 24にはあるが、Chrome 30にはない
    // 現状では、requestPermissionのコールバックの引数でパーミッションを取得する
    Notification.requestPermission(function(selectedPermission) {
      permission = selectedPermission;
    });
  });
  document.getElementById('fire').addEventListener('click', function() {
    if (permission !== 'granted') {
      console.log('not allow');
      return;
    }
    var notify = new Notification('通知のタイトル', { tag: 'tag', body: '通知の本文', icon: 'icon.png' });
    // クリックでWebページを開く
    notify.addEventListener('click', function() {
      open('https://github.com/kuwalab/WebStandard');
    });
    
    // 5秒経過で消す。
    setTimeout(function() {
      notify.close();
    }, 5000);
  });
})();
  </script>
 </body>
</html>

まず、通知の要求についてですが、Notification.requestPermissionで要求とその結果の取得をします。

Notification.requestPermission(function(selectedPermission) {
  permission = selectedPermission;
});

requestPermissionメソッドの引数はコールバック関数となっていて、そのコールバック関数の引数でパーミッションが取得できます。

仕様的には、Notification.permissionでも取得できそうなのですが、Chrome 30では確認できませんでした。Notification.permissionはFirefoxでは取得できます。

実際の通知は以下の部分です。

var notify = new Notification('通知のタイトル', { tag: 'tag', body: '通知の本文', icon: 'icon.png' });

引数でインスタンスを受けているのは後で通知をクローズするためです。自動でクローズしないのであれば必要ありません。

通知は、非常にシンプルな作りで基本的には文字だけです。引数にアイコンを1つだけとることができます。また、例にあるようにクリックした際のイベントを設定できます。

まとめ

Notificationは一般的な通知を実現しています。通知を受けることを許可される環境であれば、有効に使える可能性があります。難点は、当たり前ですがブラウザが起動していないと通知されないので、ブラウザが起動していないことを考慮する必要があります。

Macなので、Safari 6とFirefox 24とChrome 30でのみ動作を確認しています。IEは多分動きません。

コンピュータクワガタ

かっぱのかっぱによるコンピュータ関連のサイトです

Webブラウザからの「通知」（Notification）

はじめに

まとめ