HTML5 Offline Application using IndexedDB

Share this
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  

In this article, you will learn to create HTML5 Offline Application using IndexdDB API.

IndexedDB API allows to store the data inside user’s browser.  IndexedDB is more powerful than Local Storage and useful for applications that requires to store large amount of the data. These applications can run more efficiency and load faster.

HTML5 introduces Application Cache, which means that a web application is cached, and accessible without an internet connection. Application cache provided following advantages:

  1. Offline browsing – users can use the application when they’re offline
  2. Speed – cached resources load faster
  3. Reduced server load – the browser will only download updated/changed resources from the server

In my previous article HTML5 Offline Application with Application Cache in ASP.NET MVC, I demonstrated how to create an offline app using HTML5 Application Cache API.

In this article, I will extend the solution developed previously and add the functionality to persist data offline using HTML5 offline storage capability provided by Indexed Database popularly referred to as IndexedDb. You can read the IndexedDB W3C specifications at https://www.w3.org/TR/IndexedDB/

Complete source code for the article can be found on GitHub repo at :

https://github.com/sudipta-chaudhari/IndexedDB_AppCache_ASPNET_MVC5

Open /Product/Index view to access the application

Tools Used : Any text editor for creating and writing HTML and Jquery code. I have used Visual Studio 2017

Technologies Used : HTML5, JQuery

I have created an ASP.NET MVC 5 solution. You can also create a single HTML5 page.

Plugins Used :

  1. JQuery DataTables 1.10.15 – https://datatables.net/download/packages
  2. JQueryUIhttp://jqueryui.com/download/

Key Learnings :

(1) IndexedDB – Create IndexedDB & perform CRUD – Add, Edit , Delete, View operations

(2) JQueryDataTables – Create grid & perform CRUD – Add, Edit , Delete, View operations

(3) JQueryUI – Create modal popup

Solution Description :

In this application, I will implement CRUD (Create, Read, Update, Delete) operations – Add, Edit, Delete, List etc on IndexedDB.

The application’s home page looks as below.

indexeddb_homepage

Add Product popup looks as below:-

IndexedDB_AddProduct

Edit Product popup looks as below:-

IndexedDB_EditProduct

If you go to the browser’s developer tools, I am using Chrome, Developer tools can be opened using shortcut Ctrl + Shift + I, under Storage section, you will see IndexedDB.

IndexedDB_ChromeDeveloperTools

JQuery DataTable is generated from table tag. div tag with id “dialog-form” is used to display the Add/Edit JQueryUI popup.

The below Javascript code is used to initialize the IndexedDB database.

The below function is used to initialize JQuery DataTable and also add the code for Edit and Delete buttons

Note : Edit and Delete button clicks have been identified by adding classes btn-edit and btn-delete.

The initDb() and initGrid() functions are called from window.onload() function as below.

The below function displays all the data from the IndexedDB on the HTML5 page in JQuery DataTable as below.

Function to add new item to the IndexedDB with values from the JQueryUI popup is as below:

Function to edit existing item to the IndexedDB with values from the JQueryUI popup is as below:

Save button code to Add/Edit record in IndexedDB is as below:-

Add route ‘/Product/Index’ to the application manifest file to cache it for it to be available offline. The complete cache manifest file looks as below.

I hope you followed the article. If you have any comments, questions or suggestions, leave a message and I will try to respond at my earliest.


Share this
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  

Leave a Reply