HTML5 appcache with Safari causing cross-site css to not load correctly

HTML5 AppCache was designed to enable offline web applications by caching specific resources. However, Safari's strict implementation can cause cross-site CSS files to fail loading when not properly configured in the cache manifest.

The Safari AppCache Issue

Safari follows the AppCache standard more strictly than other browsers. When a cache manifest is present, Safari blocks any network requests to resources not explicitly listed in the manifest file, including cross-site CSS files.

Understanding the Problem

When you have a cache manifest like this:

CACHE MANIFEST
# Version 1.0

CACHE:
/styles/main.css
/scripts/app.js
/index.html

Safari will only allow requests to these specific files. Any cross-site CSS (like from CDNs) will be blocked, causing styling issues.

Solution: Using the NETWORK Section

To allow cross-site resources, add a NETWORK section to your cache manifest:

CACHE MANIFEST
# Version 1.0

CACHE:
/styles/main.css
/scripts/app.js

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

How the NETWORK Section Works

The NETWORK section tells the browser which resources should always be fetched from the network, bypassing the cache:

• * - Allows all network requests not explicitly cached
• http://* - Permits all HTTP requests
• https://* - Permits all HTTPS requests

Complete Example

CACHE MANIFEST
# v1.0.0

CACHE:
/
/styles/main.css
/scripts/app.js
/images/logo.png

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

FALLBACK:
/ /offline.html

Key Points

• Always include the NETWORK section when using cross-site resources
• The wildcard (*) is essential for allowing uncached network requests
• Update the version comment when modifying the manifest
• Consider migrating to Service Workers, as AppCache is deprecated

Conclusion

Safari's strict AppCache implementation requires explicit NETWORK declarations to allow cross-site CSS loading. Adding *, http://*, and https://* to the NETWORK section resolves this issue and ensures proper resource loading across all browsers.