当我重新联机时,我正在尝试使用 Service Worker 发送存储在本地存储中的数据。如果可能,不要使用 IndexedDB。
我多次读到本地存储不能与 Service Worker 一起使用,因此一旦完成互联网识别,我就无法恢复数据以发送它。它是否正确?如何测试我的解决方案?我有点迷茫(而且是 React 的新手)。
谢谢!
最佳答案
你是对的,Service Worker 上下文没有访问 localStorage 的权限。因此,如果在 React 代码中将某些内容保存到 localStorage,Service Worker 将无法访问它。
对于“如何处理用户离线时发起的 HTTP POST”这个问题,有两种不同的处理方式:
没有 Service Worker,在您的应用程序 (React) 代码中。在向服务器执行 POST 之前,在您的代码中,只需检查
navigator.onLine
。如果为真,则用户在线,您可以进行 POST。如果为假,则要么将 POST 请求(或内容、数据、正文)保留在变量中,要么将其保存到 localStorage;为online
事件添加一个事件监听器,并在事件监听器触发时进行 POST。这种方法与 Service Workers 没有任何关系。所有逻辑都在您的应用程序代码中。与 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 和后台同步重试请求。
关于javascript - React Local Storage 和 Service Worker(重新上线时发送数据,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58380108/