PWA 渐进式网络应用 - 1 - 简介及调试方法
1. 说明
PWA (Progressive Web App) 渐进式网络应用,它具有以下特点
- 可靠,即使在不稳定的网络环境下,也能瞬间加载并展现
- 体验,快速响应,平滑动画响应用户操作
- 粘性,体验上更接近原生应用,可以被添加到桌面
PWA 的渐进式体现在它的渐进式增强:即使在不兼容 WPA 的老旧浏览器上,它依然可以作为一个普通的网站来运行,只有在支持这些功能的浏览器中才会增强体验。
PWA 相对于普通的网站只是更近了一步,它为用户提供增强体验,”这些应用没有通过应用商店进行打包和部署,他们只是汲取了所需要的原生功能的网站而已”
PWA 能做到原生应用的体验不是指某一项技术,而是很多新技术的组合使用,对传统 web 进行改进,在安全、性能、体验上都有很大的提升
需要掌握技术
Service Workers
开启服务线程,拦截网络请求Cache
用于离线缓存manifest.json
web 应用清单,添加程序到主屏幕Push Notification
推送通知
2. 调试方法
1. Chrome 浏览器
- 打开开发者工具 在
Application
面板中Service Workers
用来查看、调试Service Workers
也可以用来模拟发送通知 - 在
Application
面板下CacheStorage
中可以查看或者删除缓存
2. FireFox 浏览器
- 地址栏输入
about:debugging
进入调试页,选择worker
进行调试
相关文章
- PWA 渐进式网络应用 - 1 - 简介及调试方法
- PWA 渐进式网络应用 - 2 - 使用 Service Workers
- PWA 渐进式网络应用 - 3 - manifest.json 添加应用至桌面
- PWA 渐进式网络应用 - 4 - 推送通知