これは実験段階の機能です。
この機能は複数のブラウザーで開発中の状態にあります。互換性テーブルをチェックしてください。また、実験段階の機能の構文と挙動は、仕様変更に伴い各ブラウザーの将来のバージョンで変更になる可能性があることに注意してください。
ServiceWorkerGlobalScope インターフェースの ServiceWorkerGlobalScope.onpush イベントは、Service Worker がプッシュサーバー経由でメッセージを受け取るたびに発火します。
構文
ServiceWorkerGlobalScope.onpush = function(PushEvent) { ... }
self.addEventListener('push', function(PushEvent) { ... })
例
次の例では、PushEvent からデータを取得して、すべての Service Worker のクライアント上で表示しています。プッシュメッセージのデータペイロードは、イベントオブジェクトの data プロパティ（PushEvent.data は PushMessageData オブジェクトを含みます。）で利用できます。
self.addEventListener('push', function(event) {
if (!(self.Notification && self.notification.permission === 'granted')) {
return;
}
var data = {};
if (event.data) {
data = event.data.json();
}
var title = data.title || "Something Has Happened";
var message = data.message || "Here's something you might want to check out.";
var icon = "images/new-notification.png";
var notification = new Notification(title, {
body: message,
tag: 'simple-push-demo-notification',
icon: icon
});
notification.addEventListener('click', function() {
if (clients.openWindow) {
clients.openWindow('https://example.blog.com/2015/03/04/something-new.html');
}
};
});
仕様
| 仕様 | ステータス | コメント |
|---|---|---|
| Push API onpush の定義 |
草案 | 初期定義。このイベントは ServiceWorkerGlobalScope からアクセスしますが、Push API で定義されています。 |
ブラウザー実装状況
| 機能 | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari (WebKit) |
|---|---|---|---|---|---|
| 基本サポート | 42.0 | 44.0 (44.0)[1] | 未サポート | ? | 未サポート |
| 機能 | Android | Firefox Mobile (Gecko) | Firefox OS | IE Mobile | Opera Mobile | Safari Mobile | Chrome for Android |
|---|---|---|---|---|---|---|---|
| 基本サポート | ? | 44.0 (44.0) | (有) | 未サポート | ? | 未サポート | 42.0 |
[1] Service workers（と Push）は、Firefox 45 延長サポート版（ESR）では使用できません。