Notification
注: この機能は Web Worker 内で利用可能です
安全なコンテキスト用: この機能は一部またはすべての対応しているブラウザーにおいて、安全なコンテキスト (HTTPS) でのみ利用できます。
Notification は通知 API のインターフェイスで、ユーザーへのデスクトップ通知の設定と表示に使われます。
これらの通知の表示方法や機能はプラットフォームによって異なりますが、一般にユーザーに対して非同期に情報を提供する方法を提供します。
コンストラクター
Notification()-
Notificationオブジェクトの新しいインスタンスを生成します。
静的プロパティ
これらのプロパティは Notification オブジェクト自身のみで利用することができます。
Notification.permission読取専用-
文字列で、通知の表示についての現在の権限を表します。取りうる値は次の通りです。
denied— ユーザーが通知の表示を拒否した。granted—通知が表示されることをユーザーが受け入れた。default— ユーザーの選択が不明であるため、ブラウザーは値が denied であるかのように動作します。
Notification.maxActions読取専用 Experimental-
端末とユーザーエージェントが対応しているアクションの最大数。
インスタンスプロパティ
これらのプロパティは Notification オブジェクトのインスタンスでのみ使用可能です。
Notification.actions読取専用 Experimental-
コンストラクターの
options引数で指定された、通知のアクションの配列です。 Notification.badge読取専用 Experimental-
通知自体を表示する空間が充分にない場合に通知を表す画像の URL です。
Notification.body読取専用-
コンストラクターの
options引数で指定された、通知の本文の文字列です。 Notification.data読取専用-
通知のデータの構造化されたクローンを返します。
Notification.dir読取専用-
コンストラクターの
options引数で指定された、通知の書字方向です。 Notification.lang読取専用-
コンストラクターの
options引数で指定された、通知の言語コードです。 Notification.tag読取専用-
コンストラクターの
options引数で指定された、通知の ID です。 Notification.icon読取専用-
コンストラクターの
options引数で指定された、通知のアイコンの画像 URL です。 Notification.image読取専用 Experimental-
コンストラクターの
options引数で指定された、通知の一部として表示される画像の URL です。 Notification.renotify読取専用 Experimental-
古い通知が新しい通知に置き換えられた後、ユーザーに通知するかどうかを指定します。
Notification.requireInteraction読取専用 Experimental-
論理値で、ユーザーがクリックするか閉じるかするまで、通知が自動的に閉じずに残るべきであることを示します。
Notification.silent読取専用 Experimental-
静かに通知をするかどうかを明示します。つまり、端末の設定に関係なく、通知の際に無音やバイブレーションさせない状態を設定できます。
Notification.timestamp読取専用 Experimental-
通知が生成されたとき、または適用されるとき (過去、現在、未来) の時刻を示します。
Notification.title読取専用-
コンストラクターの第 1 引数で指定された通知のタイトルです。
Notification.vibrate読取専用 Experimental-
バイブレーションハードウェアを持つ端末のためのバイブレーションパターンを指定します。
静的メソッド
これらのメソッドは Notification オブジェクト自体に対してのみ使用できます。
Notification.requestPermission()-
ユーザーに通知を表示する許可をリクエストします。
インスタンスメソッド
これらのメソッドは Notification オブジェクトのインスタンス、または prototype からのみ使用できます。 Notification オブジェクトは EventTarget インターフェイスも継承しています。
Notification.close()-
プログラムで通知を閉じます。
イベント
例
以下の基本的な 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