![c439c7d1dea3a1a7692bb29c301e0466.png](https://i-blog.csdnimg.cn/blog_migrate/0653889e0c1d2513f15914315eeaaff3.jpeg)
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?|给你代码