javascript - 'postMessage'上执行 'ServiceWorker'失败 : function could not be cloned

Question

我正在尝试向服务人员实例发布消息。我收到以下错误:

Failed to execute 'postMessage' on 'ServiceWorker': function (){ obj.removeListener(ev, fn); } could not be cloned.

我的代码如下:

var socket = io();

function onYouTubeIframeAPIReady() {
    //Tell the service worker who I am
    navigator.serviceWorker.ready.then(serviceWorkerRegistration => {
        navigator.serviceWorker.controller.postMessage({
            name: 'socketInit',
            value: socket
        });
    });
}

知道为什么会这样吗？

Answer 1

实际上立即找到了答案，它在文档中。你基本上不能有 Function -type 属性(它可能在 io() 对象的某个地方)，因为它不能被克隆:

Parameters
message The message to send to the service worker. This can be any structured-clonable type.

一个 structured-clonable-type被定义为:

The structured clone algorithm is an algorithm defined by the HTML5 specification for copying complex JavaScript objects. It is used internally when transferring data to and from Workers via postMessage(). It builds up a clone by recursing through the input object while maintaining a map of previously visited references in order to avoid infinitely traversing cycles.

Things that don't work with structured clone

Error and Function objects cannot be duplicated by the structured clone algorithm; attempting to do so will throw a DATA_CLONE_ERR exception. Attempting to clone DOM nodes will likewise throw a DATA_CLONE_ERR exception. Certain parameters of objects are not preserved: The lastIndex field of RegExp objects is not preserved. Property descriptors, setters, and getters (as well as similar metadata-like features) are not duplicated. For example, if an object is marked read-only using a property descriptor, it will be read-write in the duplicate, since that's the default condition. The prototype chain does not get walked and duplicated.