In this chapter we will explain how application caching works with HTML5 written document.

The ‘application caching’ term refers to a document’s material caching during initial loading, and all in order to speed up the same site’s loading time during next visit of the same user. In many ways, the application caching (or storing) works in same way as being done with other tools such as HTML – CSS, Image caching, JavaScript pages, etc…

Caching in general facilitates full or partial loading of a web page, so it can be accessed offline or have accelerated the loading speed.

Some of the advantages of caching are listed here:

  • A user can now browse full or partial web page even if the application is offline or there is no internet connection.
  • Loading speed of the page increases because most of the resources (material) are now being loaded from the browser cache (local PC)
  • When the site goes ‘under maintenance’ or similar, the page may still be accessed locally, with the last cached data

The Application Cache or AppCache, introduced by W3.org HTML 5 specification, is intended to be used as a programmer’s tool defining which files a browser should cache and make available in offline use. Although poorly understood, and thus perhaps not used as much as it may be, it is a very useful and economic way of speeding up larger HTML application, resulting in overall better user’s experience.

The cache manifest file

To start adding AppCache to our website, we must first create a Cache manifest file. A cache manifest file is a simple textual file that collects lists all necessary resources about the data we want to keep caching offline.

NOTE: Although a textual file, it is suggested to save it as ‘.appcache’. 

Adding cache manifest file

Before we continue with the cache manifest section, it is important to know that in order for a server to understand the Application Cache, it first has to be “served” or explained to it. If using an Apache server (see with your site’s server company) that is done by adding a line in its ‘.conf’ file that tells it what MIME-type the file it is and its extension:

AddType text/cache-manifest .appcache

Exactly the same may be added into your website’s ‘.htaccess’ file; a file that Apache server uses to add extra configuration lines to websites, it has to be in the site’s root directory.

Configuring cache manifest file

The first line of a cache manifest file has to be CACHE MANIFEST. That is declaration line, and it is required.

The cache manifest file’s structure may contain following sections (all optional):

  • CACHE - A list of all files or resources that will be cached after they being downloaded the first time.
  • NETWORK - A list of all URL sources that may be loaded while approaching the website, and are not listed as cached. You can list URLs as needed, or simply put wildcard ‘*, which will allow all URLs. Most sites do exactly that.
  • FALLBACK - Used to replace URL from NETWORK when Internet connection is not available, thus the name FALLBACK. As this too has to be an URI / URL type, it is usually a list of local resources (found on the same server as the main document). The FALLBACK syntax is written in a way that the first resource represents the main URL (only as a reference) and the second the fallback URL.
  • SETTINGS – Defines settings for the Application Cache behavior, primarily how to behave with or without Internet connection. There is only one mode currently, that is the CACHE mode and it explains the above mentioned behavior when the site is online of offline. If set to fast (default) browser will use cached data even if there is an Internet connection established; otherwise if set to prefer-online it will omit the AppCache data if there in active connection available.

Example:

In the example below we will show a basic implementation of a cache file, and how to structure it internally by following above explained sections:

CACHE MANIFEST

# add some introductory comment here

# Cached files

CACHE:

/css/init.css

/css/main.css

/img/logo.gif

/img/brand.png

/js/animation.js

/jquery.js

/index.php

/default.php

# We accept all links available

NETWORK:

*

# Replace guest’s image with a default one if connection is not available

FALLBACK:

http://www.brenkoweb.com/img/tutorials/css_gallery_ex1b.jpg

/img/offline_default.png

# Disable cached files if connection is active

SETTINGS:

prefer-online

Updating cache

We have seen above how to add and configure data for a CACHE file. But what happens once when the website loads for the first time? That is a critical part of a successfully applied AppCache technology. We simply don’t want our readers to stay frozen in an old version of our site, ignoring all those new and cool updates we’ve done since. Naturally there is a way of getting around that.

There are two general ways of updating our cached infrastructure, one we can influence and one we cannot.

The easiest way of re-caching our application is to clear the local browser’s internal data storage. However as we are not able to affect what is going on with our user’s browsers and computers, we have to concentrate on the other solution to this problem. That is, our cache manifest file has to be modified in that way that upon every loading it compares the cached data and decided whether to refresh it or leave as is.

To check if the cache manifest file has been updated we need to use a premade window object called window.applicationCache. This object returns the current status of the cache, by listening the cache status property.

We can write a JavaScript code that will read the window.applicationCache status property, and return the current value. There a number of different approaches, but probably the best one is to use the event listener, and trigger the ‘reload’ when the ‘UPDATEREADY’ status is returned.

Example

Triggering cache refresh when updating the application cache:

function onUpdateReady() {

        if(window.applicationCache.status === window.applicationCache.UPDATEREADY) {

               window.applicationCache.swapCache();

               if (confirm(‘A new update detected. Do you want to reload the page?’)) {

                       window.location.reload();

               }

               }

}

window.applicationCache.addEventListener('updateready', onUpdateReady);

The above example will ‘listen’ to any event triggered on the object window.applicationCache and evoke function onUpdateReady. Then we simply check which event (status) is returned and if that is UPDATEREADY we inform the visitor and ask if he or she want to reload the page.

Cache status events

As mentioned above, the applicationCache object contains information about all of its events within its status property. Following events are available by using window.applicationCache.status property during the first approach to a webpage:

  • UNCACHED – No file have been cached yet.
  • CHECKING –Initial event triggered when browsers loads the webpage and reads the content of manifest file.
  • DOWNLOADING – Browser started downloading the resources listed inside the cache manifest file.
  • PROGRESS – Provides information on how many files are to be downloaded and how many have already been.
  • CACHED – When all resources have been downloaded, this event is triggered.

However if browser has cache the particular page already, another set of events take places:

  • IDLE – No changes detected in the manifest file.
  • DOWNLOADING – Browser has started to download the changed resources listed in the manifest file.
  • PROGRESS - Provides information on how many files are to be downloaded and how many have already been.
  • •UPDATEREADY – The main event for updating purposes. Signifies when the update changes have been downloaded and the page is ready to be approached offline. To properly execute the update, upon detecting this status, the webpage needs to be refreshed (see above example).
  • •OBSOLOTE – Triggered if the manifest file gets removed from the location, and there is nothing to return.

In case of errors detected, certain error events may be triggered as well:

  • Caching is aborted due errors 404 or 410.
  • The manifest file is changed while updating the old file.
  • An error or errors occurred during downloading the resources from the manifest file.
  • The manifest file is unchanged, but the page referencing it failed to download properly.

Referencing the manifest file

For the end of this interesting chapter we left a very important aspect of working with Application Cache, and that is: referencing it.

When the manifest file is ready, and its updates ready to receive, we have to reference it within the HTML document itself. That is achieved by using a manifest attribute directly in the <html> tag, as shown here:

<html manifest=”cached_file.appcache”>

</html>

The ‘manifest’ attribute should be added to every page that contains some materials we want to cache.

 

›› go to examples ››