ラボラジアン 目次
1. はじめに
Notifications API は、デスクトップ通知を行うための API です。
この記事では、Notification API のポイントに絞った解説を行います。
Notification API が行うこと
Notification API にできることは限られています。
- アクセス中のドメインに対して「デスクトップ通知」が許可されているかどうかを取得する。
- ユーザーに対して、デスクトップ通知を表示する許可をリクエストする。
- デスクトップ通知を表示する。
※ Notification API 関連での「通知」という言葉は、「デスクトップ通知」のことです。
補足
「どのドメインに対してデスクトップ通知が許可されているのか」を管理しているのはブラウザです。
2. Notification API の使い方
主な使い方について説明します。
(1) デスクトップ通知が許可されているかどうかを取得する。
Notitication オブジェクトの permission プロパティを確認することで、現在アクセスしているドメインに対してデスクトップ通知が許可されているかどうか知ることができます。
Notification.permissionこの値は、以下の3つの文字列のうちのどれかになっています。
| 値 | 意味 |
|---|---|
| default | ユーザーの選択は不明のため、ブラウザは拒否されたかのように動作する。 |
| granted | ユーザーは通知が表示されることを許諾している。 |
| denied | ユーザーは通知が表示されることを拒否している。 |
各ドメインに対して「デスクトップ通知」が許可されているかどうかは、ブラウザが管理しているため、Notification API はブラウザからこれらの値を取得していることになります。
(2) ユーザーにデスクトップ通知の表示許可をリクエストする
現在のドメインに対するデスクトップ通知の表示許可状態が不明の場合は、ユーザーに許可をリクエストします。
そのためには、Notification オブジェクトの requestPremission メソッドを実行しますが、その際にコールバック関数を渡します。このコールバック関数の引数には、リクエストの結果文字列が格納されます。
Notification.requestPermission(function(permission) {
switch (permission) {
case 'granted':
console.log('リクエストは許可されました。');
// 通常はここで、デスクトップ通知の表示を行ったりします。
break;
case 'denied':
console.log('リクエストはブロックされました。');
break;
default:
console.log('リクエストのポップアップが閉じられました。');
// Chrome ではブロック扱いになるようです
}
});
(3) デスクトップ通知を表示する
Notification オブジェクトのインスタンスを生成すると、デスクトップ通知が表示されます。
デスクトップ通知の内容を凝ったものにしたい場合は、Notification オブジェクトのコンストラクターにオプションを指定します。
Notification オブジェクトのコンストラクターの構文は以下です。
var myNotification = new Notification(title, options);何もオプションを指定しない最低限のコード例は以下になります。
var notification = new Notification("こんにちは！");
(4) まとめてみる
今までの流れをまとめてみると、以下となります。
- デスクトップ通知が許可されているかどうかを取得する。
- ユーザーの意思が分からない場合は、ユーザーにデスクトップ通知の表示許可をリクエストする。
- 許可されれば、デスクトップ通知を表示する。
実はこの流れは、例 | Notification – Web API | MDN で紹介されているコード例と同じになっています。リンク先のコードも参照してみてください。
3. デモ
デモページを用意しました。
デモページ
🔗 Notification API Test4. おわりに
Notification API は Push API と合わせて説明されることが多いのですが、その場合どこからどこまでが Notification API の仕事なのかが分かりにくかったりします。
そのため、この記事では Notification API のポイントについてのみ解説してみました。
