Intermediate

Offline Support

Offline support allows storing server-side data locally in your browser cache, which helps you go on working with data components after refresh, even if connection to the server fails.

Saving the whole page via Cache Manifest

Files subject to caching, should be listed in a cache manifest, a typical HTML5 feature which allows differentiating between files available in the offline mode and those available when you are connected.

Firstly, the manifest is included into each web page you'd like to cache.

<!DOCTYPE html>
<html manifest="app.appcache">

Secondly, the details of the manifest are specified in the app.appcache file. As a rule, the following files should be cached:

offline_app.html // each application file itself, 
 
../../../codebase/webix.js // library files
../../../codebase/webix.css
 
data/data.json // data-loading file

Offline Support for Webix Component Data

Offline support is implemented via three load and save modes:

  • offline and cache, both working with server-side data that is additionally stored locally;
  • local that works with local storage data only.

Offline Mode

The offline mode ensures that server-side data will be stored locally in a browser, and later on the component will always try to reach server to get or save data. BUT in case of failure, the data will be loaded from the cache and stored in the cache, accordingly.

When you are connected again, all the changed data should be derived from the cache and sent to the server (otherwise on next page refresh it will be replaced by outdated server-side data).

Webix works with cache through its webix.storage.local interface. See the description of caching logic.

To enable this, use the offline prefix before loading and saving scripts:

{
    view:"datatable",
    id:"datatable1",
    ..config..
    save: "offline->server/datatable.php",
    url: "offline->server/datatable.php"
}

Related sample:  Datatable: Offline mode

Otherwise, if you load data after the component initialization, pass this prefix (offline or cache) to the load function together with the load script itself:

// the two methods are equal
$$("datatable1").load(offline->server/datatable_load.php);
$$("datatable1").load(webix.proxy("offline", "server/datatable_load.php"));
 
// or, if you want to load data in the POST request:
$$("datatable1").load( webix.proxy("offline", "post->url.php"));

In essence, the prefix signifies integration with a dedicated proxy object that contains all the logic of offline storage. Proxy objects are described separately.

Cache Mode

When you enter the cache mode, data is first loaded to the component and put to the browser local storage, and then you work ONLY with this cached data: it's loaded from cache and stored to it without trying to connect to the server.

Webix works with cache through its webix.storage.local interface. See the description of caching logic.

To enable this, use the cache prefix before loading and saving scripts:

{
    view:"datatable",
    id:"datatable1",
    ..config..
    save: "cache->server/datatable.php",
    url: "cache->server/datatable.php"
}

Related sample:  Datatable: Cache mode

Otherwise, if you load data after the component initialization, pass this prefix (offline or cache) to the load function together with the load script itself:

// the two methods are equal
$$("datatable1").load(cache->server/datatable_load.php);
$$("datatable1").load(webix.proxy("cache", "server/datatable_load.php"));
 
// or, if you want to load data in the POST request:
$$("datatable1").load( webix.proxy("cache", "post->url.php"));

In essence, the prefix signifies integration with a dedicated proxy object that contains all the logic of an offline storage. Proxy objects are described separately.

Local Mode

When you work in the local mode, your component deals with local storage objects only. You can load data from the local storage and save it there without any server-side part.

Webix works with cache through its webix.storage.local interface. See the description of caching logic.

In the local mode, you should provide names of localStorage objects instead of URLs:

{
    view:"datatable",
    id:"datatable1",
    ..config..
    save: "cache->mydata",
    url: "cache->mydata"
}

Neither the offline, nor the cache modes allows accessing localStorage objects, but the local mode makes it possible.

Working with Cached Data

Both of these proxy objects, offline and cache, offer API for working with currently cached data. Methods are applied to the component's url property object:

$$("datatable1").config.url.someMethod();
  • clearCache() - to remove cached data of this component;
  • setCache(data) - pushes any data to cache. Data should be passed as a JSON object or JSON string;
  • saveAll() - serializes the current component data and pushes it to cache;
  • getCache - gets the latest copy of cached data for this component in the form of a JSON object. It can be used to populate the component with the help of the parse method.

Setting Static Cache

In addition, you can manually set the data for the component's cache. Here you manipulate Webix proxy objects.

Firstly, you should create cache proxy object. It includes a server script for data loading:

var static_proxy = webix.proxy("cache", "server/datatable.php");

This object should be used for data loading (url) and saving (save):

var grid = {
    view:"datatable",
    ..config..
    save: static_proxy,
    url: static_proxy
};

Then you set the necessary data to this object via the setCache() method:

if (!static_proxy.getCache())
    static_proxy.setCache([
        {"id":1,"title":"The Shawshank Redemption ", 
            "year":"1998","votes":194865,"rating":"7.5","rank":1},
        {"id":2,"title":"The Godfather",
            "year":"1974","votes":511495,"rating":"9.2","rank":2}
    ]);

Related sample:  Datatable: Cache static mode

Proxy objects are described in detail in the corresponding article.

Back to top