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.");
};

服务工作者怎么样？有没有类似SharedWorker端口的东西？

Answer 1

以下是它的表现：

// 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目前根据之前的规范将邮件从ServiceWorker发送到Window到window.onmessage。此外，event.source为null。

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

上的演示

Answer 2

通过检查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/），但似乎没有工作方{/ 1}}方法。

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

作为建议，通过发送服务工作者以特殊方式作为缓存命中服务的轮询Web请求，可能会很难实现反向通信。

Answer 3

@Jaffa Cake的答案只是一个简单的输入和输出消息通道，而不是SharedWorker端口的精确等价物。目前，没有与SharedWorker中的ServiceWorker端口类似的内置接口。消息通道API是必需的。这是一个。

yourapp.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上进行了测试。

ServiceWorker中的SharedWorker端口的等效？

ParentWorker

SharedWorker（worker.js）

3 个答案:

yourapp.js

sw.js