Making an Offline Web App: From Start to Finish, updated 9/21/2012


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. Continue reading