1.PWA背景

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

Native APP：

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

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 人正在系统学习中