渐进式网页应用（PWA）：它究竟解决了Web应用的哪些问题？

悠悠 2022-12-10 07:11 611阅读 0赞

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNDc3NzIx_size_16_color_FFFFFF_t_70_pic_center]

Web 应用移动化是 Google 梦寐以求而又一直在发力的一件事，不过对于移动设备来说，前有本地 App，后有移动小程序，想要浏览器切入到移动端是相当困难的一件事，因为浏览器的运行性能是低于本地 App 的。

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNDc3NzIx_size_16_color_FFFFFF_t_70_pic_center 1]

为了构建原生且可离线工作的移动应用程序，可以采用的方式主要有两种：

*  使用移动操作系统原生编程语言的原生开发
 *  使用 React Native、Ionic、Xamarin 等技术的混合式移动开发

但是，这两种方式都需要通过Google或苹果应用商店发布应用程序。

这时候我们就会想起 PWA。它们的程序包都很小，可以像原生应用程序一样运行，可以部署到Web，还可以轻松地添加到手机桌面。

## 1. 什么是PWA ##

渐进式Web应用程序（Progressive Web Application，简称PWA）是使用常见的Web技术（HTML、CSS和JavaScript）构建的应用程序，其发行方式与其他Web应用程序一样，还拥有类似于原生的功能。

渐进式网页应用。根据字面意思，它就是“渐进式 +Web 应用”。对于 Web 应用很好理解了，就是目前我们普通的 Web 页面，所以 PWA 所支持的首先是一个 Web 页面。至于“渐进式”，就需要从下面两个方面来理解：

*  站在 Web 应用开发者来说，PWA 提供了一个渐进式的过渡方案，让普通站点逐步过渡到 Web 应用。采取渐进式可以降低站点改造的代价，使得站点逐步支持各项新技术，而不是一步到位。
 *  站在技术角度来说，PWA 技术也是一个渐进式的演化过程，在技术层面会一点点演进，比如逐渐提供更好的设备特性支持，不断优化更加流畅的动画效果，不断让页面的加载速度变得更快，不断实现本地应用的特性。

#### PWA 具备以下特征： ####

可靠：即使在互联网连接不佳或没有互联网的情况下，也可以快速加载，因为如果网页未能在3秒内加载完毕，则超过一半的用户就会离开网站。当没有互联网连接时，PWA 会使用 Service Worker 来消除对Web服务器的依赖。

快速：流畅的动画和交互效果，应用程序拥有原生的体验，没有笨拙的网页滚动。

参与感：应该尽可能向原生设备的用户体验靠近。这意味着至少能够全屏运行（如果添加到手机桌面），并处理通知（iOS尚不支持）。

**它是一套理念，渐进式增强 Web 的优势，并通过技术手段渐进式缩短和本地应用或者小程序的距离。**

## 2. Web 应用 VS 本地应用 ##

那相对于本地应用，Web 页面到底缺少了什么？

首先，Web 应用缺少离线使用能力，在离线或者在弱网环境下基本上是无法使用的。而用户需要的是沉浸式的体验，在离线或者弱网环境下能够流畅地使用是用户对一个应用的基本要求。

其次，Web 应用还缺少了消息推送的能力，因为作为一个 App 厂商，需要有将消息送达到应用的能力。

最后，Web 应用缺少一级入口，也就是将 Web 应用安装到桌面，在需要的时候直接从桌面打开 Web 应用，而不是每次都需要通过浏览器来打开。

针对以上 Web 缺陷，PWA 提出了两种解决方案：

*  通过引入 Service Worker 来试着解决离线存储和消息推送的问题，
 *  通过引入 manifest.json 来解决一级入口的问题。

## 3. Service Worker ##

Service Worker 是浏览器在后台运行的 JavaScript 文件。主要用作Web服务器的代理。这意味着，如果浏览器没有稳定的互联网连接，则由 Service Worker 处理请求。

它的主要思想是**在页面和网络之间增加一个拦截器，用来缓存和拦截请求。**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNDc3NzIx_size_16_color_FFFFFF_t_70]

因此，Service Worker 可以模仿Web服务器的操作，只不过数据全部来自缓存，因此可以在离线模式下工作。

Service Worker 还可用于创建不需要网页或用户互动的功能，例如推送通知。

Service Worker 还在不断地发展，将来它们可能拥有新功能，例如地理定位等，让用户享受原生的体验。

#### Service Worker 的设计思路 ####

Service Worker 的主要功能就是拦截请求和缓存资源，

