Question

我已经将网络工作者添加到了Ionic / React应用中。这是一个单独的打字稿代码库，并捆绑到/assets/dist/worker.js

要重现设置，可以使用以下最小示例Web worker：

import {v4} from 'uuid'

console.log('worker running');
onmessage=(e)=>{
    console.log('received message');
    postMessage(v4());
}

将其与tsconfig.json一起提供给自己的"lib": ["WebWorker", "WebWorker.ImportScripts"],，然后将其与您选择的捆绑器捆绑在一起。

确保捆绑的javascript托管在/ assets下，您可以使用它来创建网络工作者，如下所示：

const myWorker = new Worker('assets/dist/worker.js');

export default function App(){
  const [v4, setV4] = useState("waiting for worker");
  myWorker.postMessage('go');
  myWorker.onmessage=(e)=>{
    setV4(e.data);
  }
  return (
  <IonApp>
    <p>{v4}</p>
  </IonApp>
)};

到目前为止，这很好。但是它无法访问电容器插件。我想使用Webworker来减轻一些繁重的计算，其中包括对自定义本机代码的调用。可通过电容器插件访问此本地代码。但是任何电容器插件导入都会产生错误消息。将以下代码添加到工作程序：

import {Plugins} from '@capacitor/core';

const {Device} = Plugins;

它抛出：

ReferenceError: window is not defined

更新：尝试了一种变通方法：

(<any> self).window = self;  // <------ here
import {v4} from 'uuid'
import {Plugins} from '@capacitor/core';

const {CustomNativePlugin} = Plugins;

console.log('worker running');
onmessage=(e)=>{
    console.log(CustomNativePlugin.customCall());
    postMessage(v4());
}

这将创建新的错误消息：

Uncaught (in promise) CustomNativePlugin does not have web implementation.

Answer 1

在黑暗中远射...但是，如果您提出的问题是正确的，并且window实际上仅用作连接插件的全局对象，并且如果window中没有其他内容，则表明是在使用Worker范围中不可用的，那么您可以这样做

self.window = self;

在工作脚本的开头。

如何在Web Worker中使用电容器插件

1 个答案: