2

SharedWorker使用消息端口与 交换消息ParentWorker。

家长工人

var port = new SharedWorker('/worker.js').port;
port.onmessage = function(e){
    console.log(e.data);
};
port.start();
port.postMessage("Hello Shared Worker. I'm Mr. Tab");

SharedWorker (worker.js)

onconnect = function(e){
    var port = e.ports[0];
    port.onmessage = function(e){
        console.log(e.data);
    };
    port.start();
    port.postMessage("Hello Mr. Tab. I'm Shared Worker.");
};

Service Worker 呢？有没有类似SharedWorker端口的东西？

4

3 回答 3

3

以下是它的行为方式：

// in the page:
navigator.serviceWorker.controller.postMessage("Hi!");

// in the ServiceWorker:
self.onmessage = function(event) {
  event.source; // instance of Client
  event.data; // "Hi!"
  // reply
  event.source.postMessage("Hey!");
};

// back in the page:
navigator.serviceWorker.onmessage = function(event) {
  event.source; // instance of ServiceWorker
  event.data; // "Hey!"
};

在撰写本文时，Chrome 当前根据早期规范将 postmessages 从 ServiceWorker 发送到 Window 到 window.onmessage。此外， event.source 为空。

如果您同时需要解决方案，请传入您自己的 MessageChannel。请参阅https://jakearchibald.github.io/isserviceworkerready/demos/postMessage/上的演示

于 2015-03-25T15:58:26.630 回答
0

@Jaffa The Cake 的答案只是一个简单的进出消息通道，而不是完全等同于SharedWorkerPort。目前还没有类似Port in 的内置接口。SharedWorkerServiceWorker消息通道 API 是强制性的。这是一个。

你的应用程序.js

var mc = new MessageChannel();
mc.port1.onmessage = function(e){
    console.log(e.data);
};
var sw = navigator.serviceWorker;
sw.register('/sw.js',{scope : '/'}).then(function(){
    console.log("Service Worker is successfully registered.");
}).catch(function(er){
    console.log("Registration failed.");
});
sw.ready.then(function(reg){
    reg.active.postMessage('',[mc.port2]); //initialise the messaging channel
    mc.port1.postMessage("Hello Service Worker. I'm Mr. Tab.");
});

sw.js

//equals to onconnect in Shared Worker
onmessage = function(e){
    var port = e.ports[0];
    port.onmessage = function(e){
        console.log(e.data);
    };
    port.postMessage("Hello Mr. Tab. I'm Service Worker.");
};

注意：此代码在 Chrome 43 Beta 上测试。

于 2015-03-28T17:30:00.023 回答
0

通过检查ServiceWorker.prototype，您似乎可以使用myWorker.postMessage方法，但似乎没有myWorker.onmessage来自窗口的事件。另请参阅https://slightlyoff.github.io/ServiceWorker/spec/service_worker/，其中记录了这一点。

您可以使用self.onmessage事件（http://www.w3.org/TR/service-workers/#service-worker-global-scope和https://slightlyoff.github.io/ServiceWorker/spec/service_worker/）但似乎没有self.postMessage工人方面的方法。

因此，目前看来您可以向 Service Worker 发送消息，但不能反过来。考虑到ServiceWorkerGlobalScope继承自WorkerGlobalScopehttp://www.w3.org/TR/service-workers/你应该可以，但这在我找到的文件中没有明确提到。考虑到https://slightlyoff.github.io/ServiceWorker/spec/service_worker/上的文档，它现在EventTarget至少继承自 Chrome 浏览器。

作为一个建议，也许反向通信可以通过发送轮询 Web 请求来实现，服务工作者将以特殊方式作为缓存命中服务。

于 2015-03-24T10:49:37.530 回答