What is the HTML5 Application Cache? (And Why You Should Use Service Workers Instead)

AppCache is deprecated and removed from all modern browsers due to critical flaws; Service Workers replace it with full programmatic control over caching, reliable updates, and advanced offline capabilities.

The HTML5 Application Cache (or AppCache) was a browser feature designed to let web apps work offline by caching resources like HTML, CSS, JavaScript, and images based on a manifest file. It’s now deprecated and removed from modern browsers — including Chrome, Firefox, Safari, and Edge — because of serious reliability and usability issues.

How AppCache Worked (Briefly)

Developers created a cache.manifest file listing resources to store locally. The page referenced it with . On first visit, the browser downloaded and cached those files. Subsequent visits could load the app even without a network connection.

But it had critical flaws:

• Caching was all-or-nothing — one failed resource meant the entire cache failed silently.
• Updates were unpredictable: caches updated only after the page reloaded *twice*, and only if the manifest file changed byte-for-byte.
• No fine-grained control: you couldn’t choose when or how to fetch, update, or serve cached content.
• It interfered with normal HTTP caching and caused confusing “stale while revalidate” behavior.

Why Service Workers Are the Better Replacement

Service Workers are JavaScript scripts that run in the background, separate from the page, acting as network proxies. They give you full programmatic control over caching, fetching, and delivery.

Key advantages over AppCache:

• You decide exactly which requests to intercept and how to respond (network-only, cache-only, cache-first, network-first, etc.).
• Updates happen on your terms: install a new version quietly, then activate it at the right moment (e.g., after users finish a task).
• Supports advanced patterns like offline fallback pages, background sync, push notifications, and dynamic cache management.
• Works with modern tooling (e.g., Workbox) to automate caching strategies and avoid common pitfalls.

Migrating from AppCache to Service Workers

If your site still relies on AppCache, remove the manifest attribute and the manifest file first — it no longer works and may cause errors.

Then implement a minimal service worker:

• Register it in your main JavaScript: navigator.serviceWorker.register('sw.js').
• In sw.js, listen for the install event to cache core assets using caches.open() and cache.addAll().
• Listen for fetch to serve cached responses when offline or fall back to the network.
• Use skipWaiting() and clients.claim() to ensure updates take effect quickly.

For production, consider using Workbox — it handles versioning, cache invalidation, and strategy boilerplate reliably.

Bottom Line

AppCache is obsolete — not just unsupported, but actively harmful to maintain. Service Workers deliver more power, predictability, and flexibility. They’re the current, standardized way to build resilient, offline-capable web experiences.

The above is the detailed content of What is the HTML5 Application Cache? (And Why You Should Use Service Workers Instead). For more information, please follow other related articles on the PHP Chinese website!