Creating Offline Mobile Web Apps with the Application Cache

For app developers, building applications that can tolerate low or no connectivity is a must in the mobile enterprise industry. Alpha Anywhere offers robust, built-in offline mobile app capabilities. Building apps that work offline is easily achieved through use of Lists and mobile optimized form tools designed for creating light-weight, responsive applications.

Mobile Alpha Anywhere apps are compiled using PhoneGap Build and distributed via a private or public app store. However, if the only requirement for your mobile app is offline access, you may be tempted to build a mobile web app with offline capabilities and forego using PhoneGap.

Since both mobile and web apps can be built using UX Components, you might assume a web app will work offline if it uses Lists that persist data to local storage. Not exactly. Persisting data to local storage doesn’t necessarily guarantee that your web app will be accessible in a disconnected environment. This is because files needed for the web application to run – such as Javascript, images, or web fonts – were not cached by the web browser when the app was first accessed.

To address the issue of providing offline support in a web app, a new feature has been added to Alpha Anywhere that allows developers to take advantage of an HTML5 feature that addresses the offline problem: the Application Cache.

What is the Application Cache?

The Application Cache, or AppCache, is an HTML5 feature that lets you create offline web applications. The AppCache is a repository of files required to launch a web app in disconnected environment. The required files are defined by an AppCache manifest. The manifest contains a list of files needed by your web application (e.g. external Javascript, style sheets, images, etc.)

The first time a web app is visited or when a mobile user saves the app to their home screen, all files listed in the AppCache manifest are downloaded to the device. On subsequent launches, the files are loaded directly from the AppCache. No requests are made to the server until the AppCache manifest changes (and only when there is an available Internet connection.)

Since files are loaded from the AppCache first, your web application can be accessed even if the user doesn’t have a network connection. As an added bonus, your web app will also load faster after the initial download because files are loaded locally, not from a server.

Configuring Your App to Use AppCache

Mobile web applications that use the AppCache are created using the UX Component. The new Application Cache properties allow you to enable and configure the AppCache for a UX Component. When you save the UX Component, a static HTML page is generated for you along with the AppCache manifest. The static HTML page contains the pre-rendered UX Component and the AppCache manifest. It is also the page your users must visit and save to the home screen on their mobile devices.

To learn more about how to configure the Application Cache for a mobile web application, check out the videos below:

Building Offline HTML5 Applications – Part 1

Building Offline HTML5 Applications – Part 2