サーチ…


構文

  • Notification.requestPermission( コールバック
  • Notification.requestPermission()。then( callbackrejectFunc
  • 新しい通知( タイトルオプション
  • 通知 .close()

備考

Notifications APIは、ブラウザからのクライアントへのアクセスを許可するように設計されています。

ブラウザーによるサポートには制限があります。また、オペレーティングシステムによるサポートが制限されることがあります。

次の表は、通知をサポートする最も初期のブラウザのバージョンの概要を示しています。

クロムエッジ Firefox インターネットエクスプローラオペラ Opera Miniはサファリ
29 14 46 サポートなし 38 サポートなし 9.1

通知の送信を要求する

Notification.requestPermissionを使用して、当社のウェブサイトから通知を受け取るかどうかをユーザーに尋ねます。

Notification.requestPermission(function() {
    if (Notification.permission === 'granted') {
        // user approved.
        // use of new Notification(...) syntax will now be successful
    } else if (Notification.permission === 'denied') {
        // user denied.
    } else { // Notification.permission === 'default'
        // user didn’t make a decision.
        // You can’t send notifications until they grant permission.
    }
});

Firefox 47以降.requestPermissionメソッドは、許可を与えるというユーザの決定を処理するときにも約束を返すことができます

Notification.requestPermission().then(function(permission) {
    if (!('permission' in Notification)) {
        Notification.permission = permission;
    }
    // you got permission !
    }, function(rejection) {
    // handle rejection here.
    }
);

通知の送信

ユーザーが通知を送信するための許可のリクエストを承認した後、ユーザーにHelloと言う簡単な通知を送信できます。

new Notification('Hello', { body: 'Hello, world!', icon: 'url to an .ico image' });

これにより、次のような通知が送信されます。

こんにちは

こんにちは世界!

通知を閉じる

.close()メソッドを使用して通知を閉じることができます。

let notification = new Notification(title, options);
// do some work, then close the notification
notification.close()

setTimeout関数を使用して、将来通知を自動的に閉じることができます。

let notification = new Notification(title, options);
setTimeout(() => {
    notification.close()
}, 4000);

上記のコードは、4秒後に通知を生成して閉じます。

通知イベント

通知API仕様では、通知によって起動できる2つのイベントがサポートされています。

  1. clickイベント。

このイベントは、通知本体をクリックすると実行されます(Xおよび通知の終了ボタンを除く)。

例:

notification.onclick = function(event) {
    console.debug("you click me and this is my event object: ", event);
}
  1. errorイベント

表示できないなど、何か問題が発生したときに通知がこのイベントを発生させます

notification.onerror = function(event) {
    console.debug("There was an error: ", event);
}


Modified text is an extract of the original Stack Overflow Documentation
ライセンスを受けた CC BY-SA 3.0
所属していない Stack Overflow