##### 1.架构 #####

通过前面页面循环系统的分析，我们已经知道了 JavaScript 和页面渲染流水线的任务都是在页面主线程上执行的，如果一段 JavaScript 执行时间过久，那么就会阻塞主线程，使得渲染一帧的时间变长，从而让用户产生卡顿的感觉，这对用户来说体验是非常不好的。为了避免 JavaScript 过多占用页面主线程时长的情况，浏览器实现了 Web Worker 的功能。Web Worker 的目的是让 JavaScript 能够运行在页面主线程之外，不过由于 Web Worker 中是没有当前页面的 DOM 环境的，所以在 Web Worker 中只能执行一些和DOM 无关的 JavaScript 脚本，并通过 postMessage 方法将执行的结果返回给主线程。所以说在 Chrome 中， Web Worker 其实就是在渲染进程中开启的一个新线程，它的生命周期是和页面关联的。

“让其运行在主线程之外”就是 Service Worker 来自 Web Worker 的一个核心思想。不过 Web Worker 是临时的，每次 JavaScript 脚本执行完成之后都会退出，执行结果也不能保存下来，如果下次还有同样的操作，就还得重新来一遍。所以 Service Worker 需要在 Web Worker 的基础之上加上储存功能。

另外，由于 Service Worker 还需要会为多个页面提供服务，所以还不能把 Service Worker 和单个页面绑定起来。在目前的 Chrome 架构中，Service Worker 是运行在浏览器进程中的，因为浏览器进程生命周期是最长的，所以在浏览器的生命周期内，能够为所有的页面提供服务。

##### 2. 消息推送 #####

消息推送也是基于 Service Worker 来实现的。因为消息推送时，浏览器页面也许并没有启动，这时就需要 Service Worker 来接收服务器推送的消息，并将消息通过一定方式展示给用户。

##### 3. 安全 #####

基于 Web 应用的业务越来越多了，其安全问题是不可忽视的，所以在设计 Service Worker 之初，安全问题就被提上了日程。关于安全，其中最为核心的一条就是 HTTP。我们知道，HTTP 采用的是明文传输信息，存在被窃听、被篡改和被劫持的风险，在项目中使用 HTTP 来传输数据无疑是“裸奔”。

所以在设计之初，就考虑对 Service Worker 采用 HTTPS 协议，因为采用 HTTPS 的通信数据都是经过加密的，即便拦截了数据，也无法破解数据内容，而且 HTTPS 还有校验机制，通信双方很容易知道数据是否被篡改。

所以要使站点支持 Service Worker，首先必要的一步就是要将站点升级到 HTTPS。除了必须要使用 HTTPS，Service Worker 还需要同时支持 Web 页面默认的安全策略、储入同源策略、内容安全策略（CSP）等。

## 4. 数字胜于雄辩 ##

现在我们对PWA有了一定的了解，下面让我们来看一看为什么 PWA 在移动开发行业中有着举足轻重的作用。首先，我们来看一些统计数据（2019年11月）。

全球移动操作系统的市场份额：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNDc3NzIx_size_16_color_FFFFFF_t_70_pic_center 2]

Android 版本的市场份额：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNDc3NzIx_size_16_color_FFFFFF_t_70_pic_center 3]

iOS 版本的市场份额：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNDc3NzIx_size_16_color_FFFFFF_t_70_pic_center 4]

从这些图表可以看出，Android 占有全球移动操作系统75%以上的市场份额，而iOS则占有23%的份额。我们还可以看到，大约75%的 iOS 手机运行的版本为12.4，而超过70%的 Android 手机运行的版本高于Android 8。

这些统计信息背后的原因是，这些操作系统运行在功能强大的手机上。iOS 12.4于2019年发布，而 Android 8于2017年发布，这意味着运行这些操作系统的手机运行速度非常快。

甚至相对较旧或低端的手机也拥有约2GB的内存和 Snapdragon 处理器。这些手机加上Google Chrome 浏览器就可以运行 PWA，根本无需原生开发。

因此，近期的 iPhone / Android 手机都可以轻松运行 PWA，并提供与原生应用程序相差无几的用户体验。

这不包括需要大量图形功能和动画的应用程序（我们都知道 PWA 并非用于游戏开发）。

## 5. iOS和PWA ##

如上所述，苹果拥有超过20%的手机市场份额，如果我们只看欧洲和北美的话，这个份额会更高，而且这些手机对于 PWA 的支持进展非常缓慢。

