Notification

Notifications APIのNotificationインターフェイスは、ユーザーへのデスクトップ通知の設定や表示のために使われます。

コンストラクタ

Notification.Notification()

Notification オブジェクトのインスタンスを作成

プロパティ

静的プロパティ

この属性はNotificationオブジェクトでのみ使用できます。

Notification.permission 読取専用

デスクトップ通知に対する現在の認可を表す文字列です。可能性な値は次の通りです。denied (ユーザーは通知が表示されることを拒否している)、granted (ユーザーは通知が表示されることを許諾している)、default (ユーザーの選択は不明のため、ブラウザは拒否されたかのように動作する)。

インスタンスプロパティ

このプロパティはNotificationオブジェクトのインスタンスでのみ使用可能です。

Notification.title 読取専用

コンストラクタのオプションパラメーターで、通知のタイトルを指定します。

Notification.dir 読取専用

コンストラクタのオプションパラメーターで、通知のテキストの方向を指定します。

Notification.lang 読取専用

コンストラクタのオプションパラメーターで、通知の言語コードを指定します。

Notification.body 読取専用

コンストラクタのオプションパラメーターで、通知のbody部分を指定します。

Notification.tag 読取専用

コンストラクタのオプションパラメーターで、通知のIDを指定します。

Notification.icon 読取専用

コンストラクタのオプションパラメーターで、通知のアイコンに画像URLを指定します。

Notification.data 読取専用

通知のデータを構造化したクローンを返します。

Notification.silent 読取専用

静かに通知をするかどうかを明示します。つまり、デバイスの設定に関係なく、通知の際に無音やバイブレーションさせない状態を設定できます。

非対応プロパティ

このリストのプロパティは最新の仕様ですが、まだどのブラウザでもサポートしていません。
状況が更新されたり、定期的にチェックしつづけることをおすすめします。もし、このドキュメントが古くなっていることに気づいたら、私たちに教えてください。

Notification.noscreen 読取専用

発火した通知をデバイスの画面上で表示させるかどうかを指定します。

Notification.renotify 読取専用

古い通知が新しい通知に置き換えられた後、ユーザーに通知するかどうかを指定します。

Notification.sound 読取専用

通知が発火したとき、既定のシステム通知音の場所で再生する音声リソースを指定します。

Notification.sticky 読取専用

通知を'sticky'にするべきか指定します。例えば、'sticky'な場合、通知は容易にクリアできません。

Notification.vibrate 読取専用

知が発火したときにデバイスのバイブレーションハードウェアに通知するバイブレーションパターンを指定します。

イベントハンドラ

Notification.onclick

clickイベントのためのハンドラです。ユーザーが通知をクリックするたびにトリガーされます。

Notification.onerror

errorイベントのハンドラです。通知がエラーに遭遇するためにトリガーされます。

古いハンドラ

次のイベントハンドラは下のbrowser compatibilityセクションにリストされているように、まだサポートされています。ですが、現在の仕様にはリストされていません。これらの使用は古く、将来のブラウザバージョンでは動かなくなると思っておいた方が安全です。

Notification.onclose

closeイベントのハンドラです。ユーザーが通知を閉じたときにトリガーされます。

Notification.onshow

show イベントのハンドラです。通知が表示されたときにトリガーされます。

メソッド

静的メソッド

これらのメソッドはNotificationオブジェクトからのみ使用できます。

Notification.requestPermission()

ユーザーに通知を表示する許可をリクエストします。

インスタンスメソッド

これらのメソッドはNotificationオブジェクトのインスタンス、またはprototypeからのみ使用できます。Notificationオブジェクトは、EventTargetインターフェースも継承しています。

Notification.close()

プログラムで通知を閉じます。

例

このようなベーシックな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(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.
}

多くの場合、この冗長性は必要ありません。例えば、私たちのEmogotchi demo (see source code)では、通知の許可を送れるかを確認せずに、Notification.requestPermissionを実行しています。

Notification.requestPermission();

私たちが通知を発火したいときに、spawnNotification()関数を実行しています。― これはbodyとicon、titleを指定する引数が渡され、必要なoptionsオブジェクトを生成してからNotification()コンストラクタを使って通知を発火します。

function spawnNotification(theBody,theIcon,theTitle) {
  var options = {
      body: theBody,
      icon: theIcon
  }
  var n = new Notification(theTitle,options);
}

仕様

ブラウザ実装状況

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

[1] Chrome 22以前では、次の古いプレフィックス付きバージョンの仕様がサポートされており、新しい通知のインスタンスにはnavigator.webkitNotificationsオブジェクトを使用します。

Chrome 32以前では、Notification.permissionはサポートされていませんでした。

Chrome 42以前では、サービスワーカーの追加はサポートされていませんでした。

Chrome 49以降では、シークレットモードで通知はサポートされていません。

[2] Firefox 22 (Firefox OS <1.2)以前では、navigator.mozNotification オブジェクトを通じてcreateNotificationメソッドにより新しい通知を実行する必要があります。

Firefox 22 (Firefox OS <1.2)以前では、showメソッドを呼び出すと通知が表示され、 clickとcloseイベントのみがサポートされています。

Nick Desaulniersは、Notification shimにおいて新旧両方の実装をカバーしています。

One particular Firefox OS issue is that you can pass a path to an icon to use in the notification, but if the app is packaged you cannot use a relative path like /my_icon.png. You also can't use window.location.origin + "/my_icon.png" because window.location.origin is null in packaged apps. The manifest origin field fixes this, but it is only available in Firefox OS 1.1+. A potential solution for supporting Firefox OS <1.1 is to pass an absolute URL to an externally hosted version of the icon. This is less than ideal as the notification is displayed immediately without the icon, then the icon is fetched, but it works on all versions of Firefox OS.

When using notifications  in a Firefox OS app, be sure to add the desktop-notification permission in your manifest file. Notifications can be used at any permission level, hosted or above: "permissions": { "desktop-notification": {} }

[3] Safari started to support notification with Safari 6, but only on Mac OSX 10.8+ (Mountain Lion).

関連項目

• Using the Notifications API