Here are the steps I followed to create my first successful web app
Create the app files first
1) Create a web app with HTML, CSS, and JS that will support HTML5 specs, and put all the files in their various folders. Make sure all is working in the browser. Ideally, one should use a Jquery-type html page where all pages and content are linked to just one html page, not multiple html pages. That way, when the one page is loaded in the mobile brower, all resources are cached at once and will be available for offline use immediately. Otherwise, one would have to navigate through every page to cache all the resources.
Put all folders in a central folder named just for that app, such as /widget_appname/ if your app is about a widget.
2) In your index.html page, make your <title> the name you want under the web app icon on the home screen, up to 11 characters.
3) Make a “file not found” notice and name it “offline.html” with perhaps a way for the visitor to email you of this problem.
Create the cache manifest file
1) Create a cache manifest (“application cache”) file called “app_name.manifest” to the same folder as index.html with the following content between the dashed lines below. (Do not include the dashed lines.) Relative URLs are relative to the cache manifest file. Name the file according to the app name, then a period, then manifest, like this: “widget.manifest”. Open every single web page in your project and list every single page and image on each page, as well as their folder location.
Some web sites tell you to end the file in “appcache,” not “manifest.” Perhaps appcache will work, but I’m leaning toward manifest. Why? Because when it ends in manifest, a recognizable icon appears in my Windows folder; not so with appcache.
Here’s a sample content for a manifest file:
# Need to change contents of this page to let user know of updated content.
# Version: 1.0, 4-2-2012
# files to be cached on the device go here.
# Can also specify absolute URLs.
# if resource is inaccessible, then use this .html file to give notice.
# if any folders before the / are inaccessible, then the file to the right is served.
# Resources that require online access, like login.php page.
The above files will get cached locally as they are fetched. Do not put the cache file name in the list, otherwise it will be nearly impossible to inform the browser that a new manifest is available.
2) Replace top of the index.html page with the following lines. (Change “app_name.manifest” to the file name you created above.)
<html manifest=” app_name.manifest”>
3) If the app will be updated periodically, you’ll need to change the app manifest file so the app will detect a change. Changing the version number in the app manifest file will take care of that requirement. Just uploading your files to the server is not enough.
Change permissions on server
1) We need to change permissions on the server. Let the admin know that “the manifest file must be served with the mime type text/cache-manifest” and he’ll know what to do. Otherwise, create a text file with the following text …
AddType text/cache-manifest .manifest
… and name the file “.htaccess” Put it in the same directory or folder as the web app’s index.html file.
If you use Window’s Notepad to make this file, you might need to take an extra step before it will allow you to name a file with a period at the beginning. From File, click on Save As, then type .htaccess in the “File name:” box, then click on the down arrow to the right of “Save as type:” and choose “All Files.” The file will now save with your chosen file name.
Create icon artwork and their links
1) We can supply a 57x57px PNG-format icon that appears on the iPhone screen. (Apple calls this linking by icon to a web app a “WebClip.”) If you don’t create an icon, then the device will grab a small snapshot of the web page and use that for the icon instead — crummy. Add the icon to the root folder of the web page with the name of one of the following (the system automatically searches for files with these names):
Use the “precomposed” name if you are adding your own rounded corners (against a transparent packground) and top highlight to the icon, or if you don’t want the iPhone to make any changes to your icon. Use the second line if you want the iPhone to add the rounded corners and top highlight automatically. Remember that your icon will be seen against any color background on the user’s device, depending on the wallpaper they’ve chosen. (From the online Safari Web Content Guide in Apple’s site.)
2) Between the <head> tags of the web page we put either of the following in order to make the image show up on the home screen of the iPhone. The second version will not add any iPhone rounding or shading effects to the icon.
<link rel=”apple-touch-icon” href=”apple-touch-icon-57×57.png”>
<link rel=”apple-touch-icon-precomposed” href=”apple-touch-icon-57×57-precomposed.png”>
If we wish, we can add multiple versions of the icons with the “sizes” attribute. The 114x114px size is for earlier iPads while the 144×144 size is for high-resolution iPads.
<link rel=”apple-touch-icon” href=” pics/apple-touch-icon-57×57.png”>
<link rel=”apple-touch-icon” sizes=”72×72″ href=”pics/apple-touch-icon-72×72.png”>
<link rel=”apple-touch-icon” sizes=”114×114″ href=” pics/apple-touch-icon-114×114.png”>
<link rel=”apple-touch-icon” sizes=”144×144″ href=” pics/apple-touch-icon-144×144.png”>
One can display a startup image too, with a 320×480 PNG file in the root folder with the following code.
<link rel=”apple-touch-startup-image” href=” pics/startup.png”>
3) As of Sept. 2012, we can specify the app name under the icon with the following syntax:
<meta name="apple-mobile-web-app-title" content="My App Name">
Test files on server
1) Now upload all the files to the server (don’t test on the desktop!).
2) With your device’s browser, navigate to the index.html file. (To cut down on the amount of typing, I first went to the home page of the app in the desktop browser, then used http://bit.ly to shorten the URL, customizing it. That’s the short URL I type into the mobile browser. Mine is bit.ly/sc10gtwebapp. If you put this shortlink in your print advertising, your mobile visitors will appreciate it! Although, nowadays we are using QR codes for that.)
3) Tap the middle icon on the bottom to save to the home screen. It may take a moment for your chosen WebClip icon to appear. Your <title> content should appear at right in the iPhone for editing.
4) Here are questions to answer as you test:
a) If you provided a startup image, did it appear? If not, perhaps your home page was too light and the index.html page started right up. Check the link on the index.html page, the manifest, and the server.
b) When you saved to the home screen, did the icon file show up? If not, check the link on the index.html page, the manifest, and the server.
c) When you navigated to all pages, did all the pages display correctly?
d) The contents are cached as they are fetched, so go to EVERY page in your app to test. The second time you navigate your app, it should be faster, since the images are cached on your device.
e) Turn off your app and turn on airplane mode (which disables Internet access). Now try your app again. Can you access all your pages with all its content, such as images? If not, perhaps you have not listed every resource in the manifest, or you failed to load that page earlier in step d.
f) Sometimes I get the message that Safari can’t access the page because it’s in airplane mode and wants me to fix that, so I can’t go further. It’s confusing when that happens.
Here are the links I’ve followed when learning to make a web app. The above is a distillation of information I got from these links. There are more sophisticated features to implement, such as providing testing code to view on a console.
http://www.html5rocks.com/en/tutorials/appcache/beginner/ (Includes JS script for checking for updates)
http://hacks.mozilla.org/2010/01/offline-web-applications/ (syncing data with a server online)