HTML5 cache-manifest compilation for broccoli
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.


HTML5 cache-manifest compilation for broccoli

A nice introduction on the subject:

There's also a Wicked-Good-Ember talk on this subject, see

Usage for Ember Cli

npm install --save-dev broccoli-manifest npm install --save broccoli-merge-trees


ENV.manifest = {
  enabled: true,
  appcacheFile: "/manifest.appcache",
  excludePaths: ['index.html', 'someother.html'],
  includePaths: ['/'],
  network: ['api/'],
  showCreateDate: true

Upgrade your index.html (see below) and you are done.

Usage for Broccoli.js

npm install --save broccoli-manifest

Use broccoli-manifest as your last filter in the Brocfile.js like this

var writeManifest = require('broccoli-manifest');


var completeTree = mergeTrees([appJs, appCss, publicFiles]);

module.exports = mergeTrees([completeTree, writeManifest(completeTree)]);


You can pass some options as the second argument to writeManifest:

writeManifest(completeTree, {
	appcacheFile: '/manifest.appcache', // Name of the generated appcache file - default value shown
	fallback: ['assets/is-online.json assets/offline.json'] // Lines to add to the FALLBACK section of the generated manifest

showCreateDate toggles the inclusion of a Date object or a random string in your manifest. If you want to hide the build date from customers, this is your setting.

Thanks to files can be filtered using regular expressions:

  excludePaths: ['index.html', new RegExp(/.\.map$/)],
  includePaths: ['']

External Files

var mergeTrees = require('broccoli-merge-trees');
var manifest = require('broccoli-manifest');

  all app.import statements go here

// Write a html5 manifest.appcache file with jquery external
var completeTree = app.toTree();
var manifestTree = manifest(completeTree)

module.exports = mergeTrees([completeTree, manifestTree]);

Upgrade your index.html

Add manifest="manifest.appcache" to your <html> tag. The extra <script> tag adds an eventlistener which automatically refreshes your page after a cache update.

Another approach is using this gist which loads all files stated in the manifest file.

<!DOCTYPE html>
<html manifest="manifest.appcache">
  <script type='text/javascript'>window.addEventListener('load',function(e){window.applicationCache.addEventListener('updateready',function(e){if (window.applicationCache.status==window.applicationCache.UPDATEREADY){window.applicationCache.swapCache();window.location.reload();}},false);},false);</script>