Automating The HTML5 Manifest

I have recently been working on a fairly complex web application which has the requirement to function both online and off-line.  For both off-line web pages and content, the HTML5 Manifest is the best way to go for off-line functionality.  However, I quickly realized that maintaining a list of all individual content items for a complex website can become very cumbersome. To address this challenge, I have automated the process of creating the manifest file. However, the file is only generated when the website is running in DEBUG mode. Once the site has been published in release mode, this process only uses the last version of the Manifest file that was created. This enhances the performance of the published website while ensuring that the manifest is up to date with all your latest website content modifications when working in DEBUG mode. In addition, the process includes several features for including or excluding certain website content by both directory and file. Manifest versioning can also be handled manually or in automated fashion depending on your requirements.

For those of you who have never experienced making an ASP.NET or MVC application available off-line before, here are the basic steps:

1.  Create A Manifest File

The Manifest file is mostly a text file containing a list of all the website content (i.e. pages, images, scripts etc…) which are required to make the website function off-line.  Basically, everything contained in the Manifest will be cached on the user’s local computer so the website will function when it is not connected to the internet.  My intent with this article is not to go into detail on how to manually create a Manifest file or spend a lot of time explaining each section of the Manifest file.  Suffice it to say that itemizing every piece of content on your website can be very time consuming and error prone.

A Typical Manifest file might look something like this:

However, if you have 500 items of content in your website, your list would be 500 items long.  I will propose an automated solution to this problem later in the article.

2.  Add the mime type “text/cache-manifest” to your website. Continue reading “Automating The HTML5 Manifest”