mozilla
Your Search Results

    Web Notifications の使用

    これは実験段階の機能です。
    この機能は複数のブラウザで開発中の状態にあります。各ブラウザで用いるために、適切なベンダー接頭辞が必要な場合があります。互換性テーブルをチェックしてください。また、実験段階の機能の構文と挙動は、仕様変更に伴い各ブラウザの将来のバージョンで変更になる可能性があることに注意してください。

    概要

    Web Notifications API は、システムレベルでページ外部に表示される通知を Web ページから送ることを可能にします。これにより、アプリケーションがアイドル状態であっても Web アプリがユーザに情報を送ることができます。わかりやすい用途のひとつとして、ユーザが別のアプリケーションで何か他のことを行っていても、新しい電子メールを受信するたびにユーザへ通知を行う Web メールアプリケーションがあります。

    許可の依頼

    Web コンテンツ

    アプリが通知を送信可能になる前に、ユーザはアプリがそれを行う権利を認めなければなりません。これは、API が Web ページの外部にあるものと対話しようとする際の一般的な要件です。これにより、ユーザの福利のために通知 "スパム" を避けることを保証します。

    通知の送信が必要なアプリケーションは、読み取り専用の Notification.permission プロパティで、現在の許可状態を確認できます。このプロパティは、3 種類の値から 1 つを持てます:

    • default: ユーザまだ許可を与えていません (そのため、通知はユーザに表示されません)。
    • granted: ユーザはアプリケーションによる通知を明示的に許可しました。
    • denied: ユーザはアプリケーションによる通知を明示的に拒否しました。

    注記: Chrome および Safari は、permission プロパティをまだ実装していません。

    許可されていない場合、アプリケーションはユーザに選択させるため Notification.requestPermission() メソッドを使用しなければなりません。このメソッドはユーザの選択に応答するために、ユーザが選択した許可設定を受け取るコールバック関数を受け入れます。

    以下は、アプリを初期化するときに許可を問い合わせるための一般的な実例です:

    window.addEventListener('load', function () {
      Notification.requestPermission(function (status) {
        // Chrome/Safari で Notification.permission を使用可能にする
        if (Notification.permission !== status) {
          Notification.permission = status;
        }
      });
    });

    注記: Chrome では、load イベントで Notification.requestPermission() を呼び出すことができません (issue 274284 をご覧ください)。

    インストール済みアプリケーション

    アプリケーションをインストールするときは、アプリケーションマニフェストに直接許可設定を追加することで、ユーザに許可を促すことを回避できます:

    "permissions": {
      "desktop-notification": {
        "description": "Allows to display notifications on the user's desktop."
      }
    }

    通知の作成

    通知の作成は、Notification コンストラクタを使用して簡単に行えます。このコンストラクタは通知で表示するタイトルや、アイコンあるいはテキスト本文といったオプションを受け取ると想定します。

    通知はインスタンス化されたときに、可能な限り直ちに表示します。現在の通知の状態を追跡するため、Notification のインスタンスレベルで 4 つのイベントが発生します:

    • show: 通知をユーザに対して表示したときに発生します。
    • click: ユーザ通知をクリックしたときに発生します。
    • close: 通知を閉じたときに発生します。
    • error: 通知で何らかの異常が起きたときに発生します (たいてい、何かが通知の表示を妨げたときです)。

    これらのイベントは、イベントハンドラ onshowonclickoncloseonerror で検知できます。NotificationEventTarget も継承しているため、addEventListener() メソッドを使用できます。

    注記: Firefox および Safari は close イベントについて、仕様書に従っていません。仕様書では、通知はユーザによってのみ閉じられると述べています。しかし Firefox および Safari は数秒後に、通知を自動的に閉じます。そのため、通知を閉じたのはユーザであるとは保証されません。

    仕様書では、通知を自動的に閉じるのは Notification.close() メソッドを使用してアプリケーションレベルで行われるべきであると明確に述べています。例えば以下のコードです:

    var n = new Notification("Hi!");
    
    n.onshow = function () { 
      setTimeout(n.close, 5000); 
    }
    

    シンプルな例

    以下の基本的な HTML を想定します:

    <button>Notify me!</button>

    以下の方法で通知を扱うことが可能です:

    window.addEventListener('load', function () {
      // 始めに、通知の許可を得ているかを確認しましょう
      // 得ていなければ、尋ねましょう
      if (Notification && Notification.permission !== "granted") {
        Notification.requestPermission(function (status) {
          if (Notification.permission !== status) {
            Notification.permission = status;
          }
        });
      }
    
      var button = document.getElementsByTagName('button')[0];
    
      button.addEventListener('click', function () {
        // 通知されることにユーザが同意している場合
        if (Notification && Notification.permission === "granted") {
          var n = new Notification("Hi!");
        }
    
        // 通知を受けたいか否かをユーザが告げていない場合
        // 注記: Chrome のために permission プロパティが設定されているかの確信が
        // 持てないため、値 "default" を確認するのは安全ではありません。
        else if (Notification && Notification.permission !== "denied") {
          Notification.requestPermission(function (status) {
            if (Notification.permission !== status) {
              Notification.permission = status;
            }
    
            // ユーザが認めている場合
            if (status === "granted") {
              var n = new Notification("Hi!");
            }
    
            // 認めていなければ、通常型の alert にフォールバックします
            else {
              alert("Hi!");
            }
          });
        }
    
        // ユーザが通知を拒否している場合
        else {
          // 通常型の alert にフォールバックできます
          alert("Hi!");
        }
      });
    });

    実際の結果は以下のとおりです:

    繰り返される通知を扱う

    多数の通知を送ることが、ユーザにとって苦痛になるかもしれないケースがあります。例えばインスタントメッセージングアプリケーションが、メッセージが届くたびにユーザに対して通知するケースです。何百もの不必要な通知でユーザのデスクトップを埋め尽くさないようにするため、保留中の通知のキューを引き継ぐことができます。

    これを行うために、任意の新たな通知にタグを付加できます。すでに同じタグがついている通知がまだ表示されていない場合は、新しい通知が以前の通知を置き換えます。同じタグがついている通知がすでに表示されている場合は、前の通知を閉じて新しい通知を表示します。

    タグの例

    以下の基本的な HTML を想定します:

    <button>Notify me!</button>

    以下の方法で、複数の通知を扱うことが可能です:

     

    window.addEventListener('load', function () {
      // 始めに、通知の許可を得ているかを確認しましょう
      // 得ていなければ、尋ねましょう
      if (Notification && Notification.permission !== "granted") {
        Notification.requestPermission(function (status) {
          if (Notification.permission !== status) {
            Notification.permission = status;
          }
        });
      }
    
      var button = document.getElementsByTagName('button')[0];
    
      button.addEventListener('click', function () {
        // 通知されることにユーザが同意している場合
        // 10 個の通知を送信してみましょう
        if (Notification && Notification.permission === "granted") {
          for (var i = 0; i < 10; i++) {
            // タグのおかげで、私たちは "Hi!9" の通知だけを見るでしょう
            var n = new Notification("Hi! " + i, {tag: 'soManyNotification'});
          }
        }
    
        // 通知を受けたいか否かをユーザが告げていない場合
        // 注記: Chrome のために permission プロパティが設定されているかの確信が
        // 持てないため、値 "default" を確認するのは安全ではありません。
        else if (Notification && Notification.permission !== "denied") {
          Notification.requestPermission(function (status) {
            if (Notification.permission !== status) {
              Notification.permission = status;
            }
    
            // ユーザが認めている場合
            if (status === "granted") {
              for (var i = 0; i < 10; i++) {
                // タグのおかげで、私たちは "Hi!9" の通知だけを見るでしょう
                var n = new Notification("Hi! " + i, {tag: 'soManyNotification'});
              }
            }
    
            // 認めていなければ、通常型の alert にフォールバックします
            else {
              alert("Hi!");
            }
          });
        }
    
        // ユーザが通知を拒否している場合
        else {
          // 通常型の alert にフォールバックできます
          alert("Hi!");
        }
      });
    });

    実際の結果は以下のとおりです:

    仕様

    仕様書 策定状況 コメント
    Web Notifications 草案 Initial specification.

    ブラウザ実装状況

    Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
    Basic support 5 webkit (see notes)
    22
    4.0 moz (see notes)
    22
    Not supported ? 6 (see notes)
    Feature Android Firefox Mobile (Gecko) Firefox OS IE Mobile Opera Mobile Safari Mobile
    Basic support ? 4.0 moz (see notes)
    22
    1.0.1 moz (see notes)
    1.2
    Not supported ? ?

    Gecko notes

    • Prior to Firefox 22 (Firefox OS <1.2), the instantiation of a new notification must be done with the navigator.mozNotification object through its createNotification method.
    • Prior to Firefox 22 (Firefox OS <1.2), the Notification was displayed when calling the show method and was supporting the click and close events only.
    • Nick Desaulniers has written a Notification shim to cover both newer and older implementations.
    • 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 with the icon missing, then the icon is fetched, but it works on all versions of Firefox OS.

    Chrome notes

    Safari notes

    • Safari started supporting notification with Safari 6 but only on Mac OSX 10.8+ (Mountain Lion).

    関連情報

    ドキュメントのタグと貢献者

    Contributors to this page: yyss
    最終更新者: yyss,