响应式网页设计和渐进式网页应用 (PWA)：差异

由于这两者在外观和执行方式上如此相似，您一定想知道为什么没有对两种流行的 Web 开发方法进行更详细的比较：响应式 Web 设计和渐进式 Web 应用程序。 嗯，就是这样。 在本文中，我们将比较响应式网页设计和 Progressive Web App，并找出它们之间真正的不同之处。

响应式网页设计

这是什么

响应式 Web 设计 (RWD) 是 Ethan Marcotte 在 2010 年首次描述的一种 Web 开发方法，比 Progressive Web App 的概念早了五年。

这个怎么运作

基本上，响应式网页设计的理念是设计和开发应该以响应用户设备为目标——这意味着响应所使用设备的行为、大小、平台和方向。 这是通过使用流体网格、灵活的图像和 CSS 媒体查询来实现的：

流畅的网格、灵活的图像和媒体查询是响应式网页设计的三个技术要素……

Ethan Marcotte，响应式网页设计

流体网格

使用流体网格设计的响应式网站可以更好地处理市场上不同的屏幕尺寸，因为流体网格不是定义基于像素的尺寸，而是采用了新的基于百分比的计算。

灵活的图像

Web 上的图像不是自然流动的，但是通过一些配置（ width属性设置为100% ， height属性设置为auto ），任何图像都可以在所有设备上响应。

CSS 媒体查询

虽然具有灵活图像和流体网格的响应式网页在技术上是响应式的，但它看起来并没有想象中那么好。 这就是 CSS 媒体查询发挥作用的地方，因为它们用于创建更好的体验，为不同的设备量身定制。 这些量身定制的体验通常是通过添加在特定屏幕尺寸生效的断点来引入的。

总体而言，响应式 Web 设计使当今的 Web 变得更容易访问，因为这种方法消除了对更多开发阶段的需求，而这些阶段以前需要适应市场上不同的屏幕尺寸。 或者，用它的创造者的话来说，这种 Web 开发方法最终允许我们“为事物的潮起潮落而设计”。

例子

响应式网站如今已司空见惯，几乎您遇到的每个网站都具有一定的响应性。

渐进式网络应用

这是什么

由Alex Russel在2015 年首次创造，Progressive Web App 是 Web 的下一个自然演变，因为它比典型的响应式网站有很多好处。 根据 Pete LePage – Google Developer Advocate 的说法，“渐进式”部分可以解释为“随着用户逐渐与应用程序建立关系，它变得越来越强大”。

用外行的话来说，PWA 是您的类似应用程序的网站，具有（几乎）您可以从本机移动应用程序中获得的所有功能，包括推送通知、离线功能等。 正因为如此，整个体验比它的响应式网站更上一层楼，因为 PWA 可以保留基于 Web 的平台带来的所有假定好处。

 相关文章：什么是渐进式 Web 应用程序？

这个怎么运作

总结 PWA 的核心组件实际上非常容易。 基本上，为了使上述所有渐进功能成为可能，这些是要求：

网络应用清单

Web 应用清单是一个 JSON 文件，它为 PWA 的安装过程提供必要的元数据，并确定 PWA 在用户主屏幕上的呈现方式。

服务人员

普遍认为是使 PWA 的所有渐进式功能成为可能的基础组件，服务工作者独立于浏览器运行，并在与主要 JavaScript 不同的线程上运行。

安全上下文

作为 Web 的新标准，PWA 必须通过安全协议 HTTPS 进行分割。 这保证了用户和服务器之间的安全通信，作为回报，确保了无风险的体验。

例子

由于 PWA 的行为与原生移动应用程序没有什么不同，因此您可能之前访问过 PWA 站点而不知道它。 想想像 Instagram 和 Pinterest 这样的大型应用程序网站——它们都由 PWA 提供支持。

 推荐阅读：2020 年渐进式 Web 应用的 12 个最佳示例

它们重叠的地方

具有现代功能的类似体验

如果到目前为止一切对您来说都有意义，那么您应该会看到响应式网页设计 (RWD) 和 PWA 在用户体验方面有很多重叠之处。 从技术上讲，PWA是响应式的——因为该方法适用于在所有设备上查看，并带有一些现代触摸以启用更多类似应用程序的功能。

由于它们都是 Web 开发的方法，因此它们共享 Web 的几乎所有相同的好处，包括：

• 一个 URL，一个代码库，适用于所有平台
• 使用 HTTPS 增强安全性
• 更好的可发现性并始终保持最新

