You can download the source file here.
To see the demo of the working app (works best on iPhone or iPad) click here If you are not connected to the internet, you won’t be able to view this… yet. Once we are done, you will be able to view it on any browser that supports caching, whether you are connected to the web or not.
Moving On
The key to making a WebApp work offline is the head tag for caching a manifest file.
For more information on the requirements for a cache manifest file you can click here. Safari has an extensive support library, but it can be difficult to follow at times, and (for me anyway), reads like a tax manual. You can also look through some of the other tutorials posted on this page. I have included the cache manifest and its contents in this post.
The cache manifest tag can be found in the source code for this app in the index.html file just before the “head” section and looks like this:
<html manifest="match.manifest">
This tag calls for the manifest file:
“match.manifest”
… which is my manifest file. For your manifest file, you can name it anything i.e (example.manifest) etc. Just make sure your call tag points to it correctly.
Inside of the manifest file are directions for the browser to cache these files on the device… An example from the source above looks like this:
CACHE MANIFEST (this is the head of the manifest file and must be first and spelled exactly as is case sensitive)
CACHE: (this is an optional head tag, but I read a few tutorials that said it was good to use)
(notice that these files are one item per line? This is the only way that it will work… one item per line, no commas etc.)
NETWORK:\n*\n (this is a catch-all statement for anything not explicit in the “CACHE:” section.)
The first thing to notice is the structure … it must be one item per line, no commas, etc…
Second is notice the “all-caps” head tags i.e (CACHE: NETWORK: ).
There are numerous tags that can be used, and here are a couple of tutorials that show these tags and their functions:
- http://www.w3.org/TR/html5/offline.html
- https://developer.mozilla.org/en/Offline_resources_in_Firefox
Using the NETWORK: tag in your manifest file will allow you to exclude some files from caching, and use them only when online. They will not cache and will not work offline, but will connect when online. Say for example you had a javascript named (removeme.js) you didn’t want to use offline your tag would look like this:
NETWORK: removeme.js
Remember it must be one item per line, but this would allow files to intentionally not be cached , but still be included in the online version.
If you will notice I placed a different sort of network tag on my manifest file:
NETWORK:\n*\n
This tag is a “catch-all” and I use it to clean up anything to aid in offline caching!
Testing the Cache Function:
Caching works on most mobile devices that are using supported browsers for caching. Most, but not all Windows and Android phones support caching, and are Web App capable, but in the event you have one that doesn’t you can download opera, it supports caching.
To check and see if the WebApp has cached, you can change the settings of your Android, iPhone or iPad, by setting your phone to airplane mode, or turning off your wifi. In iPhone or iPad do the following: in settings > Airplane Mode > on…
Once you have turned on “airplane mode” your wireless functions should disconnect you from the web, and you can go and reload your WebApp to make sure it cached and is working offline!
For more information, in the event your WebApp isn’t caching scroll down to Important Stuff and Debugging below.
Creating that cool book mark icon on iPhone or iPad:
Android or Windows phone
I am not sure how to do this on an Android or Windows phone, this WebApp was designed more for Safari WebApps on iOS, but you can always bookmark the url on your Android, and still get the same function without a fancy icon.
For apple products
Okay so you have an idea of caching, and of the proper use of the manifest file… you have looked at the source code and it makes sense to you. How do you get a customized icon to appear on your iPhone or iPad to make this thing work like an app? I will include some screenshots to show you how easy this is:
You are done! But how do you get that custom icon?
First you need to create your icon (57 x 57 pixels) and must be a png file.
You don’t need to add the shine, just an image, the iPhone will do it for you.
Once you have created your image place this tag in the head section of your markup:
<link rel="apple-touch-icon" href="example.png">
If you prefer an icon without the shine, you can just adjust your call tag like this:
<link rel="apple-touch-icon-precomposed" href="images/example.png">
Of course you want to replace the href in the tag above with the short url of your file… and remember to cache it!
That’s it… you have created a custom icon.
There are other tutorials out there for iOS(Apple) specific meta tags for your HTML5 Web Apps… their definitions and different functions. Here are a couple:
- http://www.html-5.com/metatags/
- http://developer.apple.com/library/safari/#documentation/AppleApplications/Reference/SafariHTMLRef/Articles/MetaTags.html
Okay now some difficulties…
Important Stuff:
In order to get your files to cache, the server your files are hosted on must use the proper mimetypes…
Why? Because this is a fairly new technology this mime type doesn’t come with the default in most servers… but you can bet it will in future versions. For now do this:
If you host them on an Apache server… you can use the .htaccess file found in the source files above and include it inside of the folder with your main html file. This will write the correct mime type to an apache server. The work has been done for you!
If you are using an IIS server, this must be done manually by an administrator.
They will need to go into the IIS settings and add the following mime type:
.manifest text/cache-manifest
Without this mime type nothing will cache.You can test to see if you have the right mime type for your manifest file you by pointing to it using this tool.
For example if I wanted to “sniff” the manifest file to make sure it was using the mime type text/cache-manifest, I would point the sniffer to http://ignitedmediadesign.com/test/mem/match.manifest.
Once you have the mime type correct, if you are still having issues, you can bet it is probably with your spelling or structure in your manifest file… the browsers are very sensitive to this file. If there is any misspelling, the caching will not work. If there are any files being referenced not found, it will not work.
Debugging:
In the source code above I have included a javascript that will help you detect errors.
If you are trying it out on an iPhone or iPad in Safari, go to settings – safari – developer – and turn on your debugger…
Reload the WebApp, and look for errors that will popup in the debugger…
If you aren’t on a mobile and just want to try it out on a standard browser… (IE doesn’t support it yet), in Firebug on Firefox you can use your console to find out what the caching is doing by using your “inspect element”.
In Chrome, you can right-click and use inspect element to do the same thing, just look in your error console.
If you are not on a mobile, the browser should be asking you to allow caching, this is a good indicator that at least it is trying to cache.
Make sure you spell the tags in the manifest file, and the files it is trying to cache correctly or it will not work.
Bonus Bubble Script
You will notice in the source files that included is “bubble.js”. This script is a javascript popup written by Google for Safari web browsers to let the user know that this web page is WebApp capable.
The colors and messages inside of the popup can be changed (lines 543 and down in bubble.js). The script works on both iPhone and iPad using Safari, and aligns depending on which device you are using to hover above or below the bookmarking buttons.
Almost all of the settings can be changed altering the javascript, but it works pretty good as it is. I would leave the settings as is and at most maybe change the colors to match the format of your WebApp.
One very difficult thing to change (unless you really know what you are doing) is changing the close.png icon. The icon is a base 64 encrypted file, and is difficult to make and to implement in this javascript if you have never used base64 encoding. It would be best just to leave this file as is, the chances are better that the bubble popup will work better if you don’t change it!
Unfortunately I don’t know of any scripts for the Android, or Windows phone, perhaps some of you do, and would share, please let me know and I will update the WebApp!
Concluding
That is about all I can tell you, feel free to use my source files and create your own WebApps…
If you make any money be sure to kick some back!!! Just kidding, but it would be cool!
Here are some other tutorials some of which I used to create this WebApp: