Web App Basics Tutorial
Mobile app development with HTML 5
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.
As of this writing service workers are recommended instead of Web apps.
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.
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.
For the basics of sprite sheet creation see the Beginner's Guide to Sprite Sheets.
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:
There are three sections to the manifest file.
CACHE:, NETWORK:, and
Comments are indicated with
CACHE: tells the browser the files to store offline.
Every item required to run your Web App should be listed under
Online information indicates the path to each item under the
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
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.
For Apache server the manifest file has to be sent to the client from the server as the type
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: 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: section indicates what to display when a resource from the Web
fails to load. The entire cache fails if one item
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.
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.
Save the most time when creating the manifest file.
Be careful to reference needed files correctly.
If any required item
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.
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.