Getting Appcache’s Fallback to work, crossbrowser

Recently I decided to make my simple website available offline using HTML5‘s application cache. You’d think that this would be a fairly simple procedure but it turned out not to be so. As Jake Archibald said in , application cache is a douchebag and he’s not wrong.

The simple goal, as I mentioned above, was to make the static HTML parts of my website available offline, and the WordPress blog part would not be available offline (as I haven’t found a way to make this possible yet), and instead would redirect to a fallback file, which the application cache readily allows.

So I created my iandevlin.appcache file which contained all the HTML, CSS, and image files that my site uses and began testing it online.

CACHE MANIFEST

# Version 1.0
# 2015-05-30

CACHE:
/iandevlin-print.min.css
/iandevlin.min.css
/index.html
/about.html
/projects.html
/writing.html
/contact.html
/colophon.html
/404.html
/fallback.html
/favicon.ico
/images/aria-bones.jpg
/images/google-balls.jpg
/images/html5-bones.jpg
/images/html5-multimedia.jpg
/images/mr-sherlock-holmes.jpg
/images/natasha-pring.jpg
/images/toby-manley.jpg
/images/github.svg
/images/twitter.svg

FALLBACK:
/ fallback.html

NETWORK:
*

To begin with, it didn’t work at all, but that was because I had entered the wrong name for one of the CSS files which was highlighted via Frederic Hemberger’s very useful Manifest Validator, thus proving to me that indeed if any of the resources of the manifest file’s contents return a 404, the whole manifest is ignored by browsers (this, and many other interesting facts about appcache can be viewed at Appcache Facts).

Once that was fixed, the cache in general worked fine, except for the fallback, which didn’t work at all. As you can see above, the fallback section of my appcache file was as follows:

FALLBACK:
/ fallback.html

This basically instructs the browser to display fallback.html if anything other than what’s defined in the CACHE: section of the manifest file is accessed.

But none of the browsers I was initially testing with (Firefox and Chrome) would fallback correctly, both would simply return an error indicating that the network wasn’t found.

After much trial and error I learned two valuable lessons:

Once I had fixed these two issues both Firefox and Chrome would correctly display fallback.html when required, except that the CSS styling was missing. I assume this was due to the fact that it didn’t have the manifest file assigned to its <html> element, as mentioned above.

After some thought, I decided to try giving fallback.html its own manifest file that only contained the required CSS files. But alas, this didn’t work.

Abandoning that idea and after yet more trial and error I discovered that setting the full path to the required CSS file in fallback.html caused the styling to be loaded correctly.

<link href="https://iandevlin.com/iandevlin.min.css" rel="stylesheet" media="screen" />

Then I tested it in Internet Explorer 11, where there was no styling applied.

Sadly I couldn’t get it to work, unless I inlined the required CSS in the header of fallback.html.

Once this was done, the fallback worked and displayed as expected in Firefox 38, Chrome 43, Internet Explorer 11, Opera 29, and even Vivaldi 1.0 (I am unable to test Safari as I am a Windows user).

So, in conclusion, in order to get the application cache’s fallback to work correctly crossbrowser:

Actually the application cache isn’t a douchebag, it’s worse than that.