クロムのサービス員からプッシュデータを取得して表示する

Question

私はウェブアプリケーションでプッシュ通知を受信するためにプッシュウォッシュを使用しています。 すべての物事がうまく機能してserviceworkerリスナーにプッシュメッセージを受け取ったが、私は別のJSクラスにserviceworkerとプロセスからのプッシュmessgeデータにこのような

main.jsそれを与えたい：このような

if ('serviceWorker' in navigator) { 
    console.log('Service Worker is supported'); 
    navigator.serviceWorker.register('sw.js').then(function() { 
    return navigator.serviceWorker.ready; 
    }).then(function(reg) { 
    console.log('Service Worker is ready :^)', reg); 
     // TODO 
    }).catch(function(error) { 
    console.log('Service Worker error :^(', error); 
    }); 
} 

// get push message data in main.js and process it 

サービスワーカーを：

self.addEventListener('push', function(event) { 
    console.log('Push message', event); 

    var title = 'Push message'; 

    event.waitUntil(
    self.registration.showNotification(title, { 
     'body': 'The Message', 
     'icon': 'images/icon.png' 
    })); 
}); 

Answer 1

私はコメントで述べたように、これはサービス労働者のための少し奇妙なユースケースではなく、標準労働者のようだが、：

サービスワーカーは、メッセージがプッシュされると、接続されたすべてのクライアントにメッセージを送信させることができます。

This answerは、基本的にクライアントに話しサービスワーカーの完全な例を示したが、：それはメッセージをリスン管理

1. ページ：

   navigator.serviceWorker.addEventListener('message', event => { 
       // use `event.data` 
   }); 
   

2. をサービスワーカーは次のように彼らに送信しますこれは：

   self.clients.matchAll().then(all => all.forEach(client => { 
       client.postMessage(/*...message here...*/); 
   })); 
   

またはES5およびそれ以前の構文で（私はサービス労働者をサポートする任意のブラウザはまた、矢印の機能をサポートしていないとは思わない）：

ページのリスニング：送信

navigator.serviceWorker.addEventListener('message', function(event) { 
    // use `event.data` 
}); 

労働者：

self.clients.matchAll().then(function(all) { 
    all.forEach(function(client) { 
     client.postMessage(/*...message here...*/); 
    }); 
});