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

Cookie使用の同意を求めるポップアップを表示する (Cookie Consent by Osano)

Cookie Consent by Osano の使い方について説明します。

Web

Source Map に関する情報

目次1. Source Map とは?従来の問題点ソースマップ(Source Map)ソースマップに関連するファイルを整理するソースマップの動作ソースマップは誰が作るのか?2. Chrome ブラウザ …

Firefox

Firefox の 強化型トラッキング防止機能

目次1. Firefox の強化型トラッキング防止機能2. 用語トラッカー (Trackers)ソーシャルメディアトラッカートラッキングコンテンツサードパーティのクッキー クロスサイトのトラッキングク …

Web

ウェブブラウザがページを取得して表示するまでの流れ

目次1. はじめに2. Chrome デベロッパーツールの [Network]パネル3. リソース毎の処理の流れ4. その後の流れ5. DOMContentLoaded と load イベント6. グ …

Web

インターネットの説明に欠けているもの?

 株式会社日本レジストリサービス(以下JPRS、本社:東京都千代田区、代表取締役社長 東田幸樹)は、インターネット教育の支援活動の一環として、全国の中学校・高校・高等専門学校を対象に、マンガ小冊子『ポ …