Facebook Twitter Gplus LinkedIn RSS
Home Manifest Creating the Manifest

Creating the Manifest

Creating the manifest is fairly easy.  Simply make a file and name it something.manifest.

#Example manifest file name
webapp.manifest

Remember your file name, as you will need it later when writing up your HTML page.  Now the key parts of your manifest file are going to be the files you want your device to cache, whether it’s javascript files, html pages, or even images.  It is composed of up to three sections, although you don’t need them all to have a functioning manifest file.

The first section (and what I feel is probably the most important) is the CACHE MANIFEST header.  This section is the list of files you want your manifest to tell your device to download and cache.  I prefer to have my paths relative, but the manifest supports absolute paths as well.  A sample CACHE MANIFEST section could look something like this:

CACHE MANIFEST
#Manifest version 1.0

webapp.js
images/icon.png
style.css

This will tell your browser to download those three files and cache them locally.  You can write comments using the “#” sign as the markup, but the words “CACHE MANIFEST” need to be clearly written, and the next things should be file paths.  If you are working off of just one HTML file, as long as that file points to the manifest(which you’ll learn about later), you don’t need to include it in the CACHE MANIFEST list.  For example, if my only HTML page is index.html, I don’t need to add it to the above list for it to be downloaded and cached locally.  The next two sections are optional for the manifest, but can prove helpful in some cases.

The second section of the manifest file is the NETWORK section.  This includes anything you don’t want your browser to download and cache.  These resources will never be available offline.  Although you probably won’t use this often, I used this section for the PHP files I was using as part of my AJAX calls to the server.  I mistakenly placed my download.php file in the CACHE MANIFEST section at first, and it ended up caching the download file, and in result it didn’t function.  Moving it to the NETWORK section fixed it.  A sample NETWORK section could look like this:

NETWORK:
download.php

The third and last section of the manifest file is the FALLBACK section.  This portion of the manifest defines a place to find substitutes for online files that couldn’t be cached.  I actually haven’t had the need to use this in any of my web apps, but this section could come in  handy.  After looking online, it seems that one good way to use this section is with the following:

FALLBACK:
/ /offline.html

NETWORK:
*

This example, found in the W3 HTML5 specification, will cache all pages as they are fetched online in the browser.

Combining this all together, a sample manifest file could look like this:

CACHE MANIFEST
#Manifest version 1.0

webbapp.js
images/icon.png
style.css

NETWORK:
download.php

FALLBACK:

There is one thing about the manifest that is extremely important, and is probably one of the most frustrating parts about it.  Whenever you list anything in this file, it needs to be spelled correctly.  The manifest will allow for no syntax errors at all, so make sure that when you are defining paths (whether relative or absolute), everything is spelled correctly.  If you don’t, the manifest will download all files up to that line, stop because it can’t find what to download next, and then throw an error.  As I found the need for a file during development, I added it to the manifest file to prevent myself from having to do it all at once in the end.

Well there you have it, you now have a working manifest file.  Next we will talk about cache statuses and how to cleverly check them. Next ->

 

Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>