PWA和Service Worker

2019 / 10 / 28

PWA是什么

一直想学PWA,后来真正学的时候,我发现自己对它原本的理解和实际含义偏差还挺大的。

PWA全称Progressive Web Application,翻译一下就是渐进式Web应用,这个并不是一个用来写应用的框架,也不是什么强化网页的技术,而是一些理念,遵循这些理念的应用将拥有非常友好的用户体验,同时也会更加安全,高性能。

PWA Check List 中赘述了成为PWA的条件,比如下边这些是PWA的一些基础的check list。

Site is served over HTTPS
Pages are responsive on tablets & mobile devices
All app URLs load while offline
Metadata provided for Add to Home screen
First load fast even on 3G
Site works cross-browser
Page transitions don't feel like they block on the network
Each page has a URL

这些作为基础的check项覆盖了安全,跨设备,断网环境,跨端,页面性能和页面可追溯等。而后会有性能,缓存,消息推送,便捷性其他方便的check项。

为什么是渐进式而不是一次实现PWA的要求呢,首先是一次完成一个PWA然后上线,这件事的成本很高,所以对于开发者,要做一个这种应用程序,最好采用渐进的方式,但是有这个Progressive意识还是很有必要的。另外一点是支撑这种应用程序实现的技术并不是非常的成熟,需要厂商们慢慢的去支持,所以这种应用程序也需要做到向下兼容,总归都是做好体验。

PWA可以理解为体验非常健全的web站点,甚至能媲美原生App,同时也具有原生App没有的能力,比如可移植性高,浏览便捷,开发的时候迭代方便等等。

PWA和Service Workder

PWA作为一种先进的应用设计理念,需要各种技术来支撑,而这些技术当中最重要的当属Service Workder。

网页和App一个非常大的区别就是网页的资源是用到什么加载什么,而我们进行网页优化的时候很多时候做的事情是在

尽量降级一个页面网络请求成本从而缩短页面加载资源的时间并降低用户可感知的时延。

当然降低可感知时延不止在网络层面,还有渲染效率,代码质量和产品效果。而减少资源请求的一个非常好的方式就是把资源存起来,就是所谓的离线缓存。

那Service Workder是做什么的呢,准确的说Service Worker和离线缓存没什么关系,他是一条独立于网页线程的独立线程,拥有自己的service context,被安装后永久存在,除非手动卸载,并且可以拦截请求,推送消息,以及可编程。拥有这些能力之后就可以非常方便的做离线缓存,消息推送等事情了。

Service Workder挂在navigator对象上,可以通过navigator.serviceWorkder调用,而且他的兼容性目前已经很不错了,IE就不说了,Edge, Chrome, Firefox, 安卓和IOS11.3 以上就能进行较好的支持。

离线储存

其实弱网或者断网环境对用户使用web产品的体验影响非常大,明智的使用缓存和其他存储技术可以显著的改善用户体验。

上边说到Service Worker的能力是提供一个可编程的线程,真正的离线缓存通常需要借助Cache API和IndexDB的能力。

IndexDB和Cache API都是可以在Service Workder中使用的,而且他们通常是配合使用的,顾名思义,cache是用来做缓存的,DB是用来做数据库的,所以IndexDB通常存储一些不容易变化的结构化数据,而cache用来存储一些静态资源,如css, js, html和image。

除了IndexDB和Cache API浏览器也提供了一些其他的前端存储的能力,web storage包括localstorage和sessionstorage都是同步的,在Service Workder中用不了,cookie本身是用来解决无状态的http而衍生出来的一个工具,通常是用来做登录的,当然也是同步的,不适合在service worker中使用。除此之外File API和Web SQL目前仍然未受到较多的厂商提供支持,所以并不推荐使用。

除了使用什么存储API之外,还有一个问题是这些存储API能存多少东西。如果未来很多网页都在离线存储,那么很容易出现网页占用过多的磁盘的问题,因此不同浏览器厂商对此进行了不同的限制。

在大量使用存储的时候,超过一定的限制之后浏览器会提示用户。而溢出浏览器允许的最大量之后,UA(User Agent,就是浏览器)大多数浏览器会采取尽力而为的策略,就是说最小的减少对用户体验的影响,比如优先删除长期不使用的数据。

参考文章

https://lavas.baidu.com/ 非常适合阅读的一个文档,语言表达,内容可靠性和完整性都做的非常好,强烈推荐看看。

嗨,请先 登录

加载中...
(๑>ω<๑) 又是元气满满的一天哟