Chrome ServiceWorker postMessage

Question

WebApp ile ilgili ServiceWorker arasında PostMessage'ı göndermeyi denerim. ServiceWoker başarıyla kaydedildi ve şu ana kadar çalışıyor.
Ne yazık ki bazı garip davranışlar fark ettim:
1. navigator.serviceWorker.controller her zaman boştur.

self.addEventListener('message', function (evt) { 
console.log('postMessage received', evt); 
}); 

Maalesef önemli alan geri kökeni evt.origin göndermek için = ““ve evt.source = null istenen değer içermeyen: ServiceWorker tarafında
2. Ben postMessage bu şekilde uyguladı. Ama her zaman gönderilen evt.data'yı alırım.

Nasıl posta gönderileceğini biliyor musunuz?

Çok teşekkür ederim!
Andi

Answer 1

Bir geri this demo gösterilir ve aslında henüz bu test etmedim şu şekilde (yapılmaktadır kontrollü app işçinin bir yanıt göndermek için bir yol, ama demo iyi çalışıyor ve kod görünüyor şartnamelere katılıyorum). Ana sayfada

:

self.addEventListener('message', function(event) { 
    event.ports[0].postMessage({'test': 'This is my response.'}); 
}); 

Daha sonra birlikte istediğini yapmak sendMessage işlevi tarafından döndürülen sözünü kullanmak mümkün olmalıdır:

function sendMessage(message) { 
    // This wraps the message posting/response in a promise, which will 
    // resolve if the response doesn't contain an error, and reject with 
    // the error if it does. If you'd prefer, it's possible to call 
    // controller.postMessage() and set up the onmessage handler 
    // independently of a promise, but this is a convenient wrapper. 
    return new Promise(function(resolve, reject) { 
    var messageChannel = new MessageChannel(); 
    messageChannel.port1.onmessage = function(event) { 
     if (event.data.error) { 
     reject(event.data.error); 
     } else { 
     resolve(event.data); 
     } 
    }; 

    // This sends the message data as well as transferring 
    // messageChannel.port2 to the service worker. 
    // The service worker can then use the transferred port to reply 
    // via postMessage(), which will in turn trigger the onmessage 
    // handler on messageChannel.port1. 
    // See 
    // https://html.spec.whatwg.org/multipage/workers.html#dom-worker-postmessage 
    navigator.serviceWorker.controller.postMessage(message, [messageChannel.port2]); 
    }); 
} 

Ve hizmet işçisi kodunda

Servis çalışanından gelen cevap.

Answer 2

@GalBracha, önce bir mesaj göndermeden müşteriyle iletişime geçip geçemeyeceğinizi soruyordu - evet !. İtme bildirimi alındığında (kullanıcı bildirimi tıkladığında değil, hizmet çalışanı olayı aldığında değil) istemcilere bir ileti göndermek istediğimde bunu nasıl yaptığımı hızlı bir örnek:

bazı olay (belki yüklemek olay) için hizmet işçinin içinde

// navigator.serviceWorker.addEventListener('message', ...) should work too 
navigator.serviceWorker.onmessage = function (e) { 
    // messages from service worker. 
    console.log('e.data', e.data); 
}; 

, cevaben: (hizmet işçisi kayıt, vb sonra) istemci js (? besbelli)

// find the client(s) you want to send messages to: 
self.clients.matchAll(/* search options */).then((clients) => { 
    if (clients && clients.length) { 
     // you need to decide which clients you want to send the message to.. 
     const client = clients[0]; 
     client.postMessage("your message"); 
    } 

hiledir için mesaj olayına ilişkin dinleyicinizi serviceWor’üne ekleyin Ker nesnesi, pencere nesnesi değil.