核心插件
sw-precache-webpack-plugin 用于缓存sw数据
PWA模板-VUE
安装Vue模板
1 | npm install -g vue-cli |
这种运行方式在Application里的Service Workers是看不到的，
主要是因为在service-worker-dev.js进行了重置之前所有SW注册行为
我们可以通过1
npm run build
打包出生产静态的文件，然后打开dist目录，通过http-server来运行index.html这个静态文件，
值得注意的是：
只有在localhost和127.0.0.1这种本地地址才能运行SW，否则的话就只能放到https服务器下
此时Application里的Service Workers就可以看到运行状态了
Bug集
sw是采用的fetch拉取数据，所以如果静态文件和M页不是一个域名下(cdn)，会出现跨域问题，所以需要打开CORS
前提：service-workers里的路径一定要是cdn的路径，否则无效
–通过配置来增加路径webpack内new SWPrecacheWebpackPlugin();
注意：开启CORS的域名一定要打开
如下：img.58cdn.com.cn并未开启CORS1
Failed to load https://img.58cdn.com.cn/zhuanzhuan/zzembed/zzfeedback/static/css/app.52e43ae271c8261244571e6781383b89.css?_sw-precache=52e43ae271c8261244571e6781383b89: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'https://m.zhuanzhuan.58.com' is therefore not allowed access. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.
参考文献
PWA和普通cache对比
1、改写默认行为。
例如，浏览器默认在刷新时，会对所有资源都重新发起请求，即使缓存还是有效期内，而使用了SW，
就可以改写这个行为，直接返回缓存。
2、缓存和更新并存。
要让网页离线使用，就需要整站使用长缓存，包括HTML。而HTML使用了长缓存，
就无法及时更新（浏览器没有开放接口直接删除某个html缓存）。而使用SW就可以，每次先使用缓存部分，
然后再发起SW js的请求，这个请求我们可以实施变更，修改HTML版本，重新缓存一份。
那么用户下次打开就可以看到新版本了。
3、无侵入式。
无侵入式版本控制。最优的版本控制，一般是HTML中记录所有js css的文件名（HASH），然后按需发起请求。
每个资源都长缓存。而这个过程，就需要改变了项目结构，至少多一个js或者一段js控制版本号，
发起请求时还需要url中注入冬天的文件名。使用了SW，就可以把这部分非业务逻辑整合到sw js中。
无侵入式请求统计。例如缓存比例统计、图片404统计。
4、额外缓存。
HTTP缓存空间有限，容易被冲掉。虽然部分浏览器实现SW的存储也有淘汰机制，但多一层缓存，
命中的概率就要更高了。
5、离线处理。
当监测到离线，而且又没有缓存某个图片时，可以做特殊处理，返回离线的提示。
又或者做一个纯前端的404/断网页面。类似Chrome的小恐龙页面。
6、预加载资源。
这个类似prefetch标签。
7、前置处理。
例如校验html/JS是否被运营商劫持？js文件到了UI进程执行后，就无法删除恶意代码，
而在SW中，我们可以当作文本一样，轻松解决。当然，在HTTPS环境下出现劫持的概率是极低的。
HTTP缓存
设计一个无懈可击的浏览器缓存方案
【第1250期】彻底理解浏览器的缓存机制
offline-plugin
官方文档
offline-plugin service-worker webpack插件使用记录
使用offline-plugin搭配webpack轻松实现PWA
PWA 系列 – Fetch 技术
Service Worker 全面进阶