Web App Basics Tutorial

Mobile app development with HTML 5

Web App Example Introduction What is a Web App? Web App Advantages What is a Manifest File How to Make a Manifest File Tips Summary Horse Sprite Sheet Graphic Source Code Page

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.

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:

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.

The mainfest for the Web App Example includes the horse sprite sheet, graphical buttons, a JavaScript file, a style sheet, and the banner graphic. View the Manifest File for the Web App for more details.

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.

JavaScript throws exceptions specifically related to Web Apps. Catching exceptions and handling them gracefully can provide a smoother user experience.

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.

Sprite Sheet Animation
Copyright © 2015 Seven Thunder Software. All Rights Reserved.