Notification
安全なコンテキスト用: この機能は一部またはすべての対応しているブラウザーにおいて、安全なコンテキスト (HTTPS) でのみ利用できます。
メモ: この機能はウェブワーカー内で利用可能です。
Notification
は通知 API のインターフェイスで、ユーザーへのデスクトップ通知の設定と表示に使われます。
これらの通知の表示方法や機能はプラットフォームによって異なりますが、一般にユーザーに対して非同期に情報を提供する方法を提供します。
コンストラクター
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
から継承したイベントもあります。
例
以下の基本的な HTML を想定してください。
<button onclick="notifyMe()">Notify me!</button>
以下のように通知を送信することが可能で — ここでは、通知に対応しているかどうかを最初にチェックしたい場合に使用できる、かなり冗長で完全なコードのセットを提示します。次に、通知を送信する前に、現在のオリジンに通知を送信するための許可が付与されているかどうかをチェックし、必要に応じて許可を要求します。
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