🧊

5分でわかった気になるWeb Notifications API

Web Notifications

これを!5分で!

許可を得る

Notification
  .requestPermission()
  .then(function(status) {
    if (Notification.permission !== status) {
      Notification.permission = status;
    }
  });

statusは、

  • granted: 許可したとき
  • denied: ブロックしたとき
  • default: はじめてのとき(≒ denied)

これで「許可する」を選んでもらえれば、通知ができるように。

表示する

var ntf = new Notification('やっほー');

// 消すのは手動
ntf.close();

自動で消したいならsetTimeoutです。
Safariだと自動的に閉じたりするらしい。(未確認)

表示オプション

var options = {
  tag:  'group',  // グループ化してまとめる
  body: 'ほげ',   // タイトルの下に出るテキスト
  icon: 'ntf.png' // 通知のアイコン画像
  // ほかにもいろいろ
};
var ntf = new Notification('やっほー', options);

イベント

var ntf = new Notification('やっほー');

ntf.addEventListener('click', function(ev) {
  console.log('click');
}, false);

イベントはこの2つ。

  • onclick
  • onerror

onclose / onshowはdepricatedらしい。

対応状況は

Can I use... Support tables for HTML5, CSS3, etc

お察し。

以上。