Service Worker - 控制器上没有可用的 postMessage 方法

Question

我有一个关于 Service Worker 和客户端通信的问题。我正在查看这篇文章和其他博客，但它们都不起作用。我在 Chrome 最新版本中遇到错误。

Communcation between service worker and web page

我尝试使用navigator.serviceWorker.controller.postMessage({'command': 'trimCaches'});

但我在 Chrome 中遇到错误，无法读取未定义的属性“控制器”

。进一步调查显示控制器中没有可用的 postMessage 方法。谁能帮帮我。

我的要求是向服务人员发送一些消息/数据。

Answer 1

此错误，“无法读取未定义的属性 'controller'”，表明导航器中没有可用的 serviceWorker。换句话说，页面上还没有注册 Service Worker。这可能是因为没有并且页面刚刚加载或注册过程中出现错误。我不完全确定您进一步调查控制器的意思是什么，因为错误消息清楚地表明导航器中没有 serviceWorker，因此 不能有控制器来调查。

我猜当您调用 navigator.serviceWorker.controller.postMessage() 时，注册尚未完成。我建议你注册一个 SW 并将消息接收逻辑包含在 SW 脚本中。然后，在加载页面并从开发工具检查 SW 是否真正注册后，您可以在浏览器的控制台中使用 postMessage API。

另一种确保您只在控制器上调用 postMessage 的方法是在 serviceWorker.register() Promise 处理程序中包含该逻辑。

这可能对你也有帮助https://serviceworke.rs/message-relay.html