Missed the action at this year's Chrome Dev Summit? Catch up with our playlist on YouTube. Watch now.

Gulp

Use gulp and workbox-build to build a precaching service worker. Simply install the module then cut and paste the code sample.

1. Install Node.js.

2. Install the module with NPM.

npm install workbox-build --save-dev

3. Require workbox-build in your gulp gulpfile.js.

const wbBuild = require('workbox-build');

4. Also in gulpfile.js add a task to build a service worker.

gulp.task('bundle-sw', () => {
  return wbBuild.generateSW({
    globDirectory: './app/',
    swDest: './app/sw.js',
    globPatterns: ['**\/*.{html,js,css}'],
    globIgnores: ['admin.html'],
    templatedUrls: {
      '/shell': ['shell.hbs', 'main.css', 'shell.css'],
    },
  })
  .then(() => {
    console.log('Service worker generated.');
  })
  .catch((err) => {
    console.log('[ERROR] This happened: ' + err);
  });
})

Note: The gulp task for generating the service worker should always be run as the last step in each build. This ensures that your service worker contains any changes made during development.