サービス労働者は、私がサービスワーカーからクライアントにメッセージを送信しようとしているクライアント

Question

にcomunicateが、私は

self.clients.matchAll() 
.then((clients) => { 
    clients.forEach(function(client) { 
    client.postMessage({msg: 'Hello from SW'}) 
    }) 
}) 

を使用している場合、私は、ブラウザのタブを開いている場合でも、それは、任意のクライアントに送信しませんしかし、私はサービスワーカーにクライアントからのメッセージを送信する場合

// client 
navigator.serviceWorker.controller.postMessage({title: 'Send message from client'}) 

とサービスワーカーで

self.addEventListener('message', function(event) { 
    self.clients.fetchAll() 
    .then((clients) => { 
     clients.forEach(function(client) { 
     client.postMessage({msg: 'Hello from SW'}) 
    }) 
    }) 
}) 

メッセージを送信してクライアントを検出できます。 私は間違って何をしていますか？代わりにindexedDBを使用する必要がありますか？

Answer 1

私はclients.fetchAll()が存在するとは思わない。あなたはおそらく、あなたが記述する行動を与えるべき、clients.matchAll()意味：

self.clients.matchAll().then(clients => { 
    clients.forEach(client => client.postMessage({msg: 'Hello from SW'})); 
}) 

一つ一つのメッセージを送信する必要が回避しながら、サービスの労働者がクライアントと通信できるようにするよりよい選択肢は、make use of the Broadcast Channel APIにあります。最近のChromeとFirefoxでサポートされています。

// From service-worker.js: 
const channel = new BroadcastChannel('sw-messages'); 
channel.postMessage({title: 'Hello from SW'}); 

// From your client pages: 
const channel = new BroadcastChannel('sw-messages'); 
channel.addEventListener('message', event => { 
    console.log('Received', event.data); 
});