PWA常见的缓存策略

技术背景

你们都知道H5相比原生应用，不管是加载速度和用户体验都会差不少,具体缘由有以下几点：

1. 留白时间过长。移动端网络很是不稳定，常常会出现弱网环境（如：电梯，地铁，大山里面），这样会致使资源加载速度很是慢，留白时间相对原生会慢不少。
2. 没法离线访问。由于资源都在线上服务器,每次访问H5的页面强烈依赖网络，原生由于资源都在应用包里面,就算断网也会给一个相对友好的展现界面和用户提醒。
3. 没法全屏访问。H5绝大部分都是跟浏览打交道，可是各大浏览器厂商都会有一个讨厌的头部和一个讨厌的尾部，致使用户的可视区域大大被压缩。原生你们都知道可视区域随意控制。
4. 没法消息推送。
5. 没有本身的启动图标，每次都须要输入网址或者依靠搜索引擎引流。

这个时候拯救H5的英雄就出现了，他就是PWA。

什么是PWA

PWA全称是: Progressive Web Apps(渐进式网页应用)。这是 2016 年，Google I/O 大会上提出一个下一代web应用的概念。这并非描述一个技术，而是一些技术的合集,能让你在使用 Web的时候感受像是在使用 APP。

PWA能干什么

• 消息推送
• 主屏ICON，全屏访问
• 离线存储

是否是跟原生就很像了？本文要写的主要是离线存储也就是缓存这一块的内容，消息推送和主屏幕ICON之后再讲。

pwa缓存的原理

为何能实现缓存或者叫离线存储？核心就是利用浏览器service-worker另启一个线程，这个线程负责去监听全部https请求（注意是https）,当发现某些资源是须要缓存下来的他会把资源拉取到浏览器本地，访问的时候拦截请求，不走网络请求，直接读取本地资源。这样资源至关于都是用户本地的资源,响应速度确定飞快，还有就是资源都在用户浏览器里面，就算断了网,资源也都是能正常访问。

pwa缓存到底有多快

下面是现有PLUS会员业务中的同一个页面pwa缓存和非pwa缓存加载资源的对比图：

下图是3G网络不用PWA缓存的资源请求时间：

下图是3G网络采用PWA缓存的资源请求时间：

下图是4G网络不用PWA缓存的资源请求时间：

下图是4G网络采用PWA缓存的资源请求时间：

采用PWA缓存和不采用PWA缓存数据对比:

	3G不用PWA缓存	3G采用PWA缓存	4G不采用PWA缓存	4G采用PWA缓存
页面加载时间	4.16s	989ms	1.8s	975ms
单个资源 平均加载时间	1s左右	60ms左右	550ms左右	60ms左右

从上面数据能够看出来，pwa缓存的提速效果是很是明显，能保证你的页面在弱网环境下秒开，资源大部分都是在50毫秒左右的的响应时间。咱们在safari浏览器测试的响应时间更加快速，基本都是在15ms左右!!!

pwa缓存的缓存策略

上面说到某些资源是须要缓存。缓存多长时间？是永远走缓存仍是永远走网络？仍是一些特定的缓存策略的？下面介绍常见用的几种缓存策略：

cache-first

Cache-First策略会在有缓存的时候返回缓存，没有缓存才会去请求而且把请求结果缓存。也就是说，第一次页面加载跟普通页面加载没有任何区别的，第二次访问的资源是直接走了本地缓存数据的。

无缓存加载流程图

有缓存加载流程图

这种策略适用于:css,js,背景图片，这种实时变化频率比较低的静态资源比较适合！这种策略有一种很差的地方就是，缓存可能一只存在你得浏览器，若是发现某些文件须要替换，这个时候就依赖发版要不缓存就一直存在。有什么好的办法吗？配置缓存时间能够避免这种问题，定一个时间更新一次缓存。好比一个小时，或者三个小时，也能够经过缓存某些变更频率比较低接口的数据，这个时间主要看本身的业务需求了。（PS：新的版本改为Service-Worker一天会主动拉新一次。）

network-first

network-first 是一个比较复杂的策略。资源优先走网络，成功之后会把资源添加到缓存里面，当发现网失败就会回退读取缓存。这里面有一个点就是，多长时间算网络请求失败？这时候就须要配置一个超时时间，若是不配置回退缓存的时间就会比较长。这个时间根据自身项目而定。

这种策略适用于：频繁更新的资源，好比天气的数据，文章,游戏排行榜的接口资源，正常状况下跟普通网页没有任何区别，当出现弱网或者断网资源响应时间比较长用户体验比价差的状况下给的一种资源回退策略，这种方式能够提升弱网环境下的用户体验。

stale-while-revalidate

这种策略比较接近cache-first,他们的区别在于他会先走缓存，走完缓存之后它会发出请求，请求的结果会用来更新缓存，也就是说你的下一次访问的若是时间足够请求返回的话，你就能拿到最新的数据了。

适合于:频繁更新最新版本并不是必需的资源，html,头像。

cache-only

只会去缓存里拿数据，缓存没有就失败了。

这种很是简单应用场景可能就是一万年不变的静态页面可能比较适合。

network-only

network-only 只请求线上，不读写缓存。

这种策略的应用场景很是少，特殊状况下偶尔能用用吧，当发现线上的缓存失控，在这种紧急状况下所有不走缓存，所有走网络一种紧急应对状况吧。

以上就是经常使用的五中缓存策略,不一样的场景对应不一样的缓存策略，如何去编写这些策略或者如何去生成这些策略会在接下来的文章再去详解

pwa的将来

如今国内的浏览器厂商最新的版本都支持PWA的service-worker 缓存这一块，之前吐槽的IOS不会支持，可是在最新版本的IOS11.3也支持service-worker了。

pwa是一堆技术的合集，app shell,消息推送，单页式的应用都有包含，缓存只是其中的一部分，还有不少技术须要咱们去探索去实践，相信这项技术会给H5带来更加好的将来。