一文读懂什么是 PWA（Progressive Web App）

目录

1. 概念

2. 特性

3. 功能

4. 优势与劣势

5. 发展

---

1. 概念

PWA 是 Google 于 2016 年提出的概念，于 2017 年正式落地，于 2018 年迎来重大突破，全球顶级的浏览器厂商，Google、Microsoft、Apple 已经全数宣布支持 PWA 技术。

PWA 全称为 Progressive Web App，中文译为渐进式 Web APP，其目的是通过各种 Web 技术实现与原生 App 相近的用户体验。

纵观现有 Web 应用与原生应用的对比差距，如离线缓存、沉浸式体验等等，可以通过已经实现的 Web 技术去弥补这些差距，最终达到与原生应用相近的用户体验效果。

2. 特性

 安全可靠

使用 Service Work 技术实现即时下载，当用户打开应用后，页面资源的加载不再完全依赖于网络，而是使用 Service Work 缓存离线包存在本地，确保为用户提供即时可靠的体验。

  访问更快

首屏可以部署在服务端，节省网页请求时间，加载速度更快，拥有更平滑的动态效果和快速的页面响应。

响应式界面支持各种类型的终端和屏幕。

  沉浸式体验

在支持 PWA 的浏览器和手机应用上可以直接将 Web 应用添加到用户的主屏幕上，无需从应用商店下载安装。从主屏幕上打开应用之后，提供沉浸式的全屏幕体验。

3. 功能

■ 手机应用配置(Web App Manifest)

可以通过 manifest.json 文件配置，使得可以直接添加到手机的桌面上。

■ 离线加载与缓存(Service Worker + Cache API )

可以通过 Service Worker + HTTPS +Cache Api + indexedDB 等一系列 Web 技术实现离线加载和缓存。

■ 消息推动与通知(Push & Notification )

实现实时的消息推送与通知

■ 数据及时更新(Background Sync )

后台同步，数据及时更新

4. 优势与劣势

  优势

1、超简单的安装和下载。

以谷歌发布的 squoosh.app 为例。

PC 桌面版：

方式1：在浏览器输入并打开 https://squoosh.app 之后。可以点击右上角【Install】进行安装。

方式2：可以点击右上角三个点的图标，然后选择【安装Squoosh】进行安装。

安装之后就可以在桌面看到快捷方式的图标，直接打开就可以拥有与原生应用媲美的沉浸式体验。

手机移动版：

① 首先在浏览器中输入并打开网址“http://squoosh.app”。然后点击向上的图标，在弹出的选项中选择“添加到主屏幕”。

② 在弹出的【添加到主屏幕】编辑对话框中可以修改应用名称。

③ 点击完成或者【添加】就可以将应用添加到主屏幕，下次直接打开就可以使用了。

2、发布迭代不需要第三方平台审核。

我们都知道发布一个苹果应用是需要提交 App Store 商店进行审核，通过了方可发布成功的。安卓应用也是一样。并且更新迭代版本的时候也需要审核，还需要提交一些功能说明，图片等资料。但是网页版的应用就完全不需要这个审核过程，直接部署服务器就可以使用。

3、渐进式

现有的 Web 项目可以通过 PWA 的几个核心技术点一步步转型成一个完整的 PWA 应用。

  劣势

1、因为推出的时间不长，所以现有浏览器的支持还不够全面， 不是每一款浏览器都能100%的支持所有的 PWA 特性。

2、对于底层硬件的调用还是需要依赖第三方库才能实现（如打开摄像头，实现语言功能等等）。

3、PWA 现在还没那么火，国内一些手机生产商在 Android 系统上做了手脚，似乎屏蔽了 PWA, 但是等 PWA 真正流行起来之后，相信这个问题就不会存在了。

5. 发展

 谷歌

基于 Chromium 开发的浏览器 Chrome 和 Opera 已经完全支持 PWA 。

