HTML5 Offline Manifest Stop Caching Page It Is Declared On

Question

I've been playing around with the cache manifest file and trying to get it to stop caching the page that it's declared on.

From HTML5 Rocks

any page the user navigates to that include a manifest will be implicitly added to the application cache

Ace. I want the manifest file to cache specific artifacts, one of which is an offline version of my online single page app HTML, but NOT to cache the online version.

Bergstein

I'm still a bit new to HTML5, but I'm surprised that there is no well-defined way to prevent caching of the page including the manifest. – Jemimah

Yeah me too. I would've preferred it if the manifest file had more influence so only what you declare will get cached. It shouldn't be linked to the page. That's simply hidden functionality. – Bergstein

My first thought was "Add it to the NETWORK: section", but after some testing this doesn't work (In IE at least - I stopped testing as soon as I foudnd one case when it didn't work). Thats just plain wrong in my opinion - something thats explicitly declared should always override default behavior. I'm still very tentative about using the offline stuff because of issues like this. – Chessy

Answer 1

This is how I solved the problem. My manifest file

CACHE MANIFEST
# Version 0.1

CACHE:
# Minimised Styles
/css/style.0.1.min.css

# Minimised JavaScript
/js/script.0.1.min.js

FALLBACK:
/ /offline.html

NETWORK:
*

Note everything that goes to mydomain.com/ when offline will now go to /offline.html (from cache)

Now, how to cache only what's in the manifest file, without including the online page at mydomain.com/.

Put the following iframe at the bottom of your page at mydomain.com/

<iframe src="/offline.html" style="display: none;"></iframe>

And put manifest="myapp.appcache" in offline.html.

This means when mydomain.com/ is loaded it won't ever get cached (as there is no manifest attribute on the page). Then the browser goes gets the offline.html via the iframe and everything else you want caching is added using the instructions in the manifest file, including the offline.html page because of the presence of the HTML attribute.

The only overhead I can see is on first page load, the iframe will make an extra HTTP request, but once its cached it'll take it from cache, so not a massive problem.

Bergstein

This appears to work for Chrome, but I don't seem to be able to get it to work for FireFox v14.0.1. It keeps getting everything from the network for the main index.htm file (which doesn't have a manifest attribute - but does have an iframe with the offline.htm file that has a manifest). – Neophyte

After upgrading to FF 15 it has started to work for me. Not sure if something was wrong with my setup, but it now works. – Neophyte

This is exactly what I was looking for, though not neat, but gets the job done perfectly. Thanks @Bergstein ! – Pamplona