/ Grunt

Auto-generated Cache Manifest Files using Grunt

Intro

If you've ever developed a web application that needs to operate when the user is offline, you've probably used an HTML cache manifest file.

Cache manifest files let the browser know which resources it needs to hold onto in its offline cache to ensure the web application can function offline.

With that brief background out of the way, cache manifests are... finicky and annoying. You can run into a bunch of problems when developing, especially on large projects where the files you need to cache change often.

Hopefully in the not too distant future all of our issues will be solved by Service Workers. But until then there are still things to contend with when using the cache manifest.

Issues

One issue is that the resources aren't re-cached when you change them. This makes sense because the browser has no way of determining this without downloading them. For this to happen you must update the cache manifest in some way and the typical way is to a timestamp inside the file itself:

CACHE MANIFEST
# Tue Dec 16 2014 15:31:36 GMT+1100 (AUS Eastern Summer Time)

Another issue is that when you are adding and removing resources to your application, you must change the manifest file by adding and removing the references to these resources. This ensures that when you add a new resource to your application, it is available offline. Conversely when you remove a resource from your application, you must also remember to remove the reference in the manifest, as if the caching process cannot find a resource, the whole process fails and nothing will be cached (AKA your app no longer works offline).

WHY

This proves to be an annoying problem when developing. Many times when developing I found I had added a new library and then my app would not work offline because of missing resources. I had forgotten to update the cache manifest.

Grunt Manifest Generator or:
How I Learned To Stop Worrying and Love Developing

Enter grunt-manifest-generator. This handy little Grunt plugin will scan the files in your application and generate a manifest file for you. It will even update the timestamp at the top of the file so resources are cached anew.

To begin, point the plugin to your HTML files in your application, and it will search through the HTML to find embedded images in <img>, url() resources inside your referenced CSS files and referenced JavaScript files.

{<6>}OMG

In fact, the scanning engine picks up almost everything - the only files I had to manually ask the plugin to scan (yes, you can do this) were my favicon and a JSON file my app uses.

You can even exclude specific files you don't want cached. For example, I use Bootstrap, and FontAwesome for my icons. Bootstrap uses Glyphicons for icons but I don't use them, so I can exclude them from being cached.

Partner this plugin with your standard build process, and you have no excuses for forgetting to update your cache manifest ever again.

Outro

The above link points to my fork of grunt-manifest-generator which fixes a bug with CSS url() inclusion and adds the ability to specify FALLBACK and SETTINGS sections in the cache manifest.

The original source can be found here. Thanks ginano!