App Cache

App Cache allows your website to be available offline to your users so perfect for those that wish to build web apps for mobile devices.

This is all controlled with your browser in HTML5 and is widley supported by most browsers for smartphones.

Expect 5MB available to store your files. Some browsers allow more.

A quick tip if you are building in chrome: open another tab and paste in
chrome://appcache-internals/

This will allow you to remove old cached files easily during your development.

Benefits of App Cache:

Offline use: Your website can still work fully or partly without the user having internet connection

Reduced server load: The resources will only be loaded once (until you change the cache) therefore making less or no calls to your server after its inital load

Speed: With all the files required locally in the browers they load so much faster for the user after the inital load.

Working Demo is available here

All code is available to download at: https://github.com/glynrob/appcache

How to setup:

Reference the manifest file:

The manifest file is where you list all the files that you wish to cache along with any fallback files if they are not online.

Very simply you link to the file in the html tag

One point to make is to ensure that your server can read the manifest files text/cache-manifest.

If they can’t then you either need to allow this in your apache config or the .htaccess in my example works

The Manifest file:

On line 2 we place in the last updated date along with a version number.

If any of these resources change (i.e. css update or image changed) then you will need to either change the version number or the date.
(The actual date and version number makes no difference as the file only has to change but it is nice to do this so other developers can see when the last update was)

CACHE: Lists all the resources that it would like to make available offline

NETWORK: List all resources that need to have internet connection to work

FALLBACK: What actions to take if a resource is not found when offline.

My example replaces the online.jpg image with offline.jpg image so the user can see if they are online or not

Wildcards can be used with Network and Fallback (but not Cache).

Be careful to ensure that all paths to any resources exist and there are no spelling mistakes.

Any error in this file will cause the manifest to be ignored in the browser.

Swap the cache if it is changed:

If the manifest file is updated then you want to provide the latest version to the user.

This is only done when the cache has expired so its worth having your own code to force this.

Using javascript you can use the following code to check on every page load if the manifest file has been updated and swap the old cache with the new one.

If there is a change then you need to reload the page so the user can see it.

This example alerts them so the page does not just reload automatically.

There are additional states you can call should you need them. They are available at: http://www.whatwg.org/specs/web-apps/current-work/#applicationcache

That is all there is to it.

Simple eh.

Post navigation

Leave a Reply

Your email address will not be published. Required fields are marked *