javascript - 访问服务 worker 中的对象

Question

美好的一天。有一个带有连接脚本的 html 页面，我可以从中访问某些对象(例如 object)。在 index.js 文件中，我可以访问这个对象。有一个函数接受 object 并从中返回一些数据:

const getObject = () => {
  let data = object.data;
  return data;
} 

如果我在 index.js 中调用这个函数，它工作正常，我可以访问 object。还有一个连接到 html 页面的服务人员。那里的一段代码:

self.addEventListner('message', event => {
   console.log('message' + event.data);
   importScripts('index.js');
   let data = getObject();
   console.log(data);
}

当我在 Service Worker 中调用 getObject 时，我得到一个错误:Uncaught ReferenceError: object is not defined at self.addEventListener (sw.js:33)。有一个问题:我怎样才能访问 service worker 中的 object？

Answer 1

Service Worker 和您控制的页面位于两个完全不同的范围内，具有自己的一组符号。不可能在这两个范围内直接引用像 getObject() 这样的函数。

但是，可以使用将在两个范围之间创建代理的帮助程序库，基本上“伪造”一个本地接口(interface)，该接口(interface)将实际调用远程方法并异步传回结果。

有几个这样的库。我知道很适合 service worker 通信的一个是 Comlink .

这是一个从 Comlink 的 README 借来的例子:

// main.js
const MyClass = Comlink.proxy(new Worker('worker.js'));
// `instance` is an instance of `MyClass` that lives in the worker!
const instance = await new MyClass();
await instance.logSomething(); // logs “myValue = 42”

// worker.js
const myValue = 42;
class MyClass {
  logSomething() {
    console.log(`myValue = ${myValue}`);
  }
}
Comlink.expose(MyClass, self);