Offline Mode

While regular Vaadin TouchKit applications are server-side applications, TouchKit allows a special offline mode, which is a client-side Vaadin UI that is switched to automatically when the network connection is not available. The offline UI is included in the widget set of the regular server-side UI and stored in the browser cache. By providing a special cache manifest, the browser caches the page so strongly that it persists even after browser restart, effectively making it an offline application.

Offline Mode in the Parking Demo

During offline operation, the offline UI can store data in the HTML5 local storage of the mobile browser and then passed to the server-side application when the connection is again available.

The offline mode is enabled in the project stub created by the Maven archetype (see "Using the Maven Archetype"), with stubs for the offline data storage and server RPC classes.

See the Parking demo and its source code for complete examples of the offline mode.

Enabling the Cache Manifest

HTML5 supports a cache manifest, which makes offline web applications possible. It controls how different resources are cached. The manifest is generated by TouchKit, but you need to enable it in the TouchKit settings. To do so, you need to define a custom servlet, as described in "The Servlet Class", and call setCacheManifestEnabled(true) for the cache settings, as follows:

TouchKitSettings s = getTouchKitSettings();
...
s.getApplicationCacheSettings()
 .setCacheManifestEnabled(true);

You also need to define a MIME type for the manifest in the web.xml deployment descriptor as follows:

<mime-mapping>
	<extension>manifest</extension>
	<mime-type>text/cache-manifest</mime-type>
</mime-mapping>

Offline Mode is enabled by default.

Disabling Offline Mode

Offline Mode can be disabled adding the @OfflineModeEnabled(false) annotation to the UI class. When offline mode is disabled Vaadin Framework default reconnect dialog will be used if connection is lost.

Configuring Offline Mode

Additional configuration can be defined adding the OfflineMode extension to the UI.

public class OfflineTest extends UI {

    @Override
    protected void init(VaadinRequest request) {
        OfflineMode offlineMode = new OfflineMode();
        // Maintain the session when the browser app closes
        offlineMode.setPersistentSessionCookie(true);

        // Define the timeout in secs to wait when a server
        // request is sent before falling back to offline mode
        offlineMode.setOfflineModeTimeout(15);
        offlineMode.extend(this);

        buildUi();
    }

    ...

}

You can extend the OfflineMode extension to transfer data conveniently from the offline UI to the server-side, as described in Sending Data to Server.

The Offline User Interface

An offline mode is built like any other client-side module, as described in "Client-Side Vaadin Development". You can use any GWT, Vaadin, add-on, and also TouchKit widgets in the offline user interface.

Most typically, a client-side application builds a simplified UI for data browsing and entry. It stores the data in the HTML5 local storage. It watches if the server connection is restored, and if it is, it sends any collected data to the server and suggests to return to the online mode.

The Parking Demo provides an example implementation of an offline mode user interface. The Ticket view is implemented as a fat client-side widget, where the server-side view only communicates the state to the widget.

Sending Data to Server

Once the connection is available, the offline UI can send any collected data to the server-side. You can send the data from the offline UI, for example, by making a server RPC call to a server-side UI extension, as described in "RPC Calls Between Client- and Server-Side".

The Offline Theme

Normally, client-side modules have their own stylesheets in the public folder that is compiled into the client-side target, as described in "Styling a Widget" and "Specifying a Stylesheet". However, you may want to have the offline mode have the same visual style as the online mode. To use the same theme as the server-side application, you need to define the theme path in the widget set definition file as follows.

<set-configuration-property
    name='touchkit.manifestlinker.additionalCacheRoot'
    value='src/main/webapp/VAADIN/themes/mytheme:../../../VAADIN/themes/mytheme />

You need to follow a CSS style structure required by the Vaadin theme in your offline application. If you use any Vaadin widgets, as described in "Vaadin Widgets", they will use the Vaadin theme.