Notification
注: この機能は Web Worker 内で利用可能です
安全なコンテキスト用: この機能は一部またはすべての対応しているブラウザーにおいて、安全なコンテキスト (HTTPS) でのみ利用できます。
Notification
は Notifications API のインターフェイスで、ユーザーへのデスクトップ通知の設定と表示に使われます。これらの通知の表示方法や機能はプラットフォームによって異なりますが、一般にユーザーに対して非同期に情報を提供する方法を提供します。
コンストラクター
Notification()
Notification
オブジェクトの新しいインスタンスを生成します。
プロパティ
静的プロパティ
これらのプロパティは Notification
オブジェクト自身のみで利用することができます。
Notification.permission
読取専用- 文字列で、通知の表示についての現在の権限を表します。取りうる値は次の通りです。
denied
— ユーザーが通知の表示を拒否した。granted
—通知が表示されることをユーザーが受け入れた。default
— ユーザーの選択が不明であるため、ブラウザーは値が denied であるかのように動作します。
Notification.maxActions
読取専用
インスタンスプロパティ
これらのプロパティは Notification
オブジェクトのインスタンスでのみ使用可能です。
Notification.actions
読取専用- コンストラクターの
options
引数で指定された、通知のアクションの配列です。 Notification.badge
読取専用- 通知自体を表示する空間が充分にない場合に通知を表す画像の URL です。
Notification.body
読取専用- コンストラクターの
options
引数で指定された、通知の本文文字列です。 Notification.data
読取専用- 通知のデータの構造化されたクローンを返します。
Notification.dir
読取専用- コンストラクターの
options
引数で指定された、通知の書字方向です。 Notification.lang
読取専用- コンストラクターの
options
引数で指定された、通知の言語コードです。 Notification.tag
読取専用- コンストラクターの
options
引数で指定された、通知の ID です。 Notification.icon
読取専用- コンストラクターの
options
引数で指定された、通知のアイコンの画像 URL です。 Notification.image
読取専用- コンストラクターの
options
引数で指定された、通知の一部として表示される画像の URL です。 Notification.renotify
読取専用- 古い通知が新しい通知に置き換えられた後、ユーザーに通知するかどうかを指定します。
Notification.requireInteraction
読取専用Boolean
で、ユーザーがクリックするか閉じるかするまで、通知が自動的に閉じずに残るべきであることを示します。Notification.silent
読取専用- 静かに通知をするかどうかを明示します。つまり、デバイスの設定に関係なく、通知の際に無音やバイブレーションさせない状態を設定できます。
Notification.timestamp
読取専用- 通知が生成されたとき、または適用されるとき (過去、現在、未来) の時刻を示します。
Notification.title
読取専用- コンストラクターの第1引数で指定された通知のタイトルです。
Notification.vibrate
読取専用- バイブレーションハードウェアを持つ端末のためのバイブレーションパターンを指定します。
イベントハンドラー
Notification.onclick
click
イベントのハンドラーです。ユーザーが通知をクリックするたびに起動されます。Notification.onclose
close
(en-US) イベントのハンドラーです。ユーザーが通知を閉じたときに起動されます。Notification.onerror
error
イベントのハンドラーです。通知がエラーに遭遇するたびに起動されます。Notification.onshow
show
イベントのハンドラーです。通知が表示されたときに起動されます。
メソッド
静的メソッド
これらのメソッドは Notification
オブジェクト自体に対してのみ使用できます。
Notification.requestPermission()
- ユーザーに通知を表示する許可をリクエストします。
インスタンスメソッド
これらのメソッドは Notification
オブジェクトのインスタンス、またはprototype
からのみ使用できます。 Notification
オブジェクトは EventTarget
インターフェイスも継承しています。
Notification.close()
- プログラムで通知を閉じます。
例
以下の基本的な HTML を想定してください。
<button onclick="notifyMe()">Notify me!</button>
以下のように通知を送信することが可能で — ここでは、通知に対応しているかどうかを最初にチェックしたい場合に使用できる、かなり冗長で完全なコードのセットを提示します。次に、通知を送信する前に、現在のオリジンに通知を送信するための許可が付与されているかどうかをチェックし、必要に応じて許可を要求します。
function notifyMe() {
// ブラウザーが通知に対応しているかどうかをチェックしましょう
if (!("Notification" in window)) {
alert("このブラウザーはデスクトップ通知に対応していません。");
}
// 通知の許可が既に得られているかどうかをチェックしましょう
else if (Notification.permission === "granted") {
// If it's okay let's create a notification
var notification = new Notification("こんにちは!");
}
// そうでなければ、ユーザーに許可を求める必要があります
else if (Notification.permission !== "denied") {
Notification.requestPermission().then(function (permission) {
// ユーザーが許可したら、通知を作成しましょう
if (permission === "granted") {
var notification = new Notification("こんにちは!");
}
});
}
// 最後に、ユーザーが通知を拒否していて、あなたが敬意を
// 払いたい場合は、これ以上相手を煩わせることはありません。
}
このページでライブ例を公開するのはやめました。 Chrome や Firefox が別オリジンの <iframe>
から要求された通知の許可をしないようになり、その他のブラウザーも従っているからです。動作する例を見る場合は、 To-do リストの例 (また、ライブで動作するアプリ) を参照してください。
注: 上記の例では、通知をユーザーの操作 (ボタンのクリック) から起動しました。ユーザーが同意していない通知でユーザーに迷惑をかけるべきではないので、これはベストプラクティスであるだけでなく、今後ブラウザーはユーザーの操作によって起動されたものではない通知の許可の要求を明示的に拒否するようになるでしょう。例えば、 Firefox はバージョン72からすでにこれを行っています。
仕様書
仕様書 | 状態 | 備考 |
---|---|---|
Notifications API | 現行の標準 | Living standard |
ブラウザーの互換性
BCD tables only load in the browser