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.

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.