这里说一下 Chromium 和 Chrome 的区别。

Chromium 是谷歌的开源项目，由开源社区去维护。拥有众多的版本包括Windows、Mac、Linux。国内所有的 “双核浏览器”，都是基于 Chromium 开发的，而我们下载的 Chromium 浏览器是其源码未经修改的直接编译版本。

Chrome 是基于 Chromium 开发的，是闭源的，跨平台多端支持，特性更加丰富。

Google上线了两个新网站，web.dev 和 squoosh.app 都支持 PWA（ web.dev 是宣传和推广 PWA 的，解释了 PWA 的几个关键技术。squoosh.app 是一个图片压缩工具） 。

  微软

微软将 PWA 带到了 Windows 10。同时 Windows Edge（windows 10 之后微软推出的浏览器，比 IE更流畅、外观 UI 更舒适） 也支持 PWA。

  IOS

从 iOS 11.3 开始，iOS 正式开始支持 PWA，可以将它放在苹果手机主屏。

  Android

Twitter 和 Flipboard 都推出了 PWA，可以将它放在安卓手机主屏。

 国内

国内支持 PWA 的应用有微博、淘宝、豆瓣和饿了么。

随着越来越多的浏览器大厂对 PWA 做出了支持和优化，PWA 的时代已经不远了。

---

   总结   

PWA（‌Progressive Web App）‌是一种基于Web技术的应用开发模式，‌它结合了Web应用和原生应用的优点，‌提供类似原生应用的用户体验。‌

PWA使用HTML、‌CSS和JavaScript等Web标准技术栈进行开发，‌利用现代浏览器的功能来增强Web应用的性能和互动性。‌它的核心理念是渐进增强，‌即应用程序的功能和体验可以根据设备和浏览器的支持程度逐步提升。‌PWA的技术原理主要包括响应式布局、‌服务工作线程、‌应用清单、‌推送通知等。‌这些技术使得PWA能够在不同设备上提供类似原生应用的体验，‌同时保持开发的灵活性和成本效益。‌

• 响应式布局：‌PWA应用的界面可以根据不同设备的屏幕大小和方向进行自适应布局，‌保证在各种终端上都能获得良好的用户体验。‌
• 服务工作线程：‌作为PWA的核心技术之一，‌服务工作线程在后台运行，‌可以拦截和处理网络请求、‌缓存数据以及实现离线访问等功能，‌增强了应用的可靠性和可用性。‌
• 应用清单：‌通过Web App Manifest文件，‌PWA可以定义其名称、‌图标、‌启动方式等元信息，‌允许用户将PWA添加到主屏幕，‌以类似原生应用的方式访问。‌
• 推送通知：‌PWA可以利用浏览器的推送通知功能，‌向用户发送实时通知消息，‌与用户进行互动。‌

此外，‌PWA还具有跨平台兼容性，‌可以在不同的操作系统和设备上运行，‌无需为每个平台开发特定的独立代码库，‌从而降低了开发成本。‌例如，‌Microsoft Edge浏览器支持PWA，‌使得开发者能够利用单个代码库同时开发网站、‌移动应用和桌面应用。‌

随着浏览器厂商对PWA的支持和优化，‌越来越多的网站开始采用PWA技术，‌为用户提供更加丰富和高效的Web应用体验。‌PWA的出现，‌标志着Web应用的发展进入了一个新的阶段，‌为用户提供了更加快速、‌可靠和互动的Web应用体验

---

参考资料

穿上App外衣，保持Web灵魂——PWA温故-腾讯云开发者社区-腾讯云

PWA，现代前端必会的黑科技 - 知乎 | PWA技术理论+实战全解析 - 知乎

渐进式 Web 应用程序 (PWA)：彻底改变移动设备的 Web 开发 - 知乎

PWA初探总结 - CSDN | 认识 PWA - 简书 | 渐进式Web应用程序(PWA) - 百家