html manifest attribute
HTML5 Manifest (appcache)
The manifest attribute links a web page to a manifest file. This file points exactly where from to load 1 or more resources (files, images..) the 2nd time the page that holds them is accessed:
- from local machine (Offline cache folder) ?
- from server ?
- and when a resource on server can't be accessed, what alternative resource should be loaded from the local machine ?
Manifest: Intro
HTML5 Manifest: Sections
HTML5 Manifest: Advantages
- everything stored on your local machine loads faster and can be accessed Offline → faster websites accessible even Offline
- less requests for your server »video
HTML5 Manifest: Disadvantages
- user's cached files (locally) do not refresh automatically when those files are modified on server »video
HTML5 Manifest: Fixes
Updating the offline cache and Displaying the new cached Resources on Web Page
1. updating the cached resources WITHOUT modifying the Manifest file:
The website's updates display ONLY IF:
- a) user changes the browser (or the pc) → the website's updates display »video
- b) user keeps the same browser but clears the OfflineCache Folder → the website's updates display »video
Otherwise no, the website's updates do NOT display; tests:
- NOT Ok: re-accessing the page in a new tab
- NOT Ok: refreshing the page
- NOT Ok: closing ⁄re-opening browser and re-accessing the page
2. updating the cached resources AND ALSO modifying the Manifest file:
a) modifying the manifest file by adding one or more new resources to be cached »video
- NOT Ok: re-accessing the page in a new tab
- Ok: refreshing the page
- Ok: closing ⁄re-opening browser and re-accessing the page
b) modifying the manifest file by adding a commented line for new versions »video
- NOT Ok: re-accessing the page in a new tab
- Ok: refreshing the page
- Ok: closing ⁄re-opening browser and re-accessing the page
c) modifying the manifest file by adding a commented line for new versions and automatically refreshing the page using meta tag »video
- Ok: no user participation required; the page refreshes itself after x seconds, in the same tab, taking user's control
3. updating the cached resources AND ALSO modifying the Manifest file + using window.applicationCache object:
- Ok: re-accessing the page in a new tab
- Ok: refreshing the page
- Ok: closing ⁄re-opening browser and re-accessing the page »video
Recommendation: 3) OR 2 a), b) or c)-if it's okay taking user's control
Examples
| < | attribute | = | "value(s)" | > | ... | </> | Examples |
|---|---|---|---|---|---|---|---|
| 1. | manifest | = | manifest file url | < manifest="test.appcache"> ... <⁄> < manifest="http://site.com/test.appcache"> ... <⁄> |
Video demonstration html manifest attribute
HTML5 html manifest attribute - intro tutorial
| min | video details |
|---|---|
| 00:06 | launching a demo "manifest.php" file in browser |
| 00:09 | manifest attribute can be applied only on the html root element |
| 00:11 | the value of the manifest attribute: the url of the manifest file |
| 00:17 | How to cache resources - STEPS: |
| 00:17 | 1. decide what resources you wish to cache |
| 00:30 | 2. create the cache manifest file and specify the ressource(s) to be cached |
| 01:01 | a manifest file can have 3 sections: cache, network and fallback. When the last two are not specified, the file format can be simplified by adding the resources right under the CACHE MANIFEST line, without adding the CACHE section, though those are cached resources |
| 01:34 | 3. link the manifest file (test.appcache) to the desired web page |
| 02:46 | 4. the manifest file (test.appcache) must be served with the right MIME type |
| 03:41 | when testing the html file from server, file linked to a manifest file, inside which we've added the resources to be cached, the Firefox browser will display the next message: This website (...) is asking to store data on your computer for offline use if you choose "Allow", the main.css file will be stored locally and the 2nd time we will access THIS html file, the css file will load from your computer, from the Offline Cache Folder and not from Server → thus the style will load faster |