pwa 总结

概述

前几天了解并按照官方文档,成功实现了一个小型的 pwa demo,现在把总结记录下来,供以后开发时参考,相信对其他人也有用。

pwa

pwa 包括很多内容,我这里只介绍一部分,因为比如 Push&Notification 我并没有实际练手过。

参考资料:

Your First Progressive Web App

pwa 缓存策略

pwa app 的快速和离线体验是通过 service worker(SW) 来实现的。那到底它的缓存策略是怎样的呢?

首先,SW 有一个 CACHE_NAME,这个相当于 http 里面的 e-tag,一般通过这个来标记 SW 缓存的版本,我们通过 SW 判断 CACHE_NAME 是否发生改变,如果发生改变,我们能够自定义要进行的操作,比如删除旧版本缓存,发起 http 请求,缓存新版本。

然后,SW 不仅能缓存静态资源,还能够缓存接口返回的数据。SW 可以拦截 http 请求,然后判断缓存里面是否有这个接口缓存的数据,如果有就可以拿来使用,如果没有就再发起 http 请求来请求数据。

最后,每当我们发起 http 请求的时候,一般我们会用 SW 判断缓存里面有没有数据,有则立即使用数据,同时还可以发起 http 请求来获取最新数据;如果没有就直接发起 http 请求获取新数据。这一策略有2个好处:

  1. 假如我们用 SW 缓存了所有 http 请求的数据,那么就算是在离线情况下,app 也能够正常运行,造成了良好的离线体验
  2. 当 SW 的缓存命中的时候,会立即适用缓存里面的数据,没有等待时间,所以 app 会很快速
  3. 不需要担心版本问题。就算 SW 缓存的数据不是最新的,我们也可以在适用缓存的同时,发起 http 请求获取新数据,然后比较新数据和旧数据有没有改变,如果有则适用新数据(当然也可以直接适用新数据)。

SW 的生命周期

SW 有3个很重要的生命周期:

  1. install: 当 SW 下载完成之后,就会执行 install,安装 SW。注意,在这个阶段,SW 对页面是不起作用的,并不能代理 http 请求。
  2. active: 当 SW 安装完成之后,并不会立即适用,它会在下次页面刷新或者打开的时候才会适用,所以初次打开页面的时候 SW 并不能代理 http 请求。如果这个时候页面已经有老的 SW,那么老的 SW 仍然会继续运行。
  3. waiting: 在 install 和 active 之间 SW 是属于 waiting 阶段,这个严格来说并不是生命周期,因为它没有一个回调。

我们一般在 install 生命周期里面添加要缓存的内容,比如静态资源,http 路径等。然后在 active 生命周期内清除旧的缓存,最后监听 fetch 事件,代理 http 请求。

上一篇:使用回调接口实现ActiveX控件和它的容器程序的通讯


下一篇:领略TApplicationEvents的风采