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:

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.