Workbox是一组库和Node模块，可轻松缓存资产并充分利用用于构建Progressive Web Apps的功能。

1.安装

1.直接cdn引入

   importScripts ('https://storage.googleapis.com/workbox-cdn/releases/5.1.2/workbox-sw.js' );//谷歌文档

从cdn引入workbox就可以使用workbox。

2.通过npm安装

import {precaching} from 'workbox-precaching';import {registerRoute} from 'workbox-routing';import {BackgroundSyncPlugin} from 'workbox-background-sync';

可以借助打包工具webpack或者rollup

2.预缓存文件

网址项目里很多资源是可以长期储存的，比如像字体，样式等。

import {precacheAndRoute} from 'workbox-precaching';precacheAndRoute([  {url: '/index.html', revision: '383676' },  {url: '/styles/app.0c9a31.css', revision: null},  {url: '/scripts/app.0d5770.js', revision: null},]);

如果手动去配置这些东西是很繁琐的，版本很难管理，而且需要一个个去填写。

workbox支持利用cli构建它。

npm install workbox-cli -gworbox wizard 可以生成配置文件workbox generateSW workbox-config.js 可以配置文件生成对于的js文件执行完命令可以看到已经自动生成了代码，当有静态文件需要变化的时候再运行一次更新代码就可以了。也可以使用  --injectManifest 在已有的sw里插入代码import {precacheAndRoute} from 'workbox-precaching';precacheAndRoute(self.__WB_MANIFEST);上述代码会被替换掉

或者直接用gulp/node去构建

npm install workbox-build --save-dev 安装//等到内容插入 src/sw.jsimport {precacheAndRoute} from 'workbox-precaching';precacheAndRoute(self.__WB_MANIFEST);//config.jsconst workboxBuild = require('workbox-build');//在bulid后面生成const buildSW = () => {  //返回一个promise  return workboxBuild.injectManifest({    swSrc: 'src/sw.js',    swDest: 'build/sw.js',    globDirectory: 'build',    globPatterns: [      '**/*.{js,css,html,png}',    ]  }).then(({count, size, warnings}) => {    //打印错误    warnings.forEach(console.warn);    console.log(`${count} files will be precached, totaling ${size} bytes.`);  });}buildSW();

3.workbox配置

使用各种Workbox API时，您会注意到一些缓存是自动创建的。

每个缓存名称由三部分信息组成：--

我们可以设置缓存的名字

import {setCacheNameDetails} from 'workbox-core';setCacheNameDetails({  prefix: 'my-app',  suffix: 'v1'});//根据策略的缓存可以自定义名称import {registerRoute} from 'workbox-routing';import {CacheFirst} from 'workbox-strategies';registerRoute(  ***  new CacheFirst({    cacheName: '***',  }));

debuig

//当通过workbox-sw引入workbox(全局变量)//开发环境workbox.setConfig({ debug: true });// 生产环境workbox.setConfig({ debug: false });//默认 本地测试localhost debug是开启的 而在https下 是自动关闭的//另外用node构建的话 debug是跟着node变化的//webpackconst webpack = require("webpack");module.exports = {  plugins: [    new webpack.DefinePlugin({      'process.env.NODE_ENV': JSON.stringify('production'),    }),  ],//rollupimport replace from 'rollup-plugin-replace';export default {  plugins: [    replace({      'process.env.NODE_ENV': JSON.stringify('production'),    }),  ],  }

往期回顾：

给你代码：关于npm的坑

扩展的上传与更新｜给你代码

你是否像我一样排斥Composer？｜给你代码