Webessence
Tags

Using the Application Cache

Javascript | 2012-02-04 13:20:30 | Comments (0)

The application cache (appcache) makes it possible to run a website offline. It makes use of a manifest file with entries of files inside it. When an appcache exists, every call to the files inside it are served directly from this appcache - no network access is done and needed.

When a manifest attribute is encountered and the appcache does not already exists, the browsers creates a new appcache and downloads all entries inside this manifest file and adds these to the appcahe. This happens in the background. With event listeners you can see what's happening.

Example of manifest attribute:

<html manifest="cache.appcache">

Some interesting links:

Gotchas

  • When a file that is served from the appcache calls a file not in the appcache (like with AJAX calls or the IMG tag that has a src attribute) and no CACHE manifest line exists for this file, the request to this file does not succeed. The solution is to add a NETWORK section that whitelists this file.
  • When a webpage that is not in the appcache is served and inside this file a file is referenced that is inside the appcache, this appcache is still not used (instead the "normal" HTTP cache is used)!
  • The entries in a manifest file are relative to the manifest file.
  • You can add absolute URLs to the CACHE section of the manifest file. When served from HTTPS they must be from the same origin (so they cannot be external). The served from HTTP this restriction does not exists.
  • An appcache is updated when the manifest file itself is changed, not when some file in the appcache is changed.
  • The manifest file must be served as content type "text/cache-manifest" and the extension should be ".appcache".
  • There are 2 ways to add some file to the application cache: explicit by adding it to the manifest file (so called explicit entries) and implicit: every file which HTML element has a manifest attribute is implicitly added to the appcache (so called master entries).
  • A manifest file must be from the same origin (protocol, host, port).
  • Files with parameters are regarded as different files (index.php?action=save is different from index.php?action=load).
  • Watch out for server side logic (like redirect when some session variable is not set). See example below.
  • To get rid of the appcache: simply remove the manifest attribute(s) and also remove the manifest file itself (or rename it). When the manifest file does not exists (so the webclient receives a 404), the application cache fot this manifest is removed.

In Chrome you can see the appcache per domain and all entries (and remove it) in chrome://appcache-internals/. In Firefox you can see and delete the appcache per domain in Options/Advanced/Network. To look to the entries in Firefox, go to about:cache.

Appcache patterns

Server side login SESSION with redirect when not logged in. For example: I have an index.php file that redirects to login.php when the user is not logged in. If the user is logged in, index.php shows some content. If index.php holds a manifest file, it goes like this:

CACHE MANIFEST
#v1
/js/jquery.js
/css/base.css
/program.php
/index.php
NETWORK:
*
  • The index.php file is requested. On the server no session exists, so a redirect is made to login.php. So now the index.php is not cached (because not served).
  • The user logs in in login.php and now the user is served index.php. At this point the index.php file is added to the appcache.
  • The user logs out.
  • The next time the user comes back, he goes to index.php, but now he is served the page from the appcache and it looks like he is logged in. So index.php cannot be cached in this scenario.

The easiest solution is to add an index-offline.php file that acts as a fallback for index.php. So remove index.php from the appcache (remove the manifest attribute). Add index-offline.php to the FALLBACK section of the manifest file. So now, when a user is offline and tries to go to index.php, he sees index-offline.php. So the new manifest looks like:

CACHE MANIFEST
#v2
/js/jquery.js
/css/base.css
/program.php
FALLBACK:
/ /index-offline.php
NETWORK:
*

Comments

No comments.
Comments are turned off after 90 days.