Alpha Software Blog

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

Also reivew our related post "Offline Mobile Forms."
Prev Post Image
Report Names Alpha Anywhere a Top Enterprise App Development Platform
Next Post Image
Gartner insights into Building mobile Apps - Mobile Optimized Forms

About Author

Sarah Mitchell
Sarah Mitchell

Technical Writer and Documentation Expert at Alpha Software

Related Posts
Top Security Concerns for Low-code and No-code Development
Top Security Concerns for Low-code and No-code Development
Manufacturing Data Collection Systems: Manufacturing Efficiency and Productivity In The Fourth Industrial Revolution
Manufacturing Data Collection Systems: Manufacturing Efficiency and Productivity In The Fourth Industrial Revolution
New Webinar: How to Integrate ChatGPT with Alpha Anywhere
New Webinar: How to Integrate ChatGPT with Alpha Anywhere

The Alpha platform is the only unified mobile and web app development and deployment environment with distinct “no-code” and “low-code” components. Using the Alpha TransForm no-code product, business users and developers can take full advantage of all the capabilities of the smartphone to turn any form into a mobile app in minutes, and power users can add advanced app functionality with Alpha TransForm's built-in programming language. IT developers can use the Alpha Anywhere low-code environment to develop complex web or mobile business apps from scratch, integrate data with existing systems of record and workflows (including data collected via Alpha TransForm), and add additional security or authentication requirements to protect corporate data.