In this article we want to tell you how to make an application be accessible offline and don't depend on the state of the network.
Generally, to make an app work in the offline mode you should use the dhx.proxy component. The component allows you to send web requests via HTTP proxy and store the latest successful data files and unsuccessful web requests locally.
Each time data needs loading, the app passes a request to the server via proxy-server. If the server is available - data is loaded from it and cached as the latest copy. If the server is unavailable - data is loaded from the local storage.
Note that the local storage contains data just if the app was run with available connection to the Internet at least once.
When a user makes a request for update, it (the request) is passed to the server via proxy-server. If the request is satisfied - it updates the latest copy. If the request isn't satisfied - it's cached in the local storage.
Each time a user makes a request, dhx.proxy checks presence of unsuccessful requests in the local storage. If there are any kept - they are passed to the server.
As soon as an unsuccessful request is satisfied - it updates the latest copy and is removed from the local storage.
To cache not only the entered data, but also the application resources (js, css files, images etc.) you may use dhx.proxy together with the ApplicationCache interface (HTML5 feature).
dhx.proxy is an easy-to-use component.
To start use it:
var source = new dhx.proxy({
url: "../data/events_mobile.php",
storage: dhx.storage.session
});
dhx.ready(function(){
dhx.ui.fullScreen();
dhx.ui({
view: "scheduler",
id: "scheduler",
save: source
});
$$("scheduler").load(source, "json");
});
Related sample: samples/03_offilne/01_offline.html
dhx.proxy can be initialized in the following way:
var source = new dhx.proxy({
url: "./data.php",
storage: dhx.storage.session
});
The constructor takes 2 parameters: