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

許可を得る

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

お察し。

以上。