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

Question

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

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

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

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

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

我确定有一个官方且简单的解决方案可以做到这一点。我遵循了 Microsoft 的 CarChecker 示例，但他们使用 javascript 中的 IndexedDB 来执行此操作（official tutorial video 中的 23min13）。
您知道在本地存储数据并在后台与服务器同步的 .NET 解决方案/教程/服务吗？

Answer 1

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

1. 我在客户端使用 sqlite 在本地持久保存数据。使用 Entity Framework 使其持久化的最简单方法是使用 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

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