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

In this post I will be discussing some of the important steps (with code samples) for building an application which works both online (with the internet) and offline (without the internet).

Before proceeding any further let's understand the technologies used and their role.

• 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 1: SharePoint list holds the data which is rendered in the HTML5 page when the user is in online mode,
Step 2: Synchronization logic which would automatically sync the data from SharePoint list to IndexedDB object stores(tables), and
Step 3: Code snippet which is part of the synchronization logic which creates IndexedDB database and syncs the data from SharePointList to IndexedDB object store(table).

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.

this.isBrowserOnline = function () {

   var condition = navigator.onLine;
   return condition;

};

Step 6: The next most important step is to render the data in offline mode and for this we need to retrieve the data which has been stored in offline IndexedDB objectstore (table) and for this operation we use the following code snippet:

As the code snippets above are straightforward and if you still need any clarification don’t forget to drop a query. If you have followed the steps mentioned above and have an understanding of the code above you will be in better position to start building your first offline application.

Kindly leave your comments or any queries below.

References

• IndexedDB
• angularjs.org
• REST API reference and samples

Refer more articles on SharePoint:

• Sleek Way Of Developing Fully Immersive SharePoint Pages
• Sharepoint 2013: Display User Login Name As Notification Dialog Box