ServiceWorkerGlobalScope.onpush

ServiceWorkerGlobalScope インターフェースの ServiceWorkerGlobalScope.onpush イベントは、Service Worker がプッシュサーバー経由でメッセージを受け取るたびに発火します。

構文

ServiceWorkerGlobalScope.onpush = function(PushEvent) { ... }
self.addEventListener('push', function(PushEvent) { ... })

次の例では、PushEvent からデータを取得して、すべての Service Worker のクライアント上で表示しています。プッシュメッセージのデータペイロードは、イベントオブジェクトの data プロパティ(PushEvent.dataPushMessageData オブジェクトを含みます。)で利用できます。

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 で定義されています。

ブラウザー実装状況

No compatibility data found for api.ServiceWorkerGlobalScope.onpush.
Check for problems with this page or contribute missing data to mdn/browser-compat-data.

関連項目