在 Web 应用程序中处理离线数据答案

【问题标题】：Handling offline data in a web app在 Web 应用程序中处理离线数据
【发布时间】：2019-10-04 22:58:01
【问题描述】：

当前堆栈：Angular 1.6、BreezeJS（处理离线/在线）、.net web api、azure sql

迁移到 Stack：Angular 5、NgRx（处理离线/在线）、.net core Web API、Azure SQL

背景： 我有一个必须离线/在线工作的网络应用程序。当用户处于连接环境中时，我使用 Web Worker 为他们正在处理的项目提取最新数据并将该数据存储在本地存储中。当他们离线时，我从该本地存储推送/拉取数据以允许用户离线工作。目前，该系统是使用 Angular 1.6 构建的，BreezeJS 在离线时处理元数据实体，并在重新在线后进行后续同步。这很有效，因为 BreezeJS 在处理所有离线元数据和后续同步方面做得非常透明和一致。

我需要将系统升级到 Angular 5，并且我想从堆栈中删除 BreezeJS（主要是因为他们没有为 Angular 构建的打字稿更新，而且似乎没有任何创建的计划）但我没有确定如何处理离线数据以及将离线数据同步到在线。我目前的计划是用 NgRx 代替 BreezeJS。

我正在考虑在离线时使用 Service Worker 将请求转储到本地存储的队列中，同时更新当前存储（通过不同的操作使用 ngrx，将记录表示为未确认）无论如何。然后当用户重新上线时，我运行请求队列，然后在响应正常进入时更新用户的本地存储。我还将更新我的网络工作者，以便他们在数据检索时推送更新ngrx 存储的操作，然后将其内容转储到本地存储，以便在需要时可以离线使用。

问题： 我意识到我实际上是在强迫 NgRx 离线/在线工作。这是对 NgRx 库的良好使用，还是将该库脱离上下文并将其用于它从未打算用于的东西？

是否存在现有的生产就绪和维护库，用于处理 Angular 应用程序中的离线数据和同步？

提前感谢您的帮助。

【问题讨论】：

我了解 Breeze 确实可与 Angular v2+ 一起使用。见此链接：github.com/Breeze/breeze.bridge2.angular
关于 ngRx，不支持开箱即用的离线场景。已经添加了这样的库：github.com/btroncone/ngrx-store-localstorage
关于在 Angular 中处理离线数据，你看过 service worker 吗？见此链接：blog.angulartraining.com/…
@DeborahK - 是的，我看到了那个桥，但如果我使用微风，我会希望创建原始版本的小组支持它。这就是为什么我想远离它。我正在使用服务人员来处理我的资源缓存，如果没有网络连接，我还会将请求定向到离线存储。

标签： angular ngrx

【解决方案1】：

哇。这里有很多不正确的地方。

BreezeJS 适用于所有版本的 Angular。它在 TypeScript 中重新编码，现在作为 TypeScript 库维护。我们在实践中广泛使用它，在最新的 Angular 版本中构建大型企业应用程序。它由其原始作者维护。

我应该知道。我是 Breeze 的制造商 IdeaBlade 的创始人和现任总裁。

我也很了解ngrx。您可以序列化存储的状态并恢复它，但这样做并非易事，而且不像使用 Breeze 实体缓存那么容易。您可以尝试捕获动作流并重播它们。这也将充满困难。

您听起来不像是尝试使用ngrx 来管理实体的人。除了最小的实体模型之外，这对于任何人来说都是一项艰巨的任务。在你迈出那一步之前，你最好先学习一下。我这样说是作为一个开创图书馆以使ngrx实体管理更容易（查找ngrx-data）的人说的。

但 IMO 最重要的障碍是完全不支持 ngrx 或 redux 中的实体关系，这是关系实体模型必不可少的东西，也是 Breeze 的核心优势之一。

如果您习惯了 Breeze，请在放弃之前非常非常仔细地查看。

【讨论】：

对不起，沃德，我不希望它听起来像我在为任何事情敲打微风。我喜欢这个库，并且几乎在我所有的 angularjs 项目中都使用它。但是，我在 site 的任何地方都没有看到提到在 Typescript 中重写库，而 angular 2 bridge 自 11 月以来一直处于 1.0 测试版。我不想在这个新的生产应用程序中使用它，然后发现它没有得到积极维护，结果让自己陷入困境。
是的，我是ngrx的新手。我注意到过多的样板，这就是为什么我在上面的评论中提到我如何关注你和 John Papa 正在从事的 angular-ngrx-data 项目。除非我误解了 John 的解释方式，否则实体缓存是该库的目标之一，它将解决我面临的离线挑战。更不用说，当我使用它时，我可以尝试帮助为图书馆做出贡献。我也喜欢它支持单向流的特定架构。
没问题，杰克。在产品公告部门跌倒真的是我们的错。我们永远都没有碰过这个网站。原因：我们一直在忙于在工作中使用 Breeze，而没有对像您这样的好人给予足够的关注。我个人的工作就是为此做点什么——任何事情。我计划在接下来的几周内完成它。
回复：ngrx-data - 受您在此处的评论的启发，今天我添加了两个操作和一个选择器，以方便导出和导入 ngrx-data 缓存（参见 alpha.13）。碰巧的是，还有另一个 ngrx-friend 库专门用于将存储状态块导出/导入到本地存储。它也可能是相关的。 github.com/btroncone/ngrx-store-localstorage 我也怀疑主要贡献者在这方面有一些针对 v6 的计划。也就是说，尽管我在 ngrx 上玩得很开心，但它不是 Breeze。
Angular 2 Bridge 已经推出一段时间了，我们已经在许多项目中使用了它。处于测试阶段的是使用新的 HttpClient 服务而不是旧的 Http 服务的更新网桥。我将它留在测试版以防万一出现问题，但我们已经在我们自己的项目中成功升级到它，到目前为止没有任何问题。前几天我实际上只是在考虑将其正式发布为 v1。这周我会努力做到这一点。

【解决方案2】：

Ngrx 可以离线使用，只需使用 idb.js 之类的库将您的状态存储在浏览器数据库 indexedDB 中。您还可以使用 lazloading 动态加载数据切片。当使用模块加载 Effects forFeature 时，一切都在 effects init 方法中完成，这里是一个链接，用示例代码 Is the ngrx store persistent? 回答您的问题。 Ngrx 会定期更新，他们有 PWA 和数据同步等计划

【讨论】：

您包含的链接有一种非常有趣的离线数据处理方式。我可以试一试。现在，我给angular-ngrx-data 一个机会。它是由 John Papa 和制作 Breeze（Ward Bell）的同一个人制作的，所以我相信他们正在尝试做的事情，并且由于它显着减少了样板代码，因此使用链接所做的点配置工作可能会更容易你包括在内。