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

ブラウザー実装状況

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeEdge MobileAndroid 版 FirefoxAndroid 版 OperaiOS 版 SafariSamsung Internet
基本対応
実験的
Chrome 完全対応 40Edge ? Firefox 完全対応 44
補足
完全対応 44
補足
補足 Service workers (and Push) have been disabled in the Firefox 45 and 52 Extended Support Releases (ESR).
IE 未対応 なしOpera 完全対応 24Safari 完全対応 11.1WebView Android 完全対応 40Chrome Android 完全対応 40Edge Mobile ? Firefox Android 完全対応 44Opera Android 完全対応 24Safari iOS 完全対応 11.1Samsung Internet Android 完全対応 4.0

凡例

完全対応  
完全対応
未対応  
未対応
実装状況不明  
実装状況不明
実験的。動作が変更される可能性があります。
実験的。動作が変更される可能性があります。
実装ノートを参照してください。
実装ノートを参照してください。

関連項目

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

このページの貢献者: Potappo, YuichiNukiyama
最終更新者: Potappo,