Making apps work offline

Making apps work offline

This tutorial walks you through using the dhx.proxy component to make your app work offline. It won't cover how to build a standard DHTMLX app but specificates how to optimize such an app to run offline (when a network is unavailable).

Before you begin

To start this tutorial you must have a complete running DHTMLX app.
Let's assume it's a grid integrated with server-side, i.e. loads data from DB and saves changes back.

Shortly, the code of this app can look like this:

<script>
        mygrid = new dhtmlXGridObject('gridbox');
	mygrid.setImagePath("../../../dhtmlxGrid/codebase/imgs/");
	mygrid.setHeader("Sales,Book Title,Author,Price");
	mygrid.setColTypes("ed,ed,ed,ed");
	mygrid.init();
	mygrid.load("data.php");
 
	myDataProcessor = new dataProcessor("data.php");
	myDataProcessor.init(mygrid);
</script>

dhx.proxy

So, you have an application and want it to be accessible offline. A means which will help you to implement this is dhx.proxy. What's is it? It's a DHTMLX library allowing you to send web requests via the proxy object and store the latest successful data files and unsuccessful web requests locally. In practice, it's a pretty easy-to-use component and you can prove it.

To make some app access data offline you must do 3 steps:

Include the required dhx.proxy code files;
Initialize dhx.proxy;
Specify the dhx.proxy instance in the load() method of all components that load data from server. This forces all requests related to these components (loading, updating) be passed through the proxy object and saved if they are terminated unsuccessfully. Note, if you are using dataProcessor, it must be initialized with the dhx.proxy instance in the constructor.

Step 1. Included files

To start work with dhx.proxy, 2 additional files must be included. They are:

proxy.js
offline.js

<script  src="codebase/offline.js"></script>
<script  src="codebase/proxy.js"></script>

Step 2. Initialization

The dhx.proxy constructor has only 2 parameters:

url - (string) the datafeed url. If you use dhtmlxConnector, the path to its file can be set as this parameter.
storage - (dhx.storage.local, dhx.storage.session, dhx.storage.cookie) specifies the data storage type. It's an optional parameter. The default value - dhx.storage.local.

var source = new dhx.proxy({
	  url: "data/proxy.php",// the datafeed url
	  storage: dhx.storage.cookie// the data storage type
});

Step 3. Integration with components that load data from server

In our example, we have 2 components that must be integrated with dhx.proxy:

a grid that takes data from server;
dataProcessor.

<script>
        var source = new dhx.proxy({...});
        ...
	mygrid.load(source);
 
	myDataProcessor = new dataProcessor(source);
	myDataProcessor.init(mygrid);
</script>

The cache manifest file

dhx.proxy answers for caching the entered data. That's enough but only if users don't refresh the page while the app is offline. If the page is refreshed, the application resources such as js, css files, images won't be available.

HTML5 solves this problems by providing the ApplicationCache interface which allows developers to list the resources that the browser should cache for offline access.

Combined use of dhx.proxy and the ApplicationCache interface ensures correct running under any circumstances.

Step 4. Include the cache manifest file

To enable the application cache for your app, include the manifest attribute on the document's html tag:

<html manifest="manifest.appcache">
..
</html>

Note, the manifest attribute must be included on every page of your app that should be cached. In our case, the cache manifest file will look like this:

CACHE MANIFEST
# version 15
CACHE:
codebase/dhtmlx.css
codebase/connector.js
codebase/dhtmlx.js
codebase/imgs/sort_desc.gif
codebase/imgs/sort_asc.gif
codebase/imgs/sky_blue_grid.gif
codebase/imgs/sky_blue_sel.png
codebase/imgs/item_chk1.gif
codebase/imgs/item_chk0.gif
codebase/offline.js
codebase/proxy.js

NETWORK:
data/proxy.php

Important!

The mentioned functionality needs HTML5 to be implemented. Beware, some browsers (e.g. IE) don't support this version of HTML.
The ApplicationCache interface needs data to be loaded in the JSON format (the default one). With the other available formats it won't work.

What's else

Congratulations! You’ve optimized your app and don't depend on the state of the network anymore.

What can we offer you else?

Firstly, see the complete code of the mentioned above example - 'Offline storage tutorial'.
Secondly, read this article to explore dhx.proxy deeply - 'dhx.proxy:offline storage'.