嘿, 我是Mofei!
Detailed Explanation and Specifications of Manifest
Published April 12, 2014 at 07:13 PM

# Detailed Explanation and Specifications of Manifest

HTML5 provides application caching capabilities, allowing the browser to save previously opened files for access without a network.

The advantages of using application caching include:

  • Offline access: Users can still access the website while offline.
  • Speed advantage: Files load from local storage, providing speed benefits.
  • Reduced server load: The browser only downloads changed files, avoiding multiple accesses to the same file on the server when loading the same page multiple times.

Using Manifest

Application caching is primarily specified through the manifest attribute to designate cache files.

<html manifest="example.appcache">
  ...
</html>

Manifest Loading Process

  • When a user visits a website with a specified manifest, if there is no cache, the browser will load the manifest file and then download all specified files to establish the first cache version.
  • Upon the user’s second visit, the browser will first load files from local storage based on the manifest and trigger the window.applicationCache object's checking event.
  • If there are no file updates, the browser will trigger the applicationCache object's noupdate event.
  • If the manifest file has been updated, the browser will reload the updated files from the server. Users can also add cache files through the applicationCache.add() event, with each temporally added file triggering the applicationCache object's progress event. If there is an error with the file, it will trigger an error event.
  • Once all files have been loaded, the applicationCache object's cached event will be triggered.

Manifest Syntax

The manifest file is saved with the MIME type text/cache-manifest, and the beginning of the file must start with the two words CACHE MANIFEST separated by a space.

Tags

Tag Description
CACHE: Specified cache files
NETWORK: Whitelist for cache files
FALLBACK: Error handling
CACHE MANIFEST
# v1 2011-08-14
# This is another comment
index.html
cache.html
style.css
image1.png

# Use from network if available
NETWORK:
network.html

# Fallback content
FALLBACK:
/ fallback.html

Manifest File Specifications (Draft)

  • The manifest file must use the MIME type text/cache-manifest.
  • The content of the manifest file must begin with CACHE MANIFEST.
  • The manifest file should include a version number in the comments; any modifications to the cache files must include a version number change.
  • Caching of the manifest file itself is prohibited, as this would prevent the webpage from updating.
  • As much as possible, cache CSS, JS, and HTML files, and prohibit caching of dynamic files such as AJAX interfaces and PHP dynamic output files.
THE END
Previous
Solution for Message Merging into One Due to High Frequency Messaging in Node.js Socket
Next
A Complete Guide to Flexbox Layout

More Great Articles

I put a lot of thought into this post—would love to hear your thoughts!

avatar

Mofei's Friend (Click to edit)

Hey, say something!
No comments yet
Be the first to comment!

HI. I AM MOFEI!

NICE TO MEET YOU!