javascript - 来自 componentDidMount 中导航器的 postMessage 返回 undefined

Question

我试图通过服务工作者实现一些预取，当 React 组件挂载时会触发该预取，并且该服务工作者拥有工作人员访问 API 并返回/缓存用户可能执行的下一组查询所需的数据。

例如，一个用户在一个包含一系列产品的页面上，我想出去预取 x 个产品页面的数据。

这是当前的错误：

未捕获（承诺中）类型错误：无法读取未定义的属性“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:registration console.log，但它返回了一个没有 postMessage 可用的工作实例。

我的 service-worker.js 的一部分（我可以发布整个内容，但它是通过 webpack 配置创建的，因此它有多个文件）

// Prefetch
    self.addEventListener('message', function (event) {
        console.log('sw: sw message event', event);
   });

我在 React 组件中的方法不正确吗？如何进一步调试服务人员并了解控制器未返回预期方法的原因。任何建议都有帮助:)

标签： javascriptreactjsservice-workerprefetch

Answer 1

当然，写完整篇文章并立即弄清楚 - 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

现在我们在做生意。

OG Post指出我的错误

Service Worker PostMessage 错误