Offline DB (SQLite) with Blazor WASM

Prathamesh Shende 376

I have seen so many web app that supports offline. Like IF internet is not available but still use can post and update data into webapp
and then move to online database sql after webapp goes online.

Can we implement this Blazor WASM connect sqlite or with IndexedDB and post offline changes to online database?

2 answers

Michael Washington 911 Reputation points MVP

2021-12-31T15:24:49.767+00:00

This example does just that:
CarChecker - a Blazor sample app

There is a video where he explains how it works on Channel 9: Modern Web UI with Blazor WebAssembly
Please sign in to rate this answer.
Prathamesh Shende 376 Reputation points

2022-01-04T12:57:07.747+00:00

I know this example and they also show this in community standup and dotnet conf too. as you said they make little more complex on indexed db example in car checker project. but its okay.

I found one Nuget Package and its Open Source right now https://github.com/Jinjinov/IndexedDB.Blazor this guy uses TG.Blazor.IndexedDb Project and Recreate and simplify the project. Its only
working on

Creating IndexedDB

Add Record into db

Update Record into db

Delete Record into db

But also need the Delete the Database Functionality too. right now this package helps me.

also there another package which has all the function and much better than above . https://github.com/amuste/DnetIndexedDb
But I tried to integrate with my project throwing some problems.
Sign in to comment
Bruce (SqlWork.com) 55,601 Reputation points

2021-12-31T16:52:28.117+00:00

The sample blazor app uses local storage via JavaScript interop for offline support. But it requires the app to be running to do the upload.

A more common approach is to use a service worker that does the upload in the background, so the app does not need to be running. A service worker can also cache requests, so you can keep all the logic in one place. As blazor httpclient uses JavaScript interop to fetch data, it works perfectly with service workers.
Please sign in to rate this answer.
Michael Washington 911 Reputation points MVP

2021-12-31T17:38:59.047+00:00

Yes, that is true, but, it does require the developer to implement a lot of complex logic in JavaScript. I think the point of Steve Sanderson's example is to keep as much of the code in C# as possible. His localVehicleStore.js keeps the JavaScript minimal because the "heavy lifting" is in the C# file (LocalVehiclesStore.cs). However, you point is well taken. Thanks!
Sign in to comment