Notification API で通知を出してみる
ブラウザで Gmail のタブとかを開きっぱなしにしておいて、メールが来たらデスクトップのバナー通知を表示する、みたいなアレを実装してみた。
- 動作デモ : Practice Notification
- コード : frontend-sandboxes/index.html at master · Neos21/frontend-sandboxes
実装自体は簡単。new Notification とインスタンス化する感じなんだけど、この変数を後で使うことはなさそう。
// 初回は通知の許可を得る : 許可されていない場合は `denied` が返される
const permission = await Notification.requestPermission();
if(permission !== 'granted') return console.warn('通知が許可されていないので中止');
// バナー通知を表示する
const notification = new Notification('Hello World', { // タイトルを改行すると Mac Chrome では「…」で2行目が省略表示された
body: 'Hello Body\nほげほげ', // タイトル下の本文・Mac Chrome では `\n` で改行できた
requireInteraction: true, // ユーザが操作するまで閉じなくなる
data: 'My Data', // テキトーに値を付与できる
//icon: './icon.png', // Mac Chrome の場合、通知バナーの右側に表示される
//badge: './badge.png', // Mac Chrome の場合、表示されず。表示領域が足りない場合に表示されるアイコンらしい
renotify: true, // 同じ通知を許可するかどうか
tag: 'my-notification', // `renotify: true` の場合は必須。同一のタグ名を使用すると同じ通知としてグループ化される
vibrate: [200], // バイブレーション
//silent: true, // `silent: true` と `vibrate` は併用不可
//timestamp: 1600000000000, // 指定のタイムスタンプが送れる
//dir: 'auto', // テキストの方向
//lang: 'ja', // 言語指定
});
Mac Chrome で動作確認したが、主に使うのは body で指定できる通知本文、requireInteraction、あとは後処理に使えそうな data プロパティぐらいだろうか。
最近はブラウザがデフォルトで通知を無効にしていたりして、エンドユーザからも煙たがられており、あえて通知させたい場面が少ないとは思うが、今更ながら試してみた。
