当我重新联机时，我正在尝试使用 Service Worker 发送存储在本地存储中的数据。如果可能，不要使用 IndexedDB。
我多次读到本地存储无法与 Service Worker 一起使用，因此一旦 Internet 识别完成，我就无法恢复数据以发送它。它是否正确？如何测试我的解决方案？我有点迷茫（而且是 React 新手）。
谢谢！
【问题讨论】：
标签： javascript reactjs local-storage service-worker
您是对的，Service Worker 上下文无权访问 localStorage。因此，如果您在 React 代码中将某些内容保存到 localStorage，Service Worker 将无法访问它。
对于“如何处理用户离线时发起的 HTTP POST”的问题，有两种不同的方法：
在您的应用程序 (React) 代码中没有 Service Worker。在对服务器进行 POST 之前，在您的代码中检查 navigator.onLine。如果为真，则用户在线，您可以进行 POST。如果它是假的，那么要么在变量中保留 POST 请求（或内容、数据、正文），要么将其保存到 localStorage；为online 事件添加一个事件侦听器，并在事件侦听器触发时进行 POST。这种方法与 Service Worker 没有任何关系。所有逻辑都在您的应用程序代码中。
使用 Service Worker。编写您的应用程序代码时不要任何检查navigator.onLine，它根本不需要关心这些。在实际发生时（当用户提交表单等）时执行您的 POST。现在，在 Service Worker 中，为网络事件附加一个侦听器，并将它们保存在 IndexedDB 或 Cache 中，以供以后在连接脱机时使用。再次联机时，触发来自 Service Worker 的请求。
这些方法在不同的地方实现逻辑。首先将其全部包含在应用程序逻辑中。第二个使它对应用程序透明，而是处理 SW 中的所有内容。确实没有正确的方法可以做到这一点，这完全取决于您的应用程序的需求。在这两种情况下，您都应该在 UI 中向用户显示某种通知，告知正在发生的事情。
对于 Service Worker 方法，您可以使用 Workbox Background Sync，在此处了解更多信息：https://developers.google.com/web/tools/workbox/modules/workbox-background-sync
还值得注意的是，在第一种方法中，如果用户关闭浏览器/离开应用程序，则不会将 POST 发送到服务器。在 SW 方法中，即使用户关闭了浏览器/应用程序，也可以在连接恢复联机后使用 SW 和后台同步重试请求。
【讨论】：