pwa简介

什么是pwa？

author: 果果 data：2020.04.10 21:58

pwa定义

Progressive Web App, 简称 PWA，翻译过来就是渐进式增强WEB应用，是Google 在2016年提出的概念，2017年落地的web技术。是提升 Web App 的体验的一种新方法，能给用户原生应用的体验

PWA 的主要特点

1、可靠 ： 即使在不稳定的网络环境下，也能瞬间加载并展现
2、体验 ： 快速响应，并且有平滑的动画响应用户的操作
3、粘性 ： 像设备上的原生应用，具有沉浸式的用户体验，用户可以添加到桌面

PWA 本身强调渐进式，并不要求一次性达到安全、性能和体验上的所有要求，开发者可以通过 PWA Checklist 查看现
有的特征。

为什么是渐进式

强调渐进式的改善站点体验主要有下面两个原因：

1、降低站点改造的代价，逐步支持各项新技术，不要一蹴而就
2、新技术标准的支持度还不完全，新技术的标准还未完全确定

PWA 改造的成本考虑

PWA 涉及到从安全、性能和体验等方面的优化，想要一次性支持所有特性，代价很高，老板也不一定愿意投入大量人力
来支持这项大工程。

所以，从改造的成本考虑，我们也建议采取渐进式的方式，可以考虑按照下面的步骤来改造：

第一步，应该是安全，将全站 HTTPS 化，因为这是 PWA 的基础，没有 HTTPS，就没有 Service Worker
第二步，应该是 Service Worker 来提升基础性能，离线提供静态文件，把用户首屏体验提升上来
第三步，App Manifest，这一步可以和第二步同时进行
后续，再考虑其他的特性，离线消息推送等

标准的支持度

PWA 采用的最新技术，当前浏览器还没有达到完全支持的程度，W3C 关于这些技术的标准也还在处于草稿状态，没有定
稿。

根据 Can I use 的统计（包括 PC 和 Mobile）
· App Manifest 的支持度达到 57.43%
· Service Worker 的支持度达到 72.82%
· Notifications API 的支持度达到 43.3%
· Push API 的支持度达到 72.39%
· Background Sync 暂未统计到，Chrome 49 以上均支持

随着 W3C 的标准的进一步完善，国内外各大浏览器都会逐步支持，拥抱标准。

最后总结一下，PWA 具有下面一些特性

· 渐进式 ： 适用于所有浏览器，因为它是以渐进式增强作为宗旨开发的
· 连接无关性 ： 能够借助 Service Worker 在离线或者网络较差的情况下正常访问
· 类似应用 ： 由于是在 App Shell 模型基础上开发，因为应具有 Native App 的交互和导航，给用户 Native App 的体验
· 持续更新 ： 始终是最新的，无版本和更新问题
· 安全 ： 通过 HTTPS 协议提供服务，防止窥探和确保内容不被篡改
· 可索引 ： 应用清单文件和 Service Worker 可以让搜索引擎索引到，从而将其识别为『应用』
· 粘性 ： 通过推送离线通知等，可以让用户回流
· 可安装 ： 用户可以添加常用的 webapp 到桌面，免去去应用商店下载的麻烦
· 可链接 ： 通过链接即可分享内容，无需下载安装

结语

技术交流，共同进步，欢迎fork和star！

仓库地址

参考链接