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 请求。