使用workbox生成SW脚本的gulpfile配置。

gulpfile.js

gulp.task('sw', ['copy', 'css', 'js', 'img'], () => {
  return wbBuild.generateSW({
    globDirectory: './www/',
    swDest: './optimized/sw.js',
    globPatterns: ["**/*.{css,jpg,png,js,html,shtml}"],
    ignoreUrlParametersMatching: [/(v|t)/],
    skipWaiting: true,
    clientsClaim: true,
    runtimeCaching: [{
      urlPattern : 'https://API-Url/(.*)',
      handler: 'networkFirst',
      options: {
        cacheableResponse: {
          statuses: [0, 200]
        }
      }
    },
    {
      urlPattern : 'https://vendor-Url/(.*)',
      handler: 'cacheFirst',
      options: {
        cacheableResponse: {
          statuses: [0, 200]
        }
      }
    },
    {
      urlPattern : 'https://CDN-Url/(.*)',
      handler: 'cacheFirst',
      options: {
        cacheableResponse: {
          statuses: [0, 200]
        }
      }
    }],
    directoryIndex: 'index.shtml',
    maximumFileSizeToCacheInBytes: 3000000,
    globIgnores: ['sw.js']
  })
  .then(() => {
    console.log('Service worker generated.');
  })
  .catch((err) => {
    console.log('[ERROR] This happened: ' + err);
  });
})