React 本地存储和 Service Worker（当您重新上线时发送数据

Question

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

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

谢谢 ！

Answer 1

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

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

1. 没有 Service Worker，在您的应用程序 (React) 代码中。在您的代码中，在向服务器执行 POST 之前，只需检查navigator.onLine. 如果是 true，则用户处于在线状态，您可以进行 POST。如果为 false，则要么将 POST 请求（或内容、数据、正文）保留在变量中，要么将其保存到 localStorage；为事件添加一个事件侦听器online，并在事件侦听器触发时进行 POST。这种方法与 Service Worker 没有任何关系。所有逻辑都在您的应用程序代码中。

2. 与服务人员。编写您的应用程序代码而不进行任何检查navigator.onLine，它根本不需要关心这一点。每当实际发生时（当用户提交表单等时）就进行发布。现在，在 Service Worker 中，附加网络事件的侦听器并将其保存在 IndexedDB 或 Cache 中，以便以后在连接离线时使用。再次在线时，触发来自 Service Worker 的请求。

这些方法在不同的地方实现逻辑。首先，一切都在应用程序逻辑中。第二个使其对应用程序透明，并处理软件中的所有内容。实际上没有正确的方法来做到这一点，这完全取决于您的应用程序的需求。在这两种情况下，您可能应该在 UI 中向用户显示某种通知，告诉用户发生了什么。

对于 Service Worker 方法，您可以使用 Workbox 后台同步，更多信息请参见： https: //developers.google.com/web/tools/workbox/modules/workbox-background-sync

还值得注意的是，在第一种方法中，如果用户关闭浏览器/离开应用程序，则 POST 不会发送到服务器。在软件方法中，即使用户关闭了浏览器/应用程序，也可以在连接恢复在线后使用软件和后台同步来重试请求。