Tuesday 28 January 2014

HTML5 Application Cache (Safari) quirkiness

HTML5 Application Cache can be a powerful tool in modern browsers, but there are some quirks that you have to know when you use it. If you don't know about the Application Cache I suggest you checkout Eric Bidelman's A Beginner's Guide to Using the Application Cache.

First of is the size limit of the different browsers. There is a great website that list (and tests) the size limit of the different browsers: appcache-default-size

IE (at least 10 and 11) has a limit per domain, so a.example.com and b.example.com share the same storage limit. And any resources served with the header Cache-control: no-store in IE will fail the download of the application cache.

Safari (tested on 7.0.1) has strange quirk. We run our application with gzip enabled, so when I tried to load our application for the first time on Safari I got a "[Error] Failed to load resource: cannot decode raw data" on the manifest file. Safari tries to download the manifest with the correct gzip accept-header, but fails horribly when the data is gzip'ed, so disabling gzip for the manifest file fixes the problem, for the manifest. But then it downloaded the first file and the same error occurred, so we got to disable gzip for all resource files, as we can't identify if Safari is downloading normally or via the manifest. Fun fact is that Safari on the iPad works just fine.
Another quirk is that Safari downloads on a separate 'thread' witch has no cookies what so ever. So the 'thread' downloading is not logged in. This causes some problems as we had our resources secured with authentication.

So in conclusion to make Safari work with the application cache.
- You have to disable gzip for Safari (desktop).
- All resource files should be publicly accessible.