javascript - React Local Storage 和 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。如果为真，则用户在线，您可以进行 POST。如果为假，则要么将 POST 请求(或内容、数据、正文)保留在变量中，要么将其保存到 localStorage；为 online 事件添加一个事件监听器，并在事件监听器触发时进行 POST。这种方法与 Service Workers 没有任何关系。所有逻辑都在您的应用程序代码中。

2. 与 Service Worker 一起。编写您的应用程序代码时不要任何检查navigator.onLine，它根本不需要关心这一点。在实际发生时(当用户提交表单时等)执行您的 POST。现在，在 Service Worker 中，为网络事件附加一个监听器，并将它们保存在 IndexedDB 或 Cache 中，以供以后在连接离线时使用。再次在线时，触发 Service Worker 的请求。

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

对于 Service Worker 方法，您可以使用 Workbox Background Sync，更多信息请点击此处:https://developers.google.com/web/tools/workbox/modules/workbox-background-sync

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