which approach for MAUI IOS/Android apps with offline support to backend Web App / App API?

Question

Which approach of Microsoft tecnologies would be recommended for this? (mainly I ask around any mobile app sych ideas)

• System that has a Web Interface, as well as MAUI cross platform IOS/Android app.
• Central database for Web Interface (can be ASP .NET API) which IOS/Android apps can sync to
• IOS/Android apps have offline capability with Sqlite (using EF Core), but can elect to "sync" to the backend API/database when available
• Ideally would be nice for some views in the Website to share components with MAUI mobile apps, perhaps through the Blazor Hybrid approach

Questions:

Q1 - Is there an automated way of handling the "sync" from the MAUI mobile apps back to the backend database? I see there is a "Offline data sync is an SDK feature of Azure Mobile Apps" available, however I am not sure this would be appropriate/work if I'm trying to sync the database back to my system backend database (also used directly by the web application)?

Q2 - Any other advice / tips. My thoughts were to use the following perhaps:
* ASP .NET API with database (SQL server)
* Blazor Web App
* MAUI cross platform mobile apps (IOS/Android) [perhaps with Blazor Hybrid to share views?]
* [mainly not sure about any good MS approaches to handle the mobile app offline/sync aspect that does fit into this mix]

Answer 1

Hi, @mixedup

First, you can use the DataSync Framework to set up the MAUI client and ASP.NET Core server respectively for offline data synchronization.

• https://learn.microsoft.com/en-us/azure/developer/mobile-apps/azure-mobile-apps/quickstarts/maui/offline?pivots=vs2022-windows
• https://learn.microsoft.com/en-us/azure/developer/mobile-apps/azure-mobile-apps/howto/server/dotnet-core

And since Blazor Hybrid can access the platform API, it seems that the implementation itself can be implemented on his MAUI native side.

• https://learn.microsoft.com/en-us/training/modules/build-blazor-hybrid/8-platform-features

Answer 2

clearly the webapi can be fully shared.

if you want the app source as close as possible, then you could use blazor WASM for the web app, and hybrid blazor for the mobile apps.

as the blazor wasm does not have a sync library like mobile, you should wrap and use injection. typically you would use a service worker for sync with wasm.

note: this is not the approach I have taken. I use react for the web app, swift/swiftui for IOS and kotlin/jetpack for android. I have found its faster and easier to use the native mobile app environments.