These days, with mobile devices everywhere, we are not always assured an internet connection. Maybe your WiFi only device doesn’t have a hotspot available, or you are outside of your mobile provider’s coverage area. Whatever the case, HTML5 now provides a way to create offline applications so your users can continue to access what they need no matter where they are. In this article I will show you how easy it is to setup an offline application so you can begin writing one right away.
Introducing the AppCache
The AppCache, or Application Cache is a new feature of HTML5 that allows your web application to run without a connection to the internet. It is simply an area where you can store files that are cached by the browser that are then made available when the device is offline. This way, when a file or resource is needed it can get it from the AppCache instead of a Web server. When using the AppCache, the browser will only download a resource from the server when they are updated. This mechanism also allows you to have a smaller amount of requests on the Web server.
The AppCache is different from the built-in browser cache, which store files from resources that have already been visited. The AppCache will allow you to specify which pages and resources the browser should cache, even if your user has never actually retrieved it before. The AppCache also provides a more reliable source for these files since you do not know which pages may or may not be available when using the browser’s cache. This feature is currently supported by major browsers such as Firefox, Chrome, Opera and Safari. As of Internet Explorer 9 the AppCache is not supported.
The Manifest File
In order to use the AppCache you must set up a Manifest file. This is a simple text file that lists the files and resources you want the application to cache. The Manifest file begins with
"CACHE MANIFEST" like the example below:
CACHE MANIFEST #These are the files we want offline
You can create commented lines by putting the
"#" in front of the line. These lines are for documentation and are ignored by the browser. There are three headers that we can use in the Manifest file to give different directives to the browser about specific files: Cache, Network and Fallback.
The Cache Directive
Any files listed in the Cache directive area will be explicitly cached. The browser will download each file or resource and store it in the AppCache of the browser. There should only be one file on each line and they are case sensitive, so be careful when typing them in. Cache is the default directive so if you just start typing in files the browser will assume you want them cached. Below is an example:
CACHE MANIFEST CACHE : index.html contact.html css/style.css img/picture1.png img/picture2.png
The Network Directive
Files and resources listed in the Network directive section must always be downloaded and require a connection to the server. If you list an item in this section it will not be available offline. Here is an example:
NETWORK : database.dbml
The Fallback Directive
The Fallback directive is used for fallback resources that you want to have available if the user tries to access a resource that isn’t in the cache while offline. The syntax in this section is different because you can specify what resource should be served in place of the requested resource. Two values go on each line, separated by a space. The first file listed is the resource to match; the second one listed is the resource to serve in its place. Here is an example:
FALLBACK : order.aspx fallback.html
In the above example, if the user tries to access the order.aspx page while offline they will be served the fallback.html page instead. You can also use the
" / " wildcard in the Fallback section to specify “all uncached pages”. For example:
FALLBACK : / fallback.html
This example will serve the fallback.html page for any uncached page that is requested while offline.
Using Your Manifest File
Once you have your Manifest file created, you need to add the reference to your HTML pages that you want to cache. Here is an example of the HTML element that you use:
You will most likely need to add the .manifest MIME-type to your Web server. These files should be served with the MIME-type text/cache-manifest. To do this in your Apache server, simply add the following line to your .htaccess file:
AddType text/cache-manifest .manifest
Once you have the MIME-type added and the HTML manifest line in your file, you are done setting up your Manifest file for use. The next time you visit the page in your browser; you may or may not see a notification asking for permission to store the cached data on your computer. Some browsers will alert you to this, like Firefox, other browsers such as Chrome and Safari do not.
Refreshing Cache Files
If the files that you have cached do change they will not be re-cached or downloaded from the server automatically. The AppCache will only update the files when the Manifest file changes. If you want the browser to re-download any cached files you will need to modify the Manifest file to prompt the refresh.
Removing Cached Files
If you have files or resources in the AppCache that are no longer needed you will need to go through the steps for your specific browser to remove them. There is no way to signal with the Manifest file that you want files removed from the AppCache. Here are the steps for each browser:
- Go to Tools -> Options -> Advanced
- Select the Network Tab
- This screen will show you the Offline Storage that is being used
- Click the Clear Now to remove all Offline Files
- Go to Settings -> Options -> Under the Hood -> Clear Browsing Data
- Select how far back you want to delete data
- Check Empty the Cache.
- Click Safari
- Empty Cache
- Reset Safari -> Choose website data, cookies and cache
- Click Reset
- Go to Tools -> Preferences -> Advanced Tab ->Storage
- Locate the site and click Delete
Using the AppCache to create offline storage for your Web applications is easy. By setting up a Manifest file for your site, your users will be able to access the files and resources they need when they are not on a WiFi connection or outside of their mobile connection area. This way, your user will always be connected to the information they need and your application will run without problems. By setting up fallback resources you will be able to control what the user sees when there is no available connection to your server and live resources. The AppCache is a great resource to make your application stand out from the crowd.
Help us spread the word!
If you liked this article, consider enrolling in one of these related courses:
|Nov 14-15||HTML5 Training Course - Introduction|
|- Classroom - Online|