use sw-precache and sw-toolbar to build progressive web app

[billfeller]

use sw-precache to precache assets:

gulp.task('generate-service-worker', function(callback) {
  var path = require('path');
  var swPrecache = require('sw-precache');
  var rootDir = 'app';

  swPrecache.write(`${rootDir}/service-worker.js`), {
    staticFileGlobs: [rootDir + '/**/*.{js,html,css,png,jpg,gif,svg,eot,ttf,woff}'],
    stripPrefix: rootDir
  }, callback);
});

use runtimeCaching configuration for runtime caching:

PS: Using the runtimeCaching configuration option in sw-precache (see below) is a shortcut that accomplishes what you could do manually by importing sw-toolbox in your service worker and writing your own routing rules.

gulp.task('generate-service-worker', function(callback) {
  var path = require('path');
  var swPrecache = require('sw-precache');
  var rootDir = 'app';

  swPrecache.write(`${rootDir}/service-worker.js`), {
    staticFileGlobs: [rootDir + '/**/*.{js,html,css,png,jpg,gif,svg,eot,ttf,woff}'],
    stripPrefix: rootDir,
runtimeCaching: [{
            urlPattern: /**url regex**/,
            handler: 'fastest'
        },]
  }, callback);
});

Related Reading

1. Service Worker Libraries
2. Service Worker Precache
3. Service Worker Toolbox
4. sw-toolbox Tutorial: API