如何在 Blazor WebAssembly-PWA 中将本地数据同步到服务器？

Question

我想构建一个可以离线运行的 Blazor WebAssembly 渐进式 Web 应用程序。
我今天早上开始使用 Blazor，我只是想掌握它的窍门。

首先，我想做一些类似keep.google.com 的事情。您可以在不同的设备上离线处理笔记，重新建立连接后，所有笔记都会在后台与服务器同步。

我的想法是在服务器上有简单的注释，id带有title和message。这些注释可以从客户端显示和添加/修改。由于我希望应用程序能够离线工作，因此我希望同步过程如下：

• 第一次访问网站时，所有笔记都是从服务器获取的，
• 添加/修改注释时，它们会保存在服务器上，
• 如果连接丢失，仍然可以在本地阅读和添加/修改笔记，
• 当重新建立连接时，修改将保存到服务器，
• 定期或按下按钮后，客户端和服务器之间会进行同步，以获取服务器上存在的新数据。

我认为做到这一点的方法是在本地拥有数据库的副本。客户端对本地数据库进行修改，并定期/按下按钮后/重新建立连接时，我将本地数据库与服务器数据库同步。

我确信有一个官方且简单的解决方案可以做到这一点。我遵循Microsoft 的CarChecker示例，但他们使用 JavaScript 中的 IndexedDB 来做到这一点（官方教程视频中的 23 分钟 13 ）。
您知道在本地存储数据并在后台与服务器同步的 .NET 解决方案/教程/服务吗？

Answer 1

我编写了一个具有类似技术要求的 Blazor WebAssembly PWA。当然有不止一种方法可以实现这一目标，但我使用的步骤如下：

1. 我在客户端使用 sqlite 将数据保留在本地。使该持久性并能够使用实体框架的最简单方法是使用 SqliteWasmHelper nuget 包。https://github.com/JeremyLikness/SqliteWasmHelper

2. 在启动和/或在线时，我获取必要的数据并将其插入本地 sqlite 数据库。

3. 用户可以进行更改，我将其保存到本地 sqlite 数据库并将其标记为准备同步。

4. 我有一个带有计时器的后台服务，它以可配置的时间间隔执行，并获取标记为要同步的本地数据，并调用服务器上的 API 将数据保存到 SQL Server 数据库。当然，在尝试同步之前我会检查用户是否在线。

5. 我使用Javascript来确定设备是否在线。如果您需要，我可以向您提供，但您应该能够通过谷歌搜索。

6. 我有一个基于此方法的应用程序更新检查器，效果非常好：https://whuysentruit.medium.com/blazor-wasm-pwa-adding-a-new-update-available-notification-d9f65c4ad13

我希望这有帮助。如果您愿意，我很乐意提供更多详细信息。