一文读懂什么是 PWA（渐进式 Web App）

一文读懂什么是 PWA（渐进式 Web App）

引用

CSDN

1.

https://blog.csdn.net/sunyctf/article/details/136003062

PWA（渐进式Web应用）是一种结合了Web应用和原生应用优点的开发模式，它通过一系列现代Web技术实现与原生应用相近的用户体验。本文将从概念、特性、功能、优势与劣势以及发展现状等多个维度，全面介绍PWA的相关知识。

1. 概念

PWA是Google于2016年提出的概念，于2017年正式落地，并在2018年迎来重大突破。全球顶级的浏览器厂商，包括Google、Microsoft和Apple，均已宣布支持PWA技术。PWA的全称为Progressive Web App，中文译为渐进式Web应用，其目的是通过各种Web技术实现与原生应用相近的用户体验。通过弥补现有Web应用与原生应用之间的差距，如离线缓存和沉浸式体验等，最终达到与原生应用相近的用户体验效果。

2. 特性

安全可靠

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

访问更快

首屏可以部署在服务端，节省网页请求时间，加载速度更快，拥有更平滑的动态效果和快速的页面响应。响应式界面支持各种类型的终端和屏幕。

沉浸式体验

在支持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应用体验。