1.PWA背景

为了说明白PWA，我们先看下面的两个概念：

Native APP：

1. 需要用户下载安装，哪怕使用一次
2. 需要升级，发布需要审核
3. 开发成本相对较高

Web网页：

1. 无需下载软件，直接浏览器浏览
2. 手机进入不方便，需要记录地址或者收藏网址
3. 没有网络就没有相应，不具备离线能力
4. 无法推送通知，无法调用底层接口

如何在二者之间寻找一个平衡呢就是PWA技术诞生的原因。

2.什么是PWA

PWA是一个渐进式web应用，随后加上App manifest和service worker实现PWA的安装和离线功能。目的是为了无限接近Native APP。

解决的问题：

1. 可以添加到主屏幕，利用manifest实现
2. 可以实现离线缓存，利用service worker实现
3. 可以发送通知，利用service worker实现

浏览器查看当前Service worker，输入命令chrome://serviceworker-internals/

3. 什么是Service worker

Service worker其实就是在浏览器和服务器之间的一层，拦截所有的请求进行处理，所以必须是https才可以。

离线缓存流程：

消息推送流程：

4. 与小程序的区别

小程序解决的问题：

产品层面：

1. 用户用完就走，没有任何负担
2. 降低开发门槛
3. 提高低频应用的用户触达率
4. 性能接近Native应用

PWA主要解决三大问题：离线、推送通知、桌面访问。

技术层面：

1. 小程序基于Web技术+Native，而PWA基于web技术，只是浏览器增加了service worker层
2. 小程序是混合运行方式，PWA是标准web运行方式
3. 小程序是多进程方式运行，PWA是浏览器定制
4. 小程序是WebView切换，PWA是H5标准方式
5. 小程序依赖微信，PWA依赖浏览器内核

一篇不错的文章：

https://blog.csdn.net/baidu_browser/article/details/64440238

文章知识点与官方知识档案匹配，可进一步学习相关知识Vue入门技能树首页概览22984 人正在系统学习中

来源：hanruikai