View source | Discuss this page | Page history | Printable version   

How to Implement Offline Mobile Applications



This article explains how to build offline ready Mobile applications.


AppCache is a mechanism introduced in HTML5 that allows to cache resources in the browser so they can be used in case there is no conection to the server (aka offline). The resources willing to be cached need to be declared in a Cache Manifest, which is just a list of these resources.

AppCache is called in the index.html throughout the AppCacheManifest component, as its shown below:

<html xmlns="" manifest="../../org.openbravo.client.kernel/OBPOS_Main/AppCacheManifest">

The AppCacheManifest component is defined in the ComponentProvider:

public class OBPOSComponentProvider extends BaseComponentProvider {
  public static final String QUALIFIER = "OBPOS_Main";
  public Component getComponent(String componentId, Map<String, Object> parameters) {
    if (componentId.equals(MobileCoreConstants.APP_CACHE_COMPONENT)) {
      final ApplicationCacheComponent component = getComponent(ApplicationCacheComponent.class);
      return component;
    throw new IllegalArgumentException("Component id " + componentId + " not supported.");

Finally, all resources to be cached, are defined:

public class ApplicationCacheComponent extends MobileCoreApplicationCacheComponent {
  private static final String PATH_PREFIX = "web/";
  public List<String> getAppList() {
    List<String> resources = new ArrayList<String>();
    // Boot code
    // ...
    return resources;
  public List<String> getImageFileList() {
    // ...
    return images
  public List<String> getcssFileList() {
    // ...
    return css

The resources to be cached must include all the images, css and urls that want to be used offline.

Offline flows

There are 3 main flows for offline operations.

Bulbgraph.png   Be aware that the user will lose all offline data if the browser cache is cleared

Offline Log In

User can login offline if he/she has login at least once while there was connection. When user does login online, its credentials are persisted encrypted in browser, allowing this user to do future offline logins.

Offline Operations -> Go Online

Happens when the session goes offline and later on, in the same session, the connection is restored and the session goes online again.

To support this scenario, while the session is offline, all operations should be stored in the local database. When the session goes online, the returnToOnline event is triggered and the operations can be flushed to the server. This event can be captured overwriting returnToOnline in OB.UI.Terminal kind. You must add the necessary logic to perform the synchronization once the terminal is back to online.

  kind: 'OB.UI.Terminal',
  name: 'MYMOD.MyTerminalView',
  returnToOnline: function () {
    // perform your back-to-online operations here

Offline Operations -> Log out -> Online Log In

A variant of the previous scenario happens when the session log out is done while in offline mode. In this case, synchronization should be done on the next online log in.

You can place the necessary logic in the renderMain method of the terminal model. This method is executed just after login.

Bulbgraph.png   Incognito mode will not support this feature

Retrieved from ""

This page has been accessed 3,765 times. This page was last modified on 23 April 2013, at 16:31. Content is available under Creative Commons Attribution-ShareAlike 2.5 Spain License.