componentDidMount中导航器中的postMessage返回未定义
componentDidMount中导航器中的postMessage返回未定义
提问于 2020-02-27 05:11:24
我正在尝试通过一个服务工作线程实现一些预取，当一个React组件挂载并拥有工作进程访问API并返回/缓存用户可能执行的下一组查询所需的数据时，该预取将被触发。
例如，一个用户在一个包含产品集合的页面上，我想出去预取x个产品页面的数据。
下面是当前的错误：
未捕获(在promise中) TypeError:无法读取未定义的属性“”postMessage“”
componentDidMount() {
const { products } = this.props.data;
let partNumbersArr = [];
// pull out partNumbers for PDP prefetch, limit to 6 [not using .map bc cannot break and in prod upto arrays of 120]
for (let i = 0; i < 6; i++) {
partNumbersArr.push(products[i].partNumber);
}
if ('serviceWorker' in navigator && typeof window !== 'undefined') {
const { serviceWorker } = navigator;
serviceWorker.register('service-worker.js')
.then((worker) => {
console.log('sw: registration', worker)
worker.controller.postMessage({partNumbersArr})
})
}
}在本例中，我的代码到达sw: reaches console.log，但它返回一个没有可用的postMessage的worker实例。
我的服务的一部分-worker.js(我可以发布整个内容，但它是通过webpack配置创建的，所以它有多个文件)
// Prefetch
self.addEventListener('message', function (event) {
console.log('sw: sw message event', event);
});我在React组件中的方法是不正确的吗？如何进一步调试服务工作者并了解控制器没有返回预期方法的原因。任何建议都会有所帮助:)
回答 1
Stack Overflow用户
发布于 2020-02-27 05:23:18
当然，写完整篇文章，马上就明白了-- StackOverFlow的魔力。
if ('serviceWorker' in navigator && typeof window !== 'undefined') {
const { serviceWorker } = navigator;
serviceWorker.register('service-worker.js')
.then((worker) => {
console.log('sw: registration', worker)
worker.active.postMessage({partNumbersArr})
})
}
}更改的是从worker.controller.postMessage到worker.active.postMessage
现在我们开始做生意了。
指出我的错误的博客帖子
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/60422625
复制相关文章
相似问题
腾讯云开发者
