Vue笔记九:pwa技术在vue的使用(workbox/sw-precache)

作者 : 开心源码 本文共2531个字,预计阅读时间需要7分钟 发布时间: 2022-05-13 共170人阅读

提问

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的地址是 brandonxiang/mpa-pwa

我写了一个关于workbox在vue-webpack框架的脚手架,github的地址是 brandonxiang/example-vue-workbox,大家可以参考一下。

它们之间的区别如下,可以说非常类似:

中文说明workbox中文说明sw-precache
缓存的目录globDirectory缓存前缀stripPrefix
缓存的静态文件类型globPatterns缓存的静态文件类型staticFileGlobs
sw文件路径swDestsw文件名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
说明
1. 本站所有资源来源于用户上传和网络,如有侵权请邮件联系站长!
2. 分享目的仅供大家学习和交流,您必须在下载后24小时内删除!
3. 不得使用于非法商业用途,不得违反国家法律。否则后果自负!
4. 本站提供的源码、模板、插件等等其他资源,都不包含技术服务请大家谅解!
5. 如有链接无法下载、失效或广告,请联系管理员处理!
6. 本站资源售价只是摆设,本站源码仅提供给会员学习使用!
7. 如遇到加密压缩包,请使用360解压,如遇到无法解压的请联系管理员
开心源码网 » Vue笔记九:pwa技术在vue的使用(workbox/sw-precache)

发表回复