/ Polymer

Application Cache and setting up a gulp script for your webapp/Polymer Starter Kit

Part of the pain of manifests[1] is keeping them up to date with all the files generated.

  1. Download and install gulp-appcache (npm install --save gulp-appcache) - this will add the dependency of gulp-appcache to your package.json file so that later on you can get when you install the app somewhere else (npm install)

  2. Declare manifest inside the gulpfile.js

     //Add this declaration at the top of the gulpfile.js
     var manifest = require('gulp-appcache');
    
  3. Add the following task inside gulpfile.js

     //Generate a manifest file containing all the files in dist/
     gulp.task('manifest', function () {
    
     var manifestconfig = {
             relativePath: './', //relative path to manifest
             hash: true, //Append a hash to manifest file?
             preferOnline: true,
             network: ['http://*', '*'], //Network error
             filename: 'app.manifest',   //filename to generate
             exclude: 'app.manifest'     //What not to include
             };
    
     return gulp.src(['dist/**/*'])  //Globs all the files generated in the dist/ folder
               .pipe(manifest(manifestconfig)) //use the manifest option structure
               .pipe(gulp.dest('dist'));
     });
    
  4. Call the task inside the default task shortcut

     //Add the 'manifest' task to your 'default' task
     // Build Production Files, the Default Task
     gulp.task('default', ['clean'], function (cb) {
     runSequence(['copy', 'styles'],
                 'elements',
                 ['jshint', 'images', 'fonts', 'html'],
                 'vulcanize',
                 'manifest', //Add manifest AFTER vulcanize task
                 cb);
     });
    
  5. Modify app\index.html

     //Modify  the <html> line in index.html
     <html lang="" manifest="/app.manifest">
    

What should happen after you run the command gulp is that a file name app.manifest will be created and put in the root folder of the \dist folder of the Polymer Starter Kit.

The manifest attribute in the <html> tag tells the browser where to locate the manifest file should be located.

When a browser loads index.html it sees the app.manifest and starts caching all the resources as well.

If the next time it visits the website, it sees that the manifest file has not changed from the version it has stored, it will load from the cache.


  1. https://developer.mozilla.org/en-US/docs/Web/HTML/Using_the_application_cache ↩︎