Creating Offline Web Application Using HTML5, AngularJS, IndexedDB And SharePoint 2013

• Online Data: When the application is online the data will be stored in SharePoint 2013 lists.
• Offline Data: IndexedDB has been used to store data which will be rendered in the HTML5 pages.
• Offline Pages: HTML5 pages and all the supporting js files (AngularJS) and image files will be cached using HTML5 AppCache.

Business logic : AngularJS has been used as the underlying JS.

The following six steps have been followed to build this sample application

Step 1: Data in online mode will be stored in SharePoint list. For inserting data into a SharePoint list and retrieving data from SharePoint lists we will be using REST API.

Step 2: In this step we will identify an appropriate logic to when the data from online SharePoint lists need to be synced to the offline IndexedDB object stores (tables). As soon as an user lands on the default page of the application an offline to online sync process gets triggered which synchronizes all the necessary data (needed to be rendered in offline) from online SharePoint list to offline IndexedDB object stores.

Step 3: What does the sync process mentioned in Step two mean… the following code snippet for online to offline sync would explain that…

As you can see in the below code snippet firstly the offline DB which is supposed to hold data for offline mode is created.

The following code snippet retrieves the data from SharePoint list and inserts into IndexedDB objectstore

Just to summarize on what we have done till now:

Step 4: Now we have the data which will be rendered offline, let's concentrate on getting the HTML5 pages and supporting AngularJS files which are needed for the application to work in offline mode and for this we need to implement HTML5 App cache.

Important step to prepare the Appcache file and make sure it is referenced in the landing html5 page as shown below:

Sample Appcache manifest file shown below:

Step 5: Now we have both the data and HTML5/JS/Images which needs to be rendered in offline mode. Next question is how would we detect if the user is online or offline and for this we use the following code snippet.