他们不同的地方

这就是事情变得有趣的地方，因为这两种 Web 开发方法——虽然在外观上大多相似——但它们对现实世界的影响却大不相同。

在功能方面

根据定义，PWA 比典型的响应式网站功能更丰富。 通过利用 Web 技术的最新进展，即服务工作者和 Web 应用程序清单，PWA 可以提供以前专属于本地移动应用程序的功能，例如：

添加到主屏幕

通过注册的服务工作者和 Web 应用程序清单，PWA 可以安装在具有支持浏览器的每台设备上。

>> 了解更多：创建您的第一个 PWA

推送通知

通过服务工作者，您可以发送通知并将它们显示在用户的设备上，就像原生应用程序一样。 这是 Web 的一个相对较新的特性，它利用了 Push API、Notifications API 和 Web Push Protocol； 在不久的将来，由于 Notifications Triggers 和 Badging API 的出现，这个功能只会变得更好。

离线能力

借助浏览器内可编程网络代理（即服务工作者）的帮助，PWA 可以主动缓存和提供离线内容，而无需依赖 HTTP 缓存等过时的缓存机制。

注意：响应式网站仍然可以从 Web 中的所有现有 API 中受益，以提供最佳的用户体验——只是你不会获得所有依赖于 service worker 的功能。

 推荐阅读：Progressive Web App (PWA) 和硬件访问

在性能方面

由于响应式网站仍然是典型的网站，受到与当前 HTTP 缓存机制相关的所有缺点的阻碍，因此可以合理地期望 PWA 具有更好的性能，因为它使用了一种更新的、更面向性能的缓存机制，称为服务工作者。

更快的缓存机制

注册服务工作者后，您可以准确控制正在缓存的内容，从而为回访者提供更好的体验。

服务人员对现实世界的性能影响也不是没有仔细观察过的。 通过使用首次绘制时间作为衡量用户对网站的第一次体验的指标，谷歌自己进行了一项研究，观察谷歌 I/O 网络应用程序与一个受控组（其中服务人员控制网络应用程序）的性能，并且受支持的组（使用的浏览器支持服务工作，但尚未控制 Web 应用程序）。

结果在桌面上尤其令人印象深刻，因为在这里我们可以看到服务人员尽其所能将原始的firstpaint时间（912 毫秒）减少到仅583 毫秒。 这几乎是一种即时体验。

然而，在移动设备上，事情就不那么令人印象深刻了：

在这里我们可以看到，受控组的尾部看起来仍然与受支持组有点相似。 这主要是因为在移动设备上，Service Worker 线程没有得到优化，与桌面相比需要更多时间来启动。

总体而言，使用服务人员（或者换句话说，使用 PWA）实现的性能提升简直是惊人的。 当然，移动服务人员方面还有一些工作要做。 但我们认为，总体而言，它仍然是向 Web 曾经的水平迈出的一小步，并且是朝着正确方向迈出的一步。

在安全方面

HTTPS——分界线

虽然典型的响应式网站可以像 PWA 一样安全，但响应式网站不需要使用安全通信协议。 这与 PWA 支持的网站相反，因为 PWA 的创始人 Google 要求 PWA 中服务器和客户端之间的所有通信都必须通过使用 HTTPS 进行加密。

与 PWA 相关的大多数功能（例如地理定位甚至服务工作者）只有在使用 HTTPS 加载应用程序后才可用。

MDN 网络文档、渐进式网络应用程序 (PWA)

 相关文章：你需要HTTPS吗？

结论

上述通过服务工作者实现的性能提升，再加上其他类似应用程序的功能，如推送通知、添加到主屏幕（以及在不久的将来，地理围栏和定期同步），所有这些都证明 PWA 成为下一个合适的候选者网络的演变。 到目前为止，PWA 运动已经受到几乎所有大公司的广泛鼓励，包括微软在 Windows 10 中推动 PWA 的采用。不久之后，我们就会看到一个充满渐进式 Web 应用程序的未来——比如史蒂夫乔布斯所设想的：

完整的 Safari 引擎位于 iPhone 内部。 因此，您可以编写令人惊叹的 Web 2.0 和 Ajax 应用程序，它们的外观和行为都与 iPhone 上的应用程序完全相同。 而且这些应用程序可以与 iPhone 服务完美集成。 他们可以拨打电话、发送电子邮件、在 Google 地图上查找位置。

史蒂夫·乔布斯，2007