Mobile app development with HTML 5

Introduction

This free tutorial explains the basics of Web app development with
an example Web app.
This tutorial describes the purpose and function of Web apps.
This tutorial explains the advantages of Web Apps or Web games.
This article includes how to make a basic Web App, introduction to a manifest file,
testing Web Apps, and helpful tips.

What is a Web app?

Consider Web apps as part Web page and part stand alone App or application.
A properly constructed Web App runs when the user's mobile phone, tablet, or computer, is not
connected to the Internet.

A Web App is not a native application. That means a Web App often does not take advantage of
hardware specific to the device it runs on. Therefore, a Web App may run slower than an App designed specifically
for Android, or iPhone.

Hybrid Web App development tools exist to create native apps from HTML5 Web Apps.
However a pure HTML5 Web App will most likely be created with HTML markup, JavaScript, and CSS.

As of this writing service workers are recommended instead of Web apps.

Advantages

The ability to play a game or run an app offline can save data connection costs.

Additionally a Web app should run faster than an online Web game. Web games often require downloads
based on user interaction. Web apps download all data needed to run, at once. After the initial
download, everything to run offline will be installed on the device.

Regardless of cell phone coverage
or WiFi connections users play Web App games and other
online content anywhere at anytime. After the initial
download, everything's ready to run.

Download a Web App

It takes three steps to save and use
a Web app offline.
First surf online to the page that contains a Web App.
Second save a bookmark to the Web App.
Third, when you're offline load up the browser and select the bookmark.

This tutorial demonstrates how to create the most basic Web App.
This tutorial shows how to include separate files such as images, a style sheet, and JavaScript.
Most any Web App requires those three file types.

Seven Thunder Software created a sprite sheet animation
that displays a galloping horse.
Photographs for the
Horse Sprite Sheet Graphic
were taken by Eadweard Muybridge.
The sprite sheet itself is fairly simple and not finely finished.

What is a Manifest File?

The manifest file tells the browser which data to save offline,
data to remain online, and what to do if offline resources fail.

How to Make a Manifest File

The manifest must begin with the following line:

CACHE MANIFEST

There are three sections to the manifest file.
They areCACHE:, NETWORK:, and OFFLINE:.
Comments are indicated with #.

CACHE:

CACHE: tells the browser the files to store offline.
Every item required to run your Web App should be listed under CACHE:.

Online information indicates the path to each item under the CACHE: section,
represents the path from the base URL of the domain of the Web App.
Use complete URLs for every
object to cache.

No files under the CACHE: section can download cross domain.
Therefore every file must reside on the same domain as the Web App.
Subdomains are treated the same as domains.
If the Web App is in a subdomain, then all files must reside on the same subdomain as the Web App.
The files don't have to be in the same
directory but they must be located within the same domain or subdomain.

The html tag of the Web page for the Web App should include a reference to
the manifest file. The name of the file for this tutorial is web.appcache.
appcache is the recommended file extension for manifest file names.
The following listing demonstrates declaring a manifest attribute
and value within the html tag of a Web page.

<html manifest="assets/web.appcache">

For Apache server the manifest file has to be sent to the client from the server as the type
text/cache-manifest.
Add the following line to the .htaccess file of the website where the Web App will reside:

AddType text/cache-manifest .appcache

Test the manifest file with one of the online test pages such as the
Cache Manifest Validator.
Testing the manifest seems to be the single fastest method to get a Web App up and running.

NETWORK:

The NETWORK: section lists a set of resources that will not be cached,
and therefore are not required to run the App.
This tutorial doesn't cover the NETWORK: section of a manifest file.

FALLBACK:

The FALLBACK: section indicates what to display when a resource from the Web
fails to load. The entire cache fails if one item
is unavailable.

This tutorial doesn't cover the FALLBACK: section either.
It's unclear if the FALLBACK: section points to a single file
to use when one download fails, or a single file when a multi page cache fails.

Testing

Once a cache is downloaded, remove the cache in order to test a new one.
Use the browser's settings to clear downloaded data.
Unfortunately some browsers didn't always clear the data needed to
test a new Web app.

Some suggestions found online involved simply changing one character within the manifest file.
Ideally changing one character indicates to the browser
that the manifest file has changed, and causes the browser to download everything fresh.

However that method didn't always work.
Perhaps there were other issues with the manifest file that were not related.
Perhaps the browsers and devices used for testing wouldn't accept that particular
method.

Renaming the app cache file works everytime. But it's a little time consuming.
The HTML tag must change. Then copy the new manifest file and updated
Web page to the server.

Tips

Save the most time when creating the manifest file.
Be careful to reference needed files correctly.
If any required item
listed under CACHE: is not available for download,
the Web App fails to work offline.

Usually clearing the browser data removes downloaded Web app data as well.
If the app's important it might help the user to know in advance what
happens when the browser data's removed.
Revisiting the Web page online automatically installs the
Web app again.

This tutorial is just a simple introduction to Web App programming.
There are many more aspects to creating Web Apps. Entire books have been
written about Web App implementation.

Libraries have been created to wrap Web Apps in a user interface,
rather than the browser interface. That allows a customizable look
and feel for various devices. When the Web App is loaded,
it looks like an App rather than a Web browser.

Summary

This free tutorial explained the basics of Web app development with
an example Web app.
This tutorial described the purpose and function of Web apps.
This tutorial explained the advantages of Web Apps or Web games.
This article included how to make a basic Web App, introduction to a manifest file,
testing Web Apps, and helpful tips.