什么是 PWA 应用？
PWA 应用（Progressive Web Apps）是一种跨平台、基于 Web 技术的应用程序。PWA 应用具有如下特点：
- 可以像原生应用一样被添加到设备主屏幕；
- 可以离线访问；
- 可以通过服务工作线程进行数据预缓存和离线操作；
- 可以通过向用户请求授权来访问设备上的硬件；
PWA 应用不仅具有比传统 Web 应用更好的工作性能和可用性，同时也可以让用户摆脱下载多个应用的困扰。
PWA 应用中页面间消息传递的机制
在 PWA 应用中，页面间消息传递的机制有两种：LocalStorage 和 BroadcastChannel。
LocalStorage
LocalStorage 是一个 Web 存储 API，用于存储键值对，并且可以在同源（origin）的不同文档（document）之间共享。
PWA 应用中，可以在一个文档中监听 storage 事件，并在另一个文档中触发这个事件。通过这种方式，可以实现在不同页面之间的消息传递。
示例代码：
-- -------------------- ---- -------
-- ---------- --- ------- --
---------------------------------- --------------- -
-- ---------- --- ---------- -
--------------------- ---------- ----------------
-
-- -------
-- ---------- --- ------- --
------------------------------- ------- ---------BroadcastChannel
BroadcastChannel 是一个可跨域广播消息的 API，可以通过一个公共的频道（channel）在不同文档间传递消息。
PWA 应用中，可以在每个需要接受消息的文档中创建一个 BroadcastChannel，然后通过 postMessage 方法将数据发送到频道中。
示例代码：
-- -------------------- ---- ------- -- ---------- --- ---------------- ----- ------- - --- ------------------------------- -- ---------- ----- --------------------------- --------- -- ---------- ----- ----------------------------------- ---------------------- - --------------------- ---------- ------------------- ---
结论
在 PWA 应用中，通过 LocalStorage 和 BroadcastChannel 两种机制，可以实现不同页面之间的消息传递。需要注意的是，BroadcastChannel 的 API 目前只在较新版本的浏览器中得到支持，且需要注意安全性问题。
PWA 应用的开发越来越普及，页面间消息传递的机制也变得越来越重要。掌握 LocalStorage 和 BroadcastChannel 的用法，可以帮助开发人员更好地实现 PWA 应用中的页面间通信。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/676f671fe9a7045d0d728418