背景
随着 PWA 越来越受到开发者的关注，我们发现在 PWA 应用中跨页面数据同步的问题有时可能会成为一个挑战。比如，在一个多页面的应用中，我们需要在不同的页面中同步一些应用的状态，如果没有很好的解决方案，那么这些状态的传递可能会变得很麻烦。
分析
在 PWA 应用中，我们通常使用 Service Worker 来缓存数据和处理离线情况。因此，我们需要思考如何在 Service Worker 中进行数据共享。现在，有一些优秀的框架，比如 Redux、MobX 等已经提供了一些解决方案，但是，这些框架很大程度上是针对单页面应用而设计的，所以在多页面应用中的应用也许不太适用。
那么，有没有一种简单实用的方法来解决这个问题呢？我们可以考虑使用 Service Worker 的 postMessage API。该 API 允许 Service Worker 向客户端（即页面）发送消息，并且客户端也可以向 Service Worker 发送消息。比如，我们可以重写一个简单的示例来说明我们的方法。
示例
我们可以通过下面的 JavaScript 代码来实现一个简单的跨页面数据同步机制：
-- - ------- ------ ------
-------------------------------- --------------- -
------------------ --- ------ -
-- ----
------------------------------------ ----------------------------------
- ---- ------------------ --- ------ -
-- -------
--- ----- - -------------------------------------
-- --------
--------------------------
----- -----------
---- ---------------
------ -----------------
-- --------------
-
---
-- -----------
-- - ------- ------ ----
------------------------------------------------
----- ------
---- -----------
------ -------
---
-- ---- ------- ------ ---
---------------------------------- --------------- -
------------------ --- ---------- -- -------------- --- ----------- -
---------------------- - - ------------------
-
---在上述示例中，我们在 Service Worker 中监听 message 事件，并根据收到的数据类型执行不同的操作。当消息类型为 set 时，则意味着需要设置一个键/值对，所以我们使用 localStorage 来缓存该数据。当消息类型为 get 且需要获取之前设置的键/值对时，我们从 localstorage 中获取数据，并通过 postMessage 方法将其发送回到客户端页面。
在客户端页面中，我们使用 navigator.serviceWorker.controller.postMessage 方法来获取 Service Worker 实例，并使用 window.addEventListener 方法来监听消息，当消息类型为 response 且键为 username 时，则代表数据已经传递成功，我们可以在控制台中查看输出结果。
结论
上述示例只是一个简单的示例，但是其也暴露了在 PWA 应用中跨页面数据同步的实现方式。我们可以基于此进行不同场景的实现，比如监听表单提交等事件来动态传递数据。如果您在开发 PWA 应用时遇到类似的问题，可简单尝试以上技术方案，或者考虑使用相关框架，并结合实际需求合理应用。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/670f41905f55128102636edd