How to Implement Offline Mobile Applications
Contents |
Introduction
This article explains how to build offline ready Mobile applications.
AppCache
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="http://www.w3.org/1999/xhtml" manifest="../../org.openbravo.client.kernel/OBPOS_Main/AppCacheManifest">
The AppCacheManifest component is defined in the ComponentProvider:
@ApplicationScoped @ComponentProvider.Qualifier(OBPOSComponentProvider.QUALIFIER) public class OBPOSComponentProvider extends BaseComponentProvider { public static final String QUALIFIER = "OBPOS_Main"; @Override public Component getComponent(String componentId, Map<String, Object> parameters) { if (componentId.equals(MobileCoreConstants.APP_CACHE_COMPONENT)) { final ApplicationCacheComponent component = getComponent(ApplicationCacheComponent.class); component.setId(componentId); component.setParameters(parameters); return component; } throw new IllegalArgumentException("Component id " + componentId + " not supported."); } }
Finally, all resources to be cached, are defined:
@RequestScoped public class ApplicationCacheComponent extends MobileCoreApplicationCacheComponent { private static final String PATH_PREFIX = "web/"; @Override public List<String> getAppList() { List<String> resources = new ArrayList<String>(); // Boot code resources .add("../../org.openbravo.client.kernel/OBMOBC_Main/ClientModel?entity=FinancialMgmtTaxRate&modelName=TaxRate&source=org.openbravo.retail.posterminal.master.TaxRate"); resources .add("../../org.openbravo.client.kernel/OBMOBC_Main/ClientModel?entity=PricingProductPrice&modelName=ProductPrice&source=org.openbravo.retail.posterminal.master.ProductPrice"); // ... return resources; } @Override public List<String> getImageFileList() { // ... return images } @Override 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.
 | 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.
enyo.kind({ 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.
| | Incognito mode will not support this feature |