访问服务工作者中的对象答案

【问题标题】：access to object in service worker访问服务工作者中的对象
【发布时间】：2018-08-09 10:40:33
【问题描述】：

美好的一天。有一个带有连接脚本的 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)。有一个问题：我怎样才能访问object inside service worker？

【问题讨论】：

这里是一个例子codepen.io/serginij/project/editor/AekNyq
const 对象在 module.js 中定义。尝试在 service worker 中添加importScripts('module.js');。
@J.Loscos 你的建议奏效了。但是当我尝试对其他脚本执行相同操作时，我收到一个错误：Uncaught Error: Script error。你不知道怎么解决吗？

标签： javascript service-worker

【解决方案1】：

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

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

有几个这样的库。我知道一个非常适合服务人员通信的是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);

【讨论】：

您分享的示例是针对工人的。但问题在于 Service Worker。