HTML5 AppCache Expiration Rules

Overview
Background
Key Concepts
Implementation
References
Notes

Overview

HTML5 Application Cache (AppCache) was a browser mechanism introduced to enable offline web applications by allowing developers to specify which resources should be cached locally. The cache manifest file controlled caching behavior, but AppCache had significant design flaws including confusing update rules, no programmatic cache invalidation, and the "cache poisoning" problem where a cached manifest could prevent updates indefinitely. AppCache was deprecated in 2015 and removed from browsers by 2021, replaced entirely by Service Workers which provide fine-grained, programmatic control over caching strategies.

Background

Introduced in HTML5 specification circa 2008-2010
Designed for offline-first web applications (especially mobile)
Used a cache manifest file (CACHE MANIFEST) with MIME type text/cache-manifest
Manifest sections: CACHE, NETWORK, FALLBACK
Browser checked manifest for updates, not individual resources
If manifest unchanged (byte-for-byte), entire cache considered valid
Expiration controlled by HTTP headers on the manifest file itself

Key Concepts

Cache Manifest Sections

CACHE MANIFEST
# v1.0.0 - version comment forces update

CACHE:
/css/style.css
/js/app.js
/images/logo.png

NETWORK:
*

FALLBACK:
/ /offline.html

Expiration Rules

Browser fetches manifest on each page load
HTTP Cache-Control and Expires headers on manifest control check frequency
If manifest byte-content differs, entire cache invalidates and re-downloads
Version comments (# v1.0.0) commonly used to force updates
window.applicationCache.update() could trigger manual checks
swapCache() required to activate new cache after updateready event

Critical Flaws

All-or-nothing caching: entire cache invalidated on any change
Master entries problem: page that references manifest always cached
No partial updates or delta downloads
Race condition between cache and network
Debugging extremely difficult
FALLBACK rules unintuitive

Implementation

Legacy AppCache Pattern

<!DOCTYPE html>
<html manifest="app.manifest">
<head>
  <script>
    var appCache = window.applicationCache;
    appCache.addEventListener('updateready', function() {
      if (appCache.status === appCache.UPDATEREADY) {
        appCache.swapCache();
        if (confirm('New version available. Reload?')) {
          window.location.reload();
        }
      }
    });
  </script>
</head>
</html>

Modern Service Worker Replacement

// sw.js - Service Worker with Cache-First strategy
const CACHE_NAME = 'app-v1';
const urlsToCache = ['/css/style.css', '/js/app.js'];

self.addEventListener('install', event => {
  event.waitUntil(
    caches.open(CACHE_NAME)
      .then(cache => cache.addAll(urlsToCache))
  );
});

self.addEventListener('fetch', event => {
  event.respondWith(
    caches.match(event.request)
      .then(response => response || fetch(event.request))
  );
});

Service Worker Caching Strategies

Cache First: Check cache, fall back to network
Network First: Try network, fall back to cache
Stale While Revalidate: Serve cache immediately, update in background
Cache Only: Only serve from cache (offline)
Network Only: Always fetch from network

References

Notes

AppCache officially deprecated in HTML 5.1 (2016)
Chrome removed AppCache support in Chrome 85 (2020)
Firefox removed support in Firefox 84 (2020)
Safari removed support in Safari 15.4 (2022)
Workbox library simplifies Service Worker caching patterns
Service Workers require HTTPS (except localhost)
Consider Cache API storage limits (~50MB typical, varies by browser)