Notification

安全なコンテキスト用: この機能は一部またはすべての対応しているブラウザーにおいて、安全なコンテキスト (HTTPS) でのみ利用できます。

メモ: この機能はウェブワーカー内で利用可能です。

Notification通知 API のインターフェイスで、ユーザーへのデスクトップ通知の設定と表示に使われます。

これらの通知の表示方法や機能はプラットフォームによって異なりますが、一般にユーザーに対して非同期に情報を提供する方法を提供します。

EventTarget Notification

コンストラクター

Notification()

Notification オブジェクトの新しいインスタンスを生成します。

静的プロパティ

親インターフェイスである EventTarget から継承したプロパティもあります。

Notification.permission 読取専用

文字列で、通知の表示についての現在の権限を表します。取りうる値は次の通りです。

  • denied — ユーザーが通知の表示を拒否した。
  • granted —通知が表示されることをユーザーが受け入れた。
  • default — ユーザーの選択が不明であるため、ブラウザーは値が denied であるかのように動作します。
Notification.maxActions 読取専用 Experimental

端末とユーザーエージェントが対応しているアクションの最大数。

インスタンスプロパティ

親インターフェイスである EventTarget から継承したプロパティもあります。

Notification.actions 読取専用 Experimental

コンストラクターの options 引数で指定された、通知のアクションの配列です。

Notification.badge 読取専用

Android の通知バーなど、通知そのものを表示する空間が十分でない場合に通知を表す画像の URL を含む文字列。Android 端末では、バッジは最大4xの解像度、約 96 × 96 ピクセルの端末に対応する必要があり、画像は自動的にマスクされます。

Notification.body 読取専用

コンストラクターの options 引数で指定された、通知の本文の文字列です。

Notification.data 読取専用

通知のデータの構造化されたクローンを返します。

Notification.dir 読取専用

コンストラクターの options 引数で指定された、通知の書字方向です。

Notification.icon 読取専用

コンストラクターの options 引数で指定された、通知のアイコンの画像 URL です。

Notification.image 読取専用 Experimental

コンストラクターの options 引数で指定された、通知の一部として表示される画像の URL です。

Notification.lang 読取専用

コンストラクターの options 引数で指定された、通知の言語コードです。

Notification.renotify 読取専用 Experimental

古い通知が新しい通知に置き換えられた後、ユーザーに通知するかどうかを指定します。

Notification.requireInteraction 読取専用

論理値で、ユーザーがクリックするか閉じるかするまで、通知が自動的に閉じずに残るべきであることを示します。

Notification.silent 読取専用

静かに通知をするかどうかを明示します。つまり、端末の設定に関係なく、通知の際に無音やバイブレーションさせない状態を設定できます。

Notification.tag 読取専用

コンストラクターの options 引数で指定された、通知の ID です。

Notification.timestamp 読取専用 Experimental

通知が生成されたとき、または適用されるとき (過去、現在、未来) の時刻を示します。

Notification.title 読取専用

コンストラクターの第 1 引数で指定された通知のタイトルです。

Notification.vibrate 読取専用 Experimental

バイブレーションハードウェアを持つ端末のためのバイブレーションパターンを指定します。

静的メソッド

親インターフェイスである EventTarget から継承したメソッドもあります。

Notification.requestPermission()

ユーザーに通知を表示する許可をリクエストします。

インスタンスメソッド

親インターフェイスである EventTarget から継承したメソッドもあります。

Notification.close()

プログラムで通知インスタンスを閉じます。

イベント

親インターフェイスである EventTarget から継承したイベントもあります。

click

ユーザーが通知をクリックするたびに発生します。

close

ユーザーが通知を閉じたときに発生します。

error

通知がエラーに遭遇するたびに発生します。

show

通知が表示されたときに発生します。

以下の基本的な HTML を想定してください。

html
<button onclick="notifyMe()">Notify me!</button>

以下のように通知を送信することが可能で — ここでは、通知に対応しているかどうかを最初にチェックしたい場合に使用できる、かなり冗長で完全なコードのセットを提示します。次に、通知を送信する前に、現在のオリジンに通知を送信するための許可が付与されているかどうかをチェックし、必要に応じて許可を要求します。

js
function notifyMe() {
  if (!("Notification" in window)) {
    // ブラウザーが通知に対応しているか調べる
    alert("このブラウザーはデスクトップ通知に対応していません。");
  } else if (Notification.permission === "granted") {
    // 通知権限が既に付与されているかどうかを調べる。
    // そうであれば、通知を作成
    const notification = new Notification("こんにちは!");
    // …
  } else if (Notification.permission !== "denied") {
    // ユーザーにその権限を要求する必要がある
    Notification.requestPermission().then((permission) => {
      // ユーザーが許可したら、通知を作成
      if (permission === "granted") {
        const notification = new Notification("こんにちは!");
        // …
      }
    });
  }

  // 最後に、ユーザーが通知を拒否していて、あなたが敬意を
  // 払いたい場合は、これ以上相手を煩わせることはありません。
}

このページでライブ例を公開するのはやめました。 Chrome や Firefox が別オリジンの <iframe> から要求された通知の許可をしないようになり、その他のブラウザーも従っているからです。動作する例を見る場合は、 To-do リストの例(また、ライブで動作するアプリ)を参照してください。

メモ: 上記の例では、通知をユーザーの操作(ボタンのクリック)から起動しました。ユーザーが同意していない通知でユーザーに迷惑をかけるべきではないので、これはベストプラクティスであるだけでなく、今後ブラウザーはユーザーの操作によって起動されたものではない通知の許可の要求を明示的に拒否するようになるでしょう。例えば、 Firefox はバージョン72からすでにこれを行っています。

仕様書

Specification
Notifications API Standard
# api

ブラウザーの互換性

BCD tables only load in the browser

関連情報