How to sync local data to server in Blazor WebAssembly-PWA?

Question

I want to building a Blazor WebAssembly Progressive Web App, that can run offline.
I began Blazor this morning, and I'm just trying to get the hang of it.

To begin I want to do something like keep.google.com. You can work on you notes offline, on different devices, and when the connection is re-established, all notes are synchronized in the background with the server.

My idea is to have simple notes on a server, with an id, title and a message. These notes can be displayed and added/modified from the client. Since I want the application to work offline, I want the synchronization process to be as follows:

• The fist time visiting the website, all notes are fetched from the server,
• When notes are added/modified, they are saved on the server,
• If connection is lost, notes can still be read and added/modified localy,
• When the connection is re-established, the modifications are saved to the server,
• Periodically or after pressing a button, sync is done between client and server to fetch new data present on the server.

I think the way to do this is to have a copy of the database localy. Client do modification on the local database and periodically/after pressing a button/when connection is re-established, I sync local database with server database.

I'm sure there is an official and easy solution to do that. I followed the CarChecker example from Microsoft, but they used the IndexedDB in javascript to do that (23min13 in the official tutorial video).
Do you know a .NET solution/tutorial/service that store data locally, and sync in the background with the server ?

Answer 1

I wrote a Blazor WebAssembly PWA with similar technical requirements. There is certainly more than one way to accomplish this but the steps I used are as follows:

1. I used sqlite on the client side to persitist the data locally. The simplest way to make that persist-able with the ability to use Entity Framework is to use the SqliteWasmHelper nuget package. https://github.com/JeremyLikness/SqliteWasmHelper

2. On startup and/or when online I fetch the necessary data and insert it into the local sqlite database.

3. The user can make changes and I save that to the local sqlite DB and mark it as ready to be synced.

4. I have a background service with a timer which executes on a configurable interval and grabs the local data marked to be synced and calls the API on the server to save the data to a SQL Server database. Of course I check to see that the user is online before attempting the sync.

5. I use Javascript to determine whether the device is online. I can provide that to you if you need but you should be able to google it.

6. I have an application update checker based on this method which works pretty well: https://whuysentruit.medium.com/blazor-wasm-pwa-adding-a-new-update-available-notification-d9f65c4ad13

I hope that helps. I'm happy to provide more detail if you like.