Offline proxies will be removed in Webix 7.0, use Service Workers instead.
Offline support allows storing server-side data locally in your browser cache, which helps you proceed working with data components after refresh even if connection to the server fails.
For Webix components offline support can implemented in three modes:
In all these modes Webix caches the data to browser local storage via webix.storage.local interface. See the description of caching logic.
The implementation is provided by Webix offline and cache proxy objects that are described separately.
The offline mode ensures that server-side data is stored in a browser local storage upon loading. Later on the component first 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).
To enable this, enable the offline proxy for loading and saving scripts by prefixing the url with its name:
{
view:"datatable",
id:"datatable1",
save: "offline->server/datatable.php",
url: "offline->server/datatable.php"
}
Related sample: Datatable: Offline Mode
If you load data after the component initialization, you can either use a prefix notation or provide the proxy explicitely for the load function together with the loading script:
// 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"));
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.
To enable this, enable the cache proxy for loading and saving scripts by prefixing the url with its name:
{
view:"datatable",
id:"datatable1",
save: "cache->server/datatable.php",
url: "cache->server/datatable.php"
}
Related sample: Datatable: Cache Mode
If you load data after the component initialization, you can either use a prefix notation or provide the proxy explicitely for the load function together with the loading script:
// 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"));
If you want to work with localStorage objects only, you can load data from them by providing their names to the cache proxy.
Note that the objects should be named accoring to {name}_$proxy$_data pattern:
{
view:"datatable",
id:"datatable1",
// data will be retrieved from "mydata_$proxy$_data" localStorage object
url: "cache->mydata",
save: "cache->mydata"
}
Both of offline and cache proxy objects offer API for working with currently cached data. Methods are applied to the component's url:
$$("datatable1").config.url.setCache();
You can manually set the data that will be parsed to the component if the initial loading fails due to the connection loss.
Firstly, you should initialize cache proxy with a server script for loading the initial data:
var static_proxy = webix.proxy("cache", "server/datatable.php");
This object will be used for data loading (url) and saving (save):
var grid = {
view:"datatable",
..config..
save: static_proxy,
url: static_proxy
};
Then you can cache the necessary data via the setCache() method. If the initial loading fails, this data will be parsed to the component.
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