Vue笔记九：pwa技术在vue的使用（workbox/sw-precache）

提问 sw-precache是什么？ workbox又是什么？ web前端的各位同学可能或多或少听过pwa，听过service worker（后面简称为SW），也知道对应的生命周期。知道了这些api后，你还是不知道如何将pwa技术投入生产。它不仅仅是个玩具，它是一个“神器”，是用来拉近native和web app之间的差距。当我们做spa项目越做越大的时候，JS bundle会越来越大，单页面不能承载那么多的逻辑，我们可能会选择多个单页面（也就是多页面）。每次加载都会存在空白加载的情景，虽然性能优化上，我们能把这个时间减少到很少很少，但是没法完全把它“干掉”。pwa的service-worker技术很好地弥补这片“空白”。“app-shell”也就是web app中的应用壳将会缓存在浏览器端，让它的加载速度更加快速。而可变的内容则是异步加载。 历史背景 有很多文章把pwa技术和小程序技术放在一起比较。谷歌浏览器至于pwa，微信至于小程序，都是给网页应用提供了离线缓存静态资源文件的功能，动静分离，native的接口，这些都是给网页应用提供更优质的加载性能。但是小程序并没有BOM和DOM，意味着它对浏览器有着更深入的改造，它并非纯正意义上的网页应用，是对所有Web开发资源的一种限制。 相反，pwa则不一样。 安卓的支持 浏览器的兼容性 考虑到service worker是一个新的接口本身，肯定会存在兼容性问题。PWA的意思在于Progressive，也就是支持pwa的页面则使用SW的缓存机制，而不支持的页面使用原来的HTTP缓存机制。由于pwa是谷歌的“亲儿子”，所以它在新版本安卓的各大浏览器都有非常好的支持。详情我们可以参考lavas的兼容性报告 重点的重点当然是微信浏览器对pwa的支持情况，我们可以看到除了推送信息和支付接口之外基本已经实现支持（支付接口的支持应该是出于安全的考虑，以及和weixin-js-sdk重叠的原因，X5浏览器支持它只是时间的问题）。如今我们更关心的是关于SW-cache这一部分，换句话说，我们可以放心在安卓微信上使用SW-cache的技术。 安卓微信浏览器的支持情况 ios（苹果）的支持 《震惊！苹果向开发者低头？！！开始支持Service Worker》一文中讲述了苹果的开发工程师开始完成研发，并且在2017年底safari桌面技术预览版上已经实现了service worker的相关api，从In development的状态转移到Supported In Preview，这意味着service worker极有可能在IOS12得到支持（详情https://webkit.org/status），这也就意味着pwa的时代很快就会到来。 苹果safari已开始支持service worker sw-precache 和 workbox 我们知道vue-cli打造出来的pwa模版，使用的是sw-precache，而workbox是它的取代品。它们各自有一个webpack版的插件，分别是sw-precache-webpack-plugin和workbox-webpack-plugin。 结合Vue笔记八：多页面打包框架的多页面打包框架，我添加上precache的功能（以后计划替换成为workbox），实现多页面的service worker框架，github的地址是https://github.com/brandonxiang/mpa-pwa 我写了一个关于workbox在vue-webpack框架的脚手架，github的地址是https://github.com/brandonxiang/example-vue-workbox，大家可以参考一下。 它们之间的区别如下，可以说非常相似： 中文说明 workbox 中文说明 sw-precache 缓存的目录 globDirectory 缓存前缀 stripPrefix 缓存的静态文件类型 globPatterns 缓存的静态文件类型 staticFileGlobs sw文件路径 swDest sw文件名 filename 让sw立即接管网页 clientsClaim （相同） clientsClaim 激活的等待 skipWaiting （相同） skipWaiting 动态请求 runtimeCaching （相同） runtimeCaching sw-precache的主要开发者 jeffposnick 也是workbox的主要开发者，这说明了它们之间的关系，sw-precache是为了满足service worker的cache API中的静态资源文件的注册作用。而workbox是为了满足所有pwa的资源内容，可以看作一个“平台”。 workbox package workbox中已经支持很多方面的内容，当然，还有很多内容有待开发。 缓存机制 Service Worker的出现很大程度，改变了web app的格局，HTTP cache和SW cache有着天壤之别。这样的HTTP缓存机制没法弥补网页跳转带来的白屏间隙，SW cache由于优先缓存静态资源以及接口的机制，大大减少了网络状况差（甚至断网）带来的白屏现象。优先更新本地的同时，service worker会和后端进行一次通信，这次通信会告知静态资源是否被更改，在下次刷新的时候更改内容。 动态接口方面则会采用 runtimeCaching 进行交互，这部分也会进行动态内容的缓存，sw-toolbox的代码将会被引入你的sw.js中，它会利用正则表达式匹配到你请求的接口，进行接口缓存，当该接口出现内容变化时，SW会和后端进行一次通讯保证下一次加载的数据是最新数据，这样的更新机制分为5个类型。 networkFirst cacheFirst fastest cacheOnly networkOnly networkFirst是显示完成后，SW优先和后端通讯，看接口是否更新，下一次刷新则是采用最新数据内容。cacheFirst则是优先考虑缓存，如果缓存没有命中，才会去请求接口拿新数据，这个选型适合那种不经常更改的内容或者有别的更新机制。fastest则是两个同时进行，哪个快执行哪个。cacheOnly和networkOnly比较不常用。 安全性 如何利用/防御 Service Worker

本文章由javascript技术分享原创和收集