Web

Notification API のポイント解説

投稿日:2019年10月1日 更新日:

1. はじめに

Notifications API は、デスクトップ通知を行うための API です。

この記事では、Notification API のポイントに絞った解説を行います。

デスクトップ通知

Notification API が行うこと

Notification API にできることは限られています。

  • アクセス中のドメインに対して「デスクトップ通知」が許可されているかどうかを取得する。
  • ユーザーに対して、デスクトップ通知を表示する許可をリクエストする。
  • デスクトップ通知を表示する。

※ Notification API 関連での「通知」という言葉は、「デスクトップ通知」のことです。

補足

「どのドメインに対してデスクトップ通知が許可されているのか」を管理しているのはブラウザです。

Chrome の「通知」設定画面
アクセス中のドメインに対する通知設定を閲覧 (Chrome)

2. Notification API の使い方

主な使い方について説明します。

(1) デスクトップ通知が許可されているかどうかを取得する。

Notitication オブジェクトの permission プロパティを確認することで、現在アクセスしているドメインに対してデスクトップ通知が許可されているかどうか知ることができます。

Notification.permission

この値は、以下の3つの文字列のうちのどれかになっています。

Notification.permission の値
意味
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 ではブロック扱いになるようです
  }
});

ユーザーに対して、デスクトップ通知の表示許可をリクエストしています (Chrome)

(3) デスクトップ通知を表示する

Notification オブジェクトのインスタンスを生成すると、デスクトップ通知が表示されます。

デスクトップ通知の内容を凝ったものにしたい場合は、Notification オブジェクトのコンストラクターにオプションを指定します。

Notification オブジェクトのコンストラクターの構文は以下です。

var myNotification = new Notification(title, options);

何もオプションを指定しない最低限のコード例は以下になります。

var notification = new Notification("こんにちは!");
デスクトップ通知を表示したところ

(4) まとめてみる

今までの流れをまとめてみると、以下となります。

  1. デスクトップ通知が許可されているかどうかを取得する。
  2. ユーザーの意思が分からない場合は、ユーザーにデスクトップ通知の表示許可をリクエストする。
  3. 許可されれば、デスクトップ通知を表示する。

実はこの流れは、例 | Notification – Web API | MDN で紹介されているコード例と同じになっています。リンク先のコードも参照してみてください。

3. デモ

デモページを用意しました。

デモページ

🔗 Notification API Test

4. おわりに

Notification API は Push API と合わせて説明されることが多いのですが、その場合どこからどこまでが Notification API の仕事なのかが分かりにくかったりします。

そのため、この記事では Notification API のポイントについてのみ解説してみました。

5. 参考

📂-Web

執筆者:labo


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

Web

シンタックス・ハイライト・ライブラリ「highlight.js」の使い方

シンタックス・ハイライト・ライブラリ「highlight.js」の使い方について説明します。

Google App Engine

Google App Engine にデプロイしてあるファイルをダウンロードする

Google App Engine にデプロイしてあるファイルをダウンロードする方法について説明します。

Web

Basic認証の設定手順

Basic認証の設定手順について説明します。

Google App Engine

GAE (PHP 7) で Cloud Firestore を使う手順

Google App Engine で Firestore を使う手順について説明します。

web development

Webページが読み込む CSS, JS コードから、実際に使われている部分のみを抽出する

Webページが読み込む CSS, JS コードから、実際に使われている部分のみを抽出する方法を紹介します。