javascript - React Local Storage 和 Service Worker（重新上线时发送数据

当我重新上线时，我正在尝试使用 Service Worker 发送存储在本地存储中的数据。如果可能，不要使用 IndexedDB。

我曾多次读到本地存储无法与 Service Worker 一起使用，因此一旦互联网识别完成，我就无法恢复数据以发送它。这个对吗？如何测试我的解决方案？我有点迷失（并且是 React 的新手）。

谢谢！

标签： javascriptreactjslocal-storageservice-worker

没错，Service Worker 上下文无权访问 localStorage。因此，如果您在 React 代码中将某些内容保存到 localStorage，则 Service Worker 无法访问它。

“如何处理用户离线时发起的 HTTP POST”的问题有两种不同的方法：

如果没有 Service Worker，在您的应用程序 (React) 代码中。在对服务器进行 POST 之前，在您的代码中检查navigator.onLine. 如果为真，则用户在线，您可以进行 POST。如果它是假的，那么要么在变量中保留 POST 请求（或内容、数据、正文），要么将其保存到 localStorage；为事件添加事件侦听器online并在事件侦听器触发时进行 POST。这种方法与 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 和后台同步重试请求。