Notification

註: この機能は Web Workers 内で利用可能です。

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

NotificationNotifications 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 イベントのハンドラーです。ユーザーが通知を閉じたときに起動されます。
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

ブラウザーの互換性

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
NotificationChrome 完全対応 22
補足
完全対応 22
補足
補足 Before Chrome 22, the support for notification followed an old prefixed version of the specification and used the navigator.webkitNotifications object to instantiate a new notification. Before Chrome 32, Notification.permission was not supported. Before Chrome 42, service worker additions were not supported. Starting in Chrome 49, notifications do not work in incognito mode.
完全対応 5
接頭辞付き
接頭辞付き webkit のベンダー接頭辞が必要
Edge 完全対応 14Firefox 完全対応 22
完全対応 22
完全対応 4
接頭辞付き
接頭辞付き moz のベンダー接頭辞が必要
IE 未対応 なしOpera 完全対応 25Safari 完全対応 6WebView Android 未対応 なしChrome Android 完全対応 ありFirefox Android 完全対応 22
完全対応 22
完全対応 4
接頭辞付き
接頭辞付き webkit のベンダー接頭辞が必要
Opera Android 完全対応 ありSafari iOS 未対応 なしSamsung Internet Android 完全対応 あり
Notification() constructorChrome 完全対応 22
完全対応 22
完全対応 5
接頭辞付き
接頭辞付き webkit のベンダー接頭辞が必要
Edge 完全対応 ≤18Firefox 完全対応 22
完全対応 22
完全対応 4
接頭辞付き
接頭辞付き moz のベンダー接頭辞が必要
IE 未対応 なしOpera 完全対応 25Safari 完全対応 6WebView Android 未対応 なしChrome Android 完全対応 ありFirefox Android 完全対応 22
完全対応 22
完全対応 4
接頭辞付き
接頭辞付き moz のベンダー接頭辞が必要
Opera Android 完全対応 ありSafari iOS 未対応 なしSamsung Internet Android 完全対応 あり
actionsChrome 完全対応 53Edge 完全対応 18Firefox 未対応 なしIE 未対応 なしOpera 完全対応 39Safari ? WebView Android 未対応 なしChrome Android 完全対応 53Firefox Android 未対応 なしOpera Android 完全対応 41Safari iOS 未対応 なしSamsung Internet Android 完全対応 6.0
badgeChrome 完全対応 53Edge 完全対応 18Firefox 未対応 なしIE 未対応 なしOpera 完全対応 39Safari ? WebView Android 未対応 なしChrome Android 完全対応 53Firefox Android 未対応 なしOpera Android 完全対応 41Safari iOS 未対応 なしSamsung Internet Android 完全対応 6.0
bodyChrome 完全対応 ありEdge 完全対応 14Firefox 完全対応 ありIE 未対応 なしOpera 完全対応 ありSafari 完全対応 ありWebView Android 未対応 なしChrome Android 完全対応 ありFirefox Android 完全対応 ありOpera Android 完全対応 ありSafari iOS 未対応 なしSamsung Internet Android 完全対応 あり
closeChrome 完全対応 ありEdge 完全対応 14Firefox 完全対応 ありIE 未対応 なしOpera 完全対応 ありSafari 完全対応 ありWebView Android 未対応 なしChrome Android 完全対応 ありFirefox Android 完全対応 ありOpera Android 完全対応 ありSafari iOS 未対応 なしSamsung Internet Android 完全対応 あり
dataChrome 完全対応 ありEdge 完全対応 16Firefox 完全対応 ありIE 未対応 なしOpera 完全対応 ありSafari ? WebView Android 未対応 なしChrome Android 完全対応 ありFirefox Android 完全対応 ありOpera Android 完全対応 ありSafari iOS 未対応 なしSamsung Internet Android 完全対応 あり
dirChrome 完全対応 ありEdge 完全対応 14Firefox 完全対応 ありIE 未対応 なしOpera 完全対応 ありSafari 完全対応 ありWebView Android 未対応 なしChrome Android 完全対応 ありFirefox Android 完全対応 ありOpera Android 完全対応 ありSafari iOS 未対応 なしSamsung Internet Android 完全対応 あり
iconChrome 完全対応 22
完全対応 22
完全対応 5
接頭辞付き
接頭辞付き webkit のベンダー接頭辞が必要
Edge 完全対応 14Firefox 完全対応 22
完全対応 22
完全対応 4
接頭辞付き
接頭辞付き moz のベンダー接頭辞が必要
IE 未対応 なしOpera 完全対応 25Safari 未対応 なしWebView Android 未対応 なしChrome Android 完全対応 ありFirefox Android 完全対応 22
完全対応 22
完全対応 4
接頭辞付き
接頭辞付き moz のベンダー接頭辞が必要
Opera Android 完全対応 ありSafari iOS 未対応 なしSamsung Internet Android 完全対応 あり
imageChrome 完全対応 53Edge 完全対応 18Firefox 未対応 なしIE 未対応 なしOpera 完全対応 40Safari ? WebView Android 未対応 なしChrome Android 完全対応 53Firefox Android 未対応 なしOpera Android 完全対応 41Safari iOS 未対応 なしSamsung Internet Android 完全対応 6.0
langChrome 完全対応 ありEdge 完全対応 14Firefox 完全対応 ありIE 未対応 なしOpera 完全対応 ありSafari 完全対応 ありWebView Android 未対応 なしChrome Android 完全対応 ありFirefox Android 完全対応 ありOpera Android 完全対応 ありSafari iOS 未対応 なしSamsung Internet Android 完全対応 あり
maxActionsChrome 完全対応 ありEdge 完全対応 18Firefox 未対応 なしIE 未対応 なしOpera 完全対応 ありSafari ? WebView Android 未対応 なしChrome Android 完全対応 ありFirefox Android 未対応 なしOpera Android 完全対応 ありSafari iOS 未対応 なしSamsung Internet Android 完全対応 あり
onclickChrome 完全対応 ありEdge 完全対応 14Firefox 完全対応 22IE 未対応 なしOpera 完全対応 ありSafari 完全対応 ありWebView Android 未対応 なしChrome Android 完全対応 ありFirefox Android 未対応 なしOpera Android 完全対応 ありSafari iOS 未対応 なしSamsung Internet Android 完全対応 あり
oncloseChrome 完全対応 ありEdge 完全対応 14Firefox 完全対応 ありIE 未対応 なしOpera 完全対応 ありSafari 完全対応 ありWebView Android 未対応 なしChrome Android 完全対応 ありFirefox Android 完全対応 ありOpera Android 完全対応 ありSafari iOS 未対応 なしSamsung Internet Android 完全対応 あり
onerrorChrome 完全対応 ありEdge 完全対応 14Firefox 未対応 なしIE 未対応 なしOpera 完全対応 ありSafari 完全対応 ありWebView Android 未対応 なしChrome Android 完全対応 ありFirefox Android 未対応 なしOpera Android 完全対応 ありSafari iOS 未対応 なしSamsung Internet Android 完全対応 あり
onshowChrome 完全対応 ありEdge 完全対応 14Firefox 完全対応 ありIE 未対応 なしOpera 完全対応 ありSafari 完全対応 ありWebView Android 未対応 なしChrome Android 完全対応 ありFirefox Android 完全対応 ありOpera Android 完全対応 ありSafari iOS 未対応 なしSamsung Internet Android 完全対応 あり
permissionChrome 完全対応 ありEdge 完全対応 14Firefox 完全対応 ありIE 未対応 なしOpera 完全対応 ありSafari 完全対応 ありWebView Android 未対応 なしChrome Android 完全対応 ありFirefox Android 完全対応 ありOpera Android 完全対応 ありSafari iOS 未対応 なしSamsung Internet Android 完全対応 あり
renotifyChrome 完全対応 50Edge 完全対応 79Firefox 未対応 なしIE 未対応 なしOpera 完全対応 37Safari 未対応 なしWebView Android 未対応 なしChrome Android 完全対応 50Firefox Android 未対応 なしOpera Android 完全対応 37Safari iOS 未対応 なしSamsung Internet Android 完全対応 5.0
requestPermissionChrome 完全対応 46Edge 完全対応 14Firefox 完全対応 47
補足
完全対応 47
補足
補足 From Firefox 70 onwards, cannot be called from a cross-origin IFrame.
補足 From Firefox 72 onwards, can only be called in response to a user gesture such as a click event.
IE 未対応 なしOpera 完全対応 40Safari 完全対応 ありWebView Android 未対応 なしChrome Android 完全対応 46Firefox Android 完全対応 ありOpera Android 完全対応 41Safari iOS 未対応 なしSamsung Internet Android 完全対応 5.0
requireInteractionChrome 完全対応 ありEdge 完全対応 17Firefox 未対応 なしIE 未対応 なしOpera 完全対応 ありSafari ? WebView Android 未対応 なしChrome Android 完全対応 ありFirefox Android 未対応 なしOpera Android 完全対応 ありSafari iOS 未対応 なしSamsung Internet Android 完全対応 あり
Secure context requiredChrome 完全対応 62Edge 完全対応 ≤79Firefox 完全対応 67IE 未対応 なしOpera 完全対応 49Safari ? WebView Android 未対応 なしChrome Android 完全対応 62Firefox Android 完全対応 67Opera Android 完全対応 46Safari iOS 未対応 なしSamsung Internet Android 完全対応 8.0
silentChrome 完全対応 43Edge 完全対応 17Firefox 未対応 なしIE 未対応 なしOpera 完全対応 30Safari 未対応 なしWebView Android 未対応 なしChrome Android 完全対応 43Firefox Android 未対応 なしOpera Android 完全対応 30Safari iOS 未対応 なしSamsung Internet Android 完全対応 4.0
tagChrome 完全対応 ありEdge 完全対応 14Firefox 完全対応 ありIE 未対応 なしOpera 完全対応 ありSafari 完全対応 ありWebView Android 未対応 なしChrome Android 完全対応 ありFirefox Android 完全対応 ありOpera Android 完全対応 ありSafari iOS 未対応 なしSamsung Internet Android 完全対応 あり
timestampChrome 完全対応 ありEdge 完全対応 17Firefox 未対応 なしIE 未対応 なしOpera 完全対応 ありSafari ? WebView Android 未対応 なしChrome Android 完全対応 ありFirefox Android 未対応 なしOpera Android 完全対応 ありSafari iOS 未対応 なしSamsung Internet Android 完全対応 あり
titleChrome 完全対応 ありEdge 完全対応 14Firefox 未対応 なしIE 未対応 なしOpera 完全対応 ありSafari 完全対応 ありWebView Android 未対応 なしChrome Android 完全対応 ありFirefox Android 未対応 なしOpera Android 完全対応 ありSafari iOS 未対応 なしSamsung Internet Android 完全対応 あり
vibrateChrome 未対応 なしEdge 未対応 なしFirefox 未対応 なしIE 未対応 なしOpera 未対応 なしSafari ? WebView Android 未対応 なしChrome Android 完全対応 53
補足
完全対応 53
補足
補足 Does not work on Android O or later regardless of Chrome version.
Firefox Android 未対応 なしOpera Android 完全対応 41
補足
完全対応 41
補足
補足 Does not work on Android O or later regardless of Chrome version.
Safari iOS 未対応 なしSamsung Internet Android 完全対応 6.0
補足
完全対応 6.0
補足
補足 Does not work on Android O or later regardless of Chrome version.
Available in workersChrome 完全対応 45Edge 完全対応 ≤18Firefox 完全対応 41IE 未対応 なしOpera 完全対応 32Safari ? WebView Android 未対応 なしChrome Android 完全対応 45Firefox Android 完全対応 41Opera Android 完全対応 32Safari iOS 未対応 なしSamsung Internet Android 完全対応 5.0

凡例

完全対応  
完全対応
未対応  
未対応
実装状況不明  
実装状況不明
実装ノートを参照してください。
実装ノートを参照してください。
使用するには、ベンダー接頭辞または異なる名前が必要です。
使用するには、ベンダー接頭辞または異なる名前が必要です。

関連情報