Progressive Web Applications (PWA) is one of the technology that the developers might get attention to it. With network latency issues that we are experiencing, having an offline feature is not bad addition to our existing application. To start implementing this on Blazor, I'll just continue working with the FirstBlazor Project. I'll include the source code link below if I'm able to upload this in the server. I've tried many indexedDB wrapper but I've only successfully implemented this with DnetIndexedDb NuGet package. To start off, you can start getting the DnetIndexedDb from the NuGet Manager.
Add the necessary utility and helper files needed by the project. They'll be used later when we begin to define the offline database models.
Next we have to define the offline database class and it's model class. You'll notice we have just used the helper TStore class. For simplicity use, I've just include related classed for this article instead of separating them with their own files.
Then we will define the context class for the offline database employee data. This context class interacts with the client side javascript libraries. At this point, only one method was defined which the method purpose is to add employee data to the indexed db.
In order to use the indexeddb in our application, we need to define and load the employee context we just made earlier into the service collection list.
Add the DnetINdexedDb javascript library reference in the index.html. Take note, if you happen to forgot this step, you'll encounter javascript error that the dnetindexdb doesn't exist or not found.
Next, we will modify the existing Index.Razor file by adding a Add button which add a random generated john doe name into the employee data.
Finally, we can run the project to test and check if there are new data when we clicked the button.
When we clicked the Add button, you'll noticed that there is a new record added to the indexed db. You can use the developer tool (F12) and go to the application tab to check on the indexed db portion.
Now we can add data to the indexed db, let's add a retrieve function called GetAll() to list down the data from the indexed db.
Let's go back to the Index.razor to have list down data capabilities to our existing application.
Upon running the application, you should be able to list down the data from the index db database when you clicked the List all employees button.
Please note, these are the basic codes in order to make the indexed db feature work. If you try to add another data, you will encounter error since the data already exists the only work around for now is to delete those data and add the new data with the old data of course.
Hope this could help fellow developers, happy coding.