HTML5 appcache with Safari causing cross site css not to load

Question

I have run into an issue with one of my webpages that was changed to use the HTML5 appcache feature. Safari is blocking my cross site css files when the appcache is enabled on a page. The page, http://www.ericperrets.info/, loads a number of image/css files from my server and a number of css files from a google url/servers. Below is the epi.appcache file content

CACHE MANIFEST
#v2

CACHE:
default.css
/images/bg.gif
/images/bg2.gif
/images/external.png
/images/logo.gif
/images/mail_48.png
/images/meme.jpg
/images/pdficon.gif
/images/telephone_32.png
/favicon.ico
/js/dojo/dojo/dojo.js

NETWORK:
Resume%20-%20Eric%20Perret.pdf
index.html

This works find when the page load in firefox, but when I try to load it in Safari, it blocks the calls to http://fonts.googleapis.com/css?family=Reenie+Beanie&v1 and http://fonts.googleapis.com/css?family=Candal&v1 are blocked with the message

The URL can’t be shown

Not sure why this is happening.

Answer 1

Appcaches when defined are used by the browser to specify what files exist on your site that are relevant to the particular page the browser is visiting. Think of the appcache like a whitelist, it lists all the files that can be accessed and how they should be accessed.

Therefore when Safari, which in my experience is following the AppCache standard a little more strictly than Firefox sees a request for a web address that is not in the AppCache, it does not allow access.

To get around this you can either add the resources either to your cache section or to the network section. The better option in my mind is to use a wildcard "*" path in the network section to ensure that requests are not blocked.

NETWORK:
*
http://*
https://*