YouTip

* * * With HTML5, you can easily create an offline version of a web application by creating a cache manifest file. > **Note:** The manifest technology has been deprecated by web standards and is no longer recommended. * * * ## What is Application Cache? HTML5 introduced application caching, meaning web applications can be cached and accessed even without an Internet connection. Application caching provides three advantages for applications: 1. Offline browsing — Users can use the application while offline. 2. Speed — Cached resources load faster. 3. Reduced server load — Browsers only download resources that have been updated or changed from the server. * * * ## Browser Support : ## Example Document content...... [Try it yourself »]( * * * ## Cache Manifest Basics To enable application caching, include the `manifest` attribute in the document’s `` tag: ... Each page specifying a manifest will be cached when the user visits it. If the `manifest` attribute is not specified, the page will not be cached (unless explicitly listed in the manifest file). The recommended file extension for manifest files is ".appcache". ![Image 6: Remark]( Note that manifest files must be served with the correct MIME type: "text/cache-manifest". This must be configured on the web server. * * * ## The Manifest File A manifest file is a simple text file that tells the browser which resources to cache (and which not to cache). A manifest file consists of three sections: * _CACHE MANIFEST_ — Files listed under this heading will be cached after the first download. * _NETWORK_ — Files listed under this heading require a server connection and will not be cached. * _FALLBACK_ — Files listed under this heading specify fallback pages (e.g., a 404 page) when a requested page is inaccessible. ### CACHE MANIFEST The first line, `CACHE MANIFEST`, is required: CACHE MANIFEST /theme.css /logo.gif /main.js The above manifest file lists three resources: a CSS file, a GIF image, and a JavaScript file. Once the manifest file loads, the browser downloads these three files from the website’s root directory. Then, regardless of whether the user is disconnected from the Internet, these resources remain available. ### NETWORK The following `NETWORK` section specifies that the file `"login.php"` will never be cached and is unavailable offline: NETWORK: login.php You may use an asterisk to indicate that all other resources/files require an Internet connection: NETWORK: * ### FALLBACK The following `FALLBACK` section specifies that if an Internet connection cannot be established, `"offline.html"` should replace all files in the `/html5/` directory: FALLBACK: /html/ /offline.html **Note:** The first URI is the resource; the second is the fallback. * * * ## Updating the Cache Once an application is cached, it remains cached until one of the following occurs: * The user clears the browser cache. * The manifest file is modified (see tip below). * The application cache is programmatically updated. ## Example — Complete Manifest File CACHE MANIFEST # 2012-02-21 v1.0.0 /theme.css /logo.gif /main.js NETWORK: login.php FALLBACK: /html/ /offline.html ![Image 7: Remark]( Lines beginning with "#" are comments, but they also serve another purpose. The application cache is updated whenever its manifest file changes. If you edit an image or modify a JavaScript function, those changes will not be re-cached. Updating the date and version number in the comment line is a common way to force browsers to re-cache the files. * * * ## Notes on Application Cache Pay close attention to what gets cached. Once a file is cached, the browser continues displaying the cached version—even if you update the file on the server. To ensure the browser updates its cache, you must update the manifest file. **Note:** Browser capacity limits for cached data may vary (some browsers set a limit of 5MB per site).