PWA 之 Service Worker 离线缓存

发布:elantion 日期:2019-05-31 阅读:294 评论:0

之前说过 http 的头部缓存,可以大大减少文件的下载大小,大多数文件只需发送 http 验证一下文件是否陈旧即可。但即使是这样,在网络环境并不良好的情况下,特别是移动网络,经常发生http断联或者速度太慢的问题,用户往往打开一个页面耗时相当长,甚至打不开,加上用户的忍耐度极低,流量很容易流失。所以,这次我来介绍 Service Worker 离线缓存功能,别说网络不好,即使是断网了依然能打开页面。

什么是 Service worker ?

JavaScript 的执行是单线程不阻塞的,一个页面里无论加载了多少个js,对于浏览器来说只有一个 JavaScript 运行线程。如果某些代码执行相当耗时,那么页面就可能会出现白屏、卡顿甚至无法操作的情况。为此,浏览器就研发出 Service workder,允许浏览器加载多个线程,我们就可以把耗时的运算丢给 Service worker 去做,避免阻塞主线程。Service worker 完全独立于网页,它不能直接操作 DOM,它常于用后台同步信息、处理请求等,提供辅助功能。

diagram1

ServiceWorker 的生命周期

下面简单介绍 ServiceWorker 的生命周期,不深入研究。

初始化

Service worker 从主线程中分发,然后进行注册 -> 安装 -> 激活,如下图所示。

diagram2

一个网站可以有多个ServiceWorker,但为了方便,一般只下发一个,多个网页之间共享同一个ServiceWorker。

更新

Service worker 的执行文件是不会进行缓存的,页面每次打开都会向服务器更新,无视ServiceWorker执行文件的缓存头部信息。当有新的ServiceWorker需要更新时,它也会正常地注册 -> 安装,但不会马上激活,它会等待,等下所有页面都不需旧的ServiceWorker时,旧的ServiceWorker就会被丢弃,下次打开网站新的ServiceWorker就会激活并替代旧的ServiceWorker运行。

ServiceWorker 离线缓存

ServiceWorker的一个重要特性就是它可以拦截所有的请求(所以为了安全,它只运行在https协议上),结合 Cache API,你可以非常灵活地缓存你想要缓存的所有内容。

ServiceWorker中间人角色

它的缓存机制是这样子的,当页面发送一个请求,获取js、css或图片等静态资源,它首先会被ServiceWorker拦截,当ServiceWorker发现缓存里已经有这个文件,它就直接返回给用户,不需要再向服务器获取。如果缓存里没有,则会向服务器获取,并缓存起来以备下次使用。除了静态资源,它还可以缓存服务器API接口中的数据,甚到可以篡改返回的结果。ServiceWorker充当着一个中间人的角色,处理网页与服务器之间的请求。

更新缓存

ServiceWorker通过Cache版本号来区分缓存,当Cache的版本号更新时,下次打开页面时才会使用新文件填充缓存。所以当更新服务器的静态资源之后,第一次使用的仍会是旧的文件,只有第二次重新打开页面时,新的Serviceworker接管,然后才会更新文件。为了避免旧版本文件请旧的服务器API,当服务器API需要同时更新时,必需做好版本的兼容。

优执与劣势

任何新技术都会伴随优势与劣势的到来,作为管理者需要根据需求,衡量得失后决定是否使用。

优势

1、离线优先,这个作为最核心的优点必须摆在第一位,这是Web追求原生体验的最重要一环。因为无论使用CDN、http2、缓存头部等等,无论如何优化,都无法避免网络的波动,有了离线优先,即使是在恶劣的网络环境,网站基本也能秒开。
2、减少请求,鉴于大部分文件都是从缓存读取,用户可以大大节省昂贵的4G流量,作为公司也能节省宽带的费用。
3、精确的缓存控制,由于ServiceWorker可以拦截所有的请求,开发者可以根据产品需求,通过JavaScript代码,可以精确缓存所有必要的内容。

劣势

1、罗辑复杂,在知识方面,开发者必须精通http协义、ServiceWorker、Cache对象、Promise语法;在开发方面,后端需要做API兼容,前端要维护离线缓存内容。
2、文件更新滞后,鉴于ServiceWorker的更新原理,离线优先的原则,新的内容只能从用户下次打开时更新。

总结

前端业界一直在追求『原生体验』,推出 PWA (Progressive Web App),努力追赶着原生应用。ServiceWorker离线缓存是其中一个重要的创新,弥补前端天生的缺陷,为用户提供更优秀的体验,期待下次为大家介绍让人兴奋的前端技术。