Advanced Tips with HTML 5 Caching

By admin, Gaea News Network
Tuesday, May 15, 2012

This is not a replacement for reading the numerous tutorials on HTML 5 Caching. This is a must read before you try to implement HTML 5 caching on a non-trivial website or web application. This has been compiled after spending days understanding the nuances of the very powerful but sensitive beast that is HTML 5 Caching.


HTML5 caching respects browser cache headers

Expire and Last-modified headers - if these headers exist then HTML 5 caching will not refresh the page even on manifest file change. HTML 5 cache respects expire duration and only beyond that duration will it refresh the cache. This can have serious consequences for your browser cache strategy.

No-cache header - HTML5 cache will not cache any file with No-cache header even if it is specified in the manifest file.

Main page caching and how to prevent it

The page containing manifest header is itself added into html5 cache (by default) irrespective of whether it is specified in cache manifest file. Using No-cache header you can exclude this page from HTML 5 cache. This is extremely important when the main page itself is dynamic as is normal with many web applications.

Nuances of HTML 5 Caching

  • When you specify the same manifest file for multiple pages in your website:
    • When you visit one such page before full caching of all files specified in the manifest file is completed, all the files specified in the manifest file (irrespective of whether it is used in the current page) are fetched from the server in the background.
    • Any page, after completion of caching (see above), when accessed for the first time causes download all the files used in the page (but not other files which are specified in the manifest file, unlike the first  page).
    • Subsequent access downloads only the manifest file, non-cached resources* and POST requests
  • When manifest file is changed (after it has been previously cached), then accessing any page referencing the manifest file will trigger a background download of all the resources specified in the cache file.
  • After all the resources in the new manifest file has been downloaded, subsequent access of any page for the first time after change do not download referenced files, unlike the first time.
    When you add a new file in the cache manifest file then it is also fetched one time only during cache refresh (not for every page which references it unlike first time as described above)
  • HTML 5 Caching breaks even if it cannot find (say 404 status) one file specified in the cache resulting in reloading of all the files specified in the manifest file whenever a page is loaded.

Note: Non cached resources are files which are served either with No-cache header or without Expire or Last-modified header or specified in manifest file under NETWORK section.

Filed under: Featured Article, Tech talk
will not be displayed