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

标签 javascript reactjs local-storage service-worker

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

我多次读到本地存储不能与 Service Worker 一起使用,因此一旦完成互联网识别,我就无法恢复数据以发送它。它是否正确?如何测试我的解决方案?我有点迷茫(而且是 React 的新手)。

谢谢!

最佳答案

你是对的,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 和后台同步重试请求。

关于javascript - React Local Storage 和 Service Worker(重新上线时发送数据,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58380108/

相关文章:

javascript - 函数参数可以使用数组方法吗?

angularjs - 没有服务器的 Angular 数据库

javascript - Vue.js axios 从本地存储(localforage)获取值返回promise对象而不是值

javascript - 使用本地存储提交表单时未保存值

javascript - 语义 UI - 调整选项卡/div 的大小以适应动态表格

javascript - jQuery 错误 - 将事件从 iframe 绑定(bind)到 parent.window

javascript - 为什么这会在 IE 11 中引发异常

javascript - 为什么替换功能在此代码中不起作用

javascript - 如何在 React Native 中简单地更改触摸时的背景颜色?

reactjs - 出现错误 : void' is not assignable to type 'FC<IPickWinnerProps>' in react js