PWA 渐进式网络应用 - 1 - 简介及调试方法

PWA 渐进式网络应用 - 1 - 简介及调试方法

1. 说明

PWA (Progressive Web App) 渐进式网络应用，它具有以下特点

• 可靠，即使在不稳定的网络环境下，也能瞬间加载并展现
• 体验，快速响应，平滑动画响应用户操作
• 粘性，体验上更接近原生应用，可以被添加到桌面

PWA 的渐进式体现在它的渐进式增强：即使在不兼容 WPA 的老旧浏览器上，它依然可以作为一个普通的网站来运行，只有在支持这些功能的浏览器中才会增强体验。

PWA 相对于普通的网站只是更近了一步，它为用户提供增强体验，”这些应用没有通过应用商店进行打包和部署，他们只是汲取了所需要的原生功能的网站而已”

PWA 能做到原生应用的体验不是指某一项技术，而是很多新技术的组合使用，对传统 web 进行改进，在安全、性能、体验上都有很大的提升

需要掌握技术

1. Service Workers 开启服务线程，拦截网络请求
2. Cache 用于离线缓存
3. manifest.json web 应用清单，添加程序到主屏幕
4. 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 - 推送通知

3. 参考资料

• PWA 各个浏览器接口实现情况
• ServiceWorker 相关技术英文文档
• Progressive Web Apps (PWA) 中文版
• Lavas PWA 文档
• Service Workers 技术博客