虽然 iOS 11.3及更高版本支持 PWA，但这并不意味着 PWA 得到了完全的支持，与其他浏览器（尤其是Chrome）相比。在近期的版本中，尤其是在 iOS 13上，这种支持更好一些。

尽管 iOS 仍不支持推送通知和后台同步等重要的功能，但这是否意味着苹果反对 PWA？不，我不这么认为，我只是相信他们的策略还不能完全支持 PWA 的想法。

iOS 各个版本所作出的改进表明苹果同意有必要添加更多支持，这只是时间的问题。

根据2017年末的某项研究，用户有97%的时间都花在了10个应用中，而访问量最高的移动网站获得的用户比移动应用程序多800万。

在 Google 的引领下，微软推出了 PWA 版的 Outlook，并以 Chromium 为基础构建了 Edge 浏览器，我相信苹果的iOS（最终）也将遵循这一趋势。

## 6. 前端框架 ##

在最新的前端框架（Vue、Angular、React等）的推波助澜下，PWA 的构建得到了极大地简化。

它们拥有超快的渲染功能，过渡和动画看起来非常平滑，而且在 Ionic 等框架的帮助下，应用程序可以更轻松地获得原生应用的外观和体验。

有些框架已经推出了面向 PWA 开发的模板。构建 PWA 的技术已发展成熟。接下来只需要与浏览器供应商达成共识。

## 7. 受益于 PWA 的公司 ##

许多公司正在为他们的原生应用程序构建 PWA，以方便用户通过Web浏览器访问他们的移动应用程序服务。

以下就是正在朝着这个方向迈进的一些公司。

Tinder

在创建 PWA 后，他们将页面的加载时间从11.91秒压缩到了4.69秒，这是因为 PWA 比原生 Android 应用程序小90%。最终他们提升了 PWA 用户的参与度。

Trivago

在将 PWA 添加到手机桌面后，Trivago的用户数量猛增了150%。

在离线支持的帮助下，即使没有互联网连接用户也可以继续会话，而且67%的用户在重新获得网络连接后仍继续使用 PWA。最终他们的酒店优惠链接点击次数增加了97%。

Pinterest 将其移动网站升级为 PWA 后，与上两家公司同样，核心用户的参与度增加了60%。

此外，用户在网站上逗留的时间增加了40%，广告收入增加了44%。

优步

优步的主要目标之一是尽可能地吸引更多人使用他们的服务。这意味着他们还需要接纳网络连接速度较慢（2G）的人群。

由于核心应用的总规模压缩到了50K，因此他们的 PWA 2G 可以在3秒内完成加载。

Google、微软、推特、福布斯等公司都采用了 PWA。种种迹象表明 PWA 可以帮助用户更轻松地访问服务，从而增加用户的参与度。

## 8. 总结 ##

PWA 已经推出一段时间了，但其受欢迎程度的增加主要还是因为功能强大的手机，以及Google、微软等许多大公司的支持。

随着时间的流逝，PWA 会越来越流行，功能会越来越强大，等得到苹果 iOS 的完全支持后， PWA 就会成为构建移动应用程序的主流方式。

参考文章：  
[https://medium.com/better-programming/pwas-the-future-of-mobile-development-1acb85d7db60][https_medium.com_better-programming_pwas-the-future-of-mobile-development-1acb85d7db60]

[极客时间：浏览器工作原理与实践][Link 1]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNDc3NzIx_size_16_color_FFFFFF_t_70_pic_center]: /images/20221123/57b346d9ddc1416b8e7a5223761ff983.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNDc3NzIx_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20221123/b20be469b3164c1682559d3ca7552199.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNDc3NzIx_size_16_color_FFFFFF_t_70]: /images/20221123/aaa5d235472c4d1cbf3bfdc401eeae97.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNDc3NzIx_size_16_color_FFFFFF_t_70_pic_center 2]: /images/20221123/6c447c222b524391b9356992971c7a8a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNDc3NzIx_size_16_color_FFFFFF_t_70_pic_center 3]: /images/20221123/5256fdc76afc4efeae2e2c5b54ecb676.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNDc3NzIx_size_16_color_FFFFFF_t_70_pic_center 4]: /images/20221123/a0090bf840e349549ff90b29e3ef6904.png
[https_medium.com_better-programming_pwas-the-future-of-mobile-development-1acb85d7db60]: https://medium.com/better-programming/pwas-the-future-of-mobile-development-1acb85d7db60
[Link 1]: https://time.geekbang.org/column/intro/100033601