MDN’s new design is in Beta! A sneak peek: https://blog.mozilla.org/opendesign/mdns-new-design-beta/

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

ブラウザー実装状況

機能 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)では使用できません。

関連項目

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

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