PWA初体验

最新推荐文章于 2025-08-13 16:29:18 发布

转载最新推荐文章于 2025-08-13 16:29:18 发布 · 153 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://segmentfault.com/a/1190000013156728

文章标签：

#运维

PWA简介

PWA全称为progessive web app译为渐进式网络应用。
虽然他的实际还是网页但是它拥有与原生app类似的功能。
依靠PWA技术可以做到不需要安装包而实现在离线状态下快速加载响应，将自定义图标添加到主屏幕和发送相关推送功能，改善用户体验。

PWA特点

快速：通过service-worker Api，无论什么网速下第二次进入页面时都能迅速完成加载，流畅读取数据，给出响应。配套使用cache对象，在chrome下最多可以缓存6%的磁盘空间，比localstorage可存储空间大得多。
集成：用户可以不需要通过搜索或者输入url来找到网页，而是集成到主屏幕的自定义图标上，并且可以向原生App那样单独存在任务列表。
有吸引力: PWA的web push可以实现网络推送通知功能，吸引并留住用户。

构成PWA文件

manifest.json -- 网络应用清单
- manifest是一个向浏览器暴露web应用名字、icon的url的应用程序清单，在添加到主屏或者推送消息通知时需要暴露这些信息。
  - 下面的图展示了manifest的基本组成，右图是在主屏幕看到的图标和名称
  - 在点击图标的时候会有一个背景色渐变进入到首页的过程，是在backgroud_color中定义的。

2.Service-worker.js

- service-worker就像是处于浏览器和网络之间的客户代理，可以拦截处理响应http请求，实现离线响应。
- 可以控制页面所发送网络请求的处理方式
- 它是运行在浏览器后台的脚本们不能直接操作dom
- 只能基于https否则service-worker不生效，但是我们在本地调试的时候用http://localhost或者http://127.0.0.1也是也可以的

service-worker生命周期

register阶段你需要在引用的js文件下面一段话，先判断service-worker是否可用，然后再去注册service-worker.js

2.install

- 我们可以在service-worker.js里面监听install事件，并且缓存一些不常变化的文件，那么当离线时就不是返回浏览器默认的离线的样子
- ![clipboard.png](/img/bV3g0D)
- 而是类似于这样的，我们把这些构成页面基本文件叫做Appshell，也就是说在install里面我们可以缓Appshell文件，这对于第二次浏览的用户来说是非常好的用户体验，适用于短暂时间内网络不好的情况，例如我们在坐地铁时，站与站之前网络就非常不好，用自定义的提醒页面能有效的挽留用户。

可以注意到代码用的是self.addEventListener而不是常用的，window.addEventListener,这是因为在service-worker中没有窗体的概念，worker开辟了一个新的现成，是在浏览器背后运行的，所以也就没有window对象。

3.activate

在activate阶段我们可以通过更改cacheName来更新缓存并且清除旧的缓存，使用的是caches.delete

4.fetch

给service-worker添加一个fetch的事件监听器，调用event的respondWith方法来劫持HTTP响应，然后匹配请求，选择从缓存中获取或者从网络中请求并把资源put进缓存中。
这里要注意fetch从网络请求返回的响应是Stream类型，只能使用一次，所以在return response之前需要clone一份响应来存储。
从network中可以清楚看到哪些文件从缓存中获取，哪些是被service-worker从网络中请求并存储的。

]

使用Lighthose评估PWA

Lighthose是开源的自动化工具，能评价PWA多方面的效果指标，给出改进的建议
在chrome的devToole Audits中，可以针对页面进行一连串测试，生成一个有关页面性能的报告。
报告不仅给出这个页面是否符合PWA的标准，还给出了网页表现，加载速度，web开发最佳实践，可阅读性方面的分数。

PWA一些阻碍

safari不支持。但是明确表示未来会支持。
添加到主屏幕的限制。
添加到主屏幕是需要浏览器拥有添加到桌面快捷方式的权限，但是这个权限在安装chrome的时候默认是没有的，也不会提示用户是否授权，只有用户自己在手机上设置-应用管理-桌面快捷方式。添加到主屏还有一个问题，弹出是否添加主屏幕的对话框，在chrome下只有首次加载或者手动清除浏览器缓存才会出现，用户如果点击取消，再不清除缓存的情况下，对话框就没有出现了。小米自带的浏览器，只要退出了浏览器再次加载就会提示弹框。不过这样也有问题，用户多次确认添加到主屏幕，就会有多个图标。
web push 推送消息功能目前还是很难实现。
因为web push走的是谷歌FCM通道，需要能接收到谷歌服务器的消息。Firebase 云信息传递 (FCM) 是一种跨平台消息传递解决方案，发送通知消息以再次吸引用户并留住他们；条件：需要一台能推送信息到Firebase的服务器，和能翻墙的用户；Uc浏览器在2017谷歌开发者大会上说最新版本可以接入推送功能，但是只有文档的快照，点击进去是信息流的接入文档，估计还没有正式投入生产。