Notification.requestPermission()

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

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

注: この機能は SharedWorker 内では使用できません。

: Safari はまだ、許可を得るのにコールバック構文を使用します。適切に機能を検出してコードを実行する方法の良い例として、通知 API の使用をご覧ください。

requestPermission()Notification インターフェイスのメソッドで、ユーザーに現在のオリジンが通知を表示することを許可するよう要求します。

構文

最新の仕様では、このメソッドは次のようにプロミスベースの構文に更新されています。

Notification.requestPermission().then(function(permission) { ... });

以前は、この構文は単純なコールバックに基づくものでした。このバージョンは非推奨になりました。

Notification.requestPermission(callback);

引数

callback Optional 非推奨 Gecko 46
省略可能なコールバック関数で、許可の値で呼び出されます。プロミスを返値にしたために非推奨になりました。

返値

Promise で、ユーザーが許可を選択したら DOMString に解決します。この文字列の取りうる値は次の通りです。

  • granted
  • denied
  • default

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

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

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

function notifyMe() {
  // Let's check if the browser supports notifications
  if (!("Notification" in window)) {
    alert("This browser does not support desktop notification");
  }

  // Let's check whether notification permissions have already been granted
  else if (Notification.permission === "granted") {
    // If it's okay let's create a notification
    var notification = new Notification("Hi there!");
  }

  // Otherwise, we need to ask the user for permission
  else if (Notification.permission !== "denied") {
    Notification.requestPermission().then(function (permission) {
      // If the user accepts, let's create a notification
      if (permission === "granted") {
        var notification = new Notification("Hi there!");
      }
    });
  }

  // At last, if the user has denied notifications, and you 
  // want to be respectful there is no need to bother them any more.
}

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

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

仕様書

仕様書 状態 備考
Notifications API 現行の標準 Living standard

ブラウザーの互換性

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
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

凡例

完全対応  
完全対応
未対応  
未対応
実装ノートを参照してください。
実装ノートを参照してください。

関連情報