html manifest attribute CACHE section
Manifest appcache CACHE section
The Manifest CACHE section allows you to add the resources to be cached (offline stored inside the OfflineCache Directory, locally = on your pc):
- is one of the 3 sections of a manifest file
- the CACHE section is optional: syntax1
- each resource must be on a distinct row: syntax2
- CACHE section can be added more than once inside the manifest file: syntax3
- sections order (CACHE, NETWORK, FALLBACK) does not matter: syntax4
Examples file.appacache: CACHE section
| 1 2 3 | CACHE MANIFEST resource1 resource2 |
| 1 2 3 4 5 | CACHE MANIFEST resource1 resource2 |
| 1 2 3 4 5 6 7 | CACHE MANIFEST resource1 resource2 |
| 1 2 3 4 5 6 7 810 11 | CACHE MANIFEST resource1 * resource2 |
Video demonstration html manifest attribute: CACHE section
HTML5 appcache CACHE section, Tutorial
| min | video details |
|---|---|
| 00:01 | demo files: our website stored in the "cache" folder and the .htaccess file where we add the MIME type for .appcache extension |
| 00:13 | our demo folder contains: the html file, the css file, two images AND the manifest file called "test.appcache" |
| 00:15 | our .php file is linked to the manifest file through manifest attribute applied on html root element |
| 00:23 | inside our manifest file we decided to CACHE: only the css file |
| 00:30 | both formats are accepted: a) CACHE MANIFEST main.css b) CACHE MANIFEST CACHE: main.css |
| 00:50 | you can add more than 1 resources to be cached, but each one must be written on a distinct row |
| 00:53 | we will perform a test only with 1 resource: the "main.css" file |
| 01:02 | all demo files have been uploaded on server; |
| 01:04 | accessing the cached file (manifest.php) with its cached resources (main.css); obviously the manifest file will be itself cached too (test.appcache); |
| 01:08 | "Allow" the offline storage of the 3 files: manifest.php, main.css, test.appcache |
| 01:11 | the 3 files have been stored locally, in our computer, in our Offline Cache Folder |
| 01:13 | let's check this: 1. accessing the about:cache page 2. deleting the regular cache; we need the Offline cache only 3. refreshing the page; the regular cache is gone 4. accessing the Offline cache 5. our 3 files are in there, cached => it's working |
| 02:02 | cached resources are available Offline: switching on Mode Offline to run a test |
| 02:04 | accessing the cached html file with its cached resources |
| 02:06 | test result: ok; the cached resources are available, display: the manifest.php file and the main.css file |
| 02:08 | switching on Mode Online to run a test: the uncached resources (e.g the images) do not display ; find out why here |
| 02:14 | Online /Offline mode - both look alike although on Online Mode the Server can be accessed and holds extra resources than the cached ones (e.g the 2 images) |
| 02:14 | To avoid any confusion: - when on Online Mode: the cached resources will load from local machine and the uncached ones from Server - when on Offline Mode: the cached resources will load from local machine and the uncached ones won't load at all because Offline the Server is inaccessible |
| 02:35 | switching on Offline mode again to run one more test |
| 02:40 | deleting the cached resources from Offline cache folder: 2 ways of doing that shown |
| 03:00 | refreshing the page and of course, the html page does not display anymore, nor its style (we are in offline mode and the cached resources have been deleted) |