10

postMessageWeb アプリケーションと対応する Service Worker の間で試行します。Service Worker は正常に登録され、これまでのところ機能しています。残念ながら、私はいくつかの奇妙な動作に気付きました:

  1. はnavigator.serviceWorker.controller常にnullです。
  2. サービスワーカー側ではpostMessage、次のように実装しました。
self.addEventListener('message', function (evt) {
    console.log('postMessage received', evt);
});

evt.origin=''残念ながら、オリジンにポストバックする重要なフィールドにevt.source=nullは、目的の値が含まれていません。それにもかかわらず、私は常に送信されevt.dataた.

ポストバックって知ってる？

どうもありがとうございました！
そして私

4

3 に答える 3

19

ワーカーから制御対象のアプリに応答を返す 1 つの方法をこのデモに示し、次のように実行します (実際にはまだテストしていませんが、デモはうまく機能し、コードは仕様に一致しているようです)。 .

メインページで：

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]);
  });
}

Service Worker コードでは次のようになります。

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

sendMessageその後、関数によって返された promise を使用して、Service Worker からの応答で必要なことを実行できるはずです。

于 2015-05-13T22:15:17.033 に答える