HTML5 Manifest Cache behind Basic Auth?

Question

I've got a site that's using HTML5 caching and working lovely.

When I protect the site using Basic Auth (.htpasswd) the caching doesn't seem to work. Ideally I'd like the site to cache for authenticated users. My theory is that when they visit the site offline the server isn't actually being hit and so the cached version is displayed.

Is it part of the HTML5 specification that pages aren't cached if they are protected? I couldn't find any reference to this.

Has anyone successfully created a password protected cacheable application?

I'm not sure if this is browser specific but I'm testing in Safari - it's an iPad application.

Thanks in advance

Answer 1

This is actually caused by CORS because the browser treats the request as cross-origin.

A good solution is to add crossorigin='use-credentials' onto your manifest definition, like so:

<link rel="manifest" crossorigin="use-credentials" href="/manifest.json">

This will then pass your credentials over to the manifest request.

More info on this setting:: https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes

Answer 2

Some other people were complaining about the same problem on iOS 3.x and said moving the manifest file outside of the auth directory seemed to fix things: http://lists.apple.com/archives/safari-iphone-web-dev/2010/Sep/msg00000.html

I was able to work around the problem with an .htaccess file in the folder in question that looked like this:

AddType text/cache-manifest .manifest
<FilesMatch "your.manifest">
    Order Allow,Deny
    Allow from all
</FilesMatch>