How Application Cache Manifests Enable Offline Web Apps
Application cache manifests let browsers store resources locally, enabling offline access, faster load times, and reduced server load; this guide explains their purpose, browser support, usage syntax, file structure, update mechanisms, and key considerations for reliable offline web applications.
Purpose of Offline Storage
1. Users can access the application offline, which is especially important for mobile users who cannot maintain a constant network connection.
2. Accessing locally cached files usually results in faster load times.
3. Only modified resources are loaded, avoiding multiple requests for the same resource and significantly reducing server load.
What is a Manifest
A manifest file is a simple text file that tells the browser which resources to cache (and which not to cache). Browsers that support manifests will store the listed files locally according to the manifest rules, allowing the page to be accessed without a network connection.
Browser Support
The chart shows that major browsers support Application Cache except Internet Explorer.
How to Use
To enable Application Cache, include the
manifestattribute in the
<html>tag of the document:
<code><!DOCTYPE HTML>
<html manifest="demo.appcache">
<body>
The content of the document......
</body>
</html></code>Please note that the manifest file must be served with the correct MIME type "text/cache-manifest" and configured on the web server.
Manifest File
A typical manifest structure:
<code>CACHE MANIFEST
# Comments: files that must be cached, read from cache whether online or offline
CACHE:
chched.js
cached.css
# Comments: files that should never be cached, always fetched from the network
NETWORK:
uncached.js
uncached.css
# Comments: fallback resources when a request fails (e.g., index.html fallback to 404.html)
FALLBACK:
index.html 404.html</code>1. The line
CACHE MANIFESTmust appear at the top of the file.
2. Lines starting with
#are comments; a version number or timestamp is often placed on the second line to force cache updates.
3.
CACHEis required and lists the resources to be cached, using relative or absolute paths.
4.
NETWORKis optional; resources listed here are always fetched from the network and may use wildcards like
*.
5.
FALLBACKis optional; it specifies a fallback page when a resource cannot be accessed.
Updating the Cache
When online, the browser detects the
manifestattribute in the HTML head and requests the manifest file. On first visit, it downloads the listed resources and stores them offline. On subsequent visits, it compares the new manifest with the cached one; if unchanged, no action is taken, otherwise the new resources are downloaded and cached.
When offline, the browser directly uses the previously cached resources.
Precautions
1. If the server updates offline resources, the manifest file must also be updated; otherwise the browser will continue using the old cached versions.
2. Caching the manifest file itself can be problematic because HTTP caching may cause the browser to keep an outdated manifest. It is recommended not to cache the manifest file.
3. The browser downloads all resources listed in the manifest in a single batch. If any resource fails to download, the entire update is considered failed and the browser retains the previous cached resources.
Tencent IMWeb Frontend Team
IMWeb Frontend Community gathering frontend development enthusiasts. Follow us for refined live courses by top experts, cutting‑edge technical posts, and to sharpen your frontend skills.
How this landed with the community
Was this worth your time?
0 Comments
Thoughtful readers leave field notes, pushback, and hard-won operational detail here.