什么是渐进式 Web 应用？

平台原生应用

平台原生应用 是为特定的操作系统（OS）和/或设备类型开发的，例如 iOS 或 Android 设备，通常使用平台供应商提供的 SDK。它们通常通过供应商的应用商店进行分发，用户可以在其中找到并安装它们，之后它们似乎是设备上永久新增的功能，以某种方式扩展了设备的功能。

平台原生应用的优势包括：

• 易于用户访问：它们在设备上拥有自己的图标，方便用户查找和打开。
• 离线和后台运行：即使在用户不与之互动或设备离线时，它们也能运行。例如，这使得聊天应用在未打开时也能接收消息，并向用户显示通知。它还使得新闻应用可以在后台更新，以便在设备离线时也能显示最新内容。
• 专用 UI：它们可以实现自己独特、沉浸式的 UI。
• 操作系统集成：它们可以集成到宿主操作系统中：例如，消息应用可以注册为共享目标，使用户可以在照片应用中选择一张图片，并使用消息应用将其发送。它们还可以访问设备的摄像头、GPS 或加速度计等功能。
• 应用商店集成：它们通过应用商店分发，为用户提供了一个集中的查找地点，以及一个决定是否安装的一致方式。

传统网站

传统上，网站更像是“用户访问的地方”，而不是“用户拥有的东西”。通常，一个网站：在用户不访问时，不会在用户设备上留下痕迹；用户只能通过打开浏览器并导航到该网站来访问；并且高度依赖网络连接。

然而，网站相比于平台原生应用也有一些优势，包括：

• 单一代码库：由于 Web 本身是跨平台的，一个网站可以从单一代码库在不同的操作系统和设备类型上运行。
• 通过 Web 分发：Web 是一个出色的分发平台。网站可以被搜索引擎索引，并且只需使用 URL 即可共享和访问。网站的分发无需注册任何供应商的应用商店。

渐进式 Web 应用

渐进式 Web 应用结合了传统网站和平台原生应用的最佳特性。

PWA 拥有网站的优势，包括：

• PWA 使用标准的 Web 平台技术开发，因此它们可以从单一代码库在多种操作系统和设备类型上运行。
• PWA 可以直接从 Web 访问。

PWA 还拥有许多平台原生应用的优势，包括：

• PWA 可以安装到设备上。这意味着：

  • PWA 可以从平台的应用商店安装，也可以直接从 Web 安装。
  • PWA 可以像平台原生应用一样安装，并且可以自定义安装过程。
  • 安装后，PWA 会在设备上获得一个应用图标，与其他平台原生应用并列。
  • 安装后，PWA 可以作为独立应用启动，而不是在浏览器中作为网站运行。

• PWA 可以离线和后台运行：典型的网站只有在页面在浏览器中加载时才活跃。PWA 可以：

  • 在设备没有网络连接时工作。
  • 在后台更新内容。
  • 响应来自服务器的推送消息。
  • 使用操作系统通知系统显示通知。

• PWA 可以使用整个屏幕，而不是在浏览器 UI 中运行。

• PWA 可以集成到设备中，注册为共享目标和源，并访问设备功能。

• PWA 可以在应用商店中分发，也可以通过 Web 公开分发。

PWA 和浏览器

当您在浏览器中访问网站时，网站“在浏览器中运行”是显而易见的。浏览器 UI 为网站提供了一个可见的框架，包括后退/前进按钮和页面标题等 UI 功能。您的网站调用的 Web API 由浏览器引擎实现。

PWA 通常看起来像平台原生应用——它们通常显示在没有浏览器 UI 包围的情况下——但从技术上讲，它们仍然是网站。这意味着它们需要一个浏览器引擎，如 Chrome 或 Firefox 中的引擎来管理和运行它们。对于平台原生应用，平台 OS 管理应用，提供其运行的环境。对于 PWA，浏览器引擎执行此后台角色，就像它为普通网站执行的那样。

在我们关于 PWA 的文档中，我们有时会提到浏览器扮演这个后台角色。例如，我们可能会说，“当收到推送通知时，浏览器会启动 PWA 的服务工作线程。”在这里，浏览器的活动完全在后台进行。从 PWA 的角度来看，操作系统启动它可能同样没有区别。对于某些系统，例如 Chromebook，甚至可能没有“浏览器”和“操作系统”之间的区别。

PWA 的技术特性

因为 PWA 是网站，所以它们具有与其他任何网站相同的基本功能：至少一个 HTML 页面，很可能加载了一些 CSS 和 JavaScript。与普通网站一样，页面加载的 JavaScript 具有全局Window 对象，并且可以访问通过该对象可用的所有 Web API。

除此之外，PWA 还具有一些附加功能：

• 一个Web 应用清单文件，它至少提供浏览器安装 PWA 所需的信息，例如应用名称和图标。
• 可选地，一个服务工作线程，用于提供离线体验。

Web 应用清单

PWA 必须有一个 Web 应用清单，并且清单必须包含足够的信息供浏览器安装 PWA。

清单可以定义 PWA 的外观的许多其他方面，例如主题颜色和背景颜色，以及它的行为，包括其作为其他应用的共享目标的能力，或处理特定文件类型的能力。

服务工作线程

虽然 PWA 无需服务工作线程即可安装，但服务工作线程经常与 PWA 一起使用，以提供至少最基本的离线体验。

服务工作线程鼓励一种架构，在这种架构中，应用的页面——即网站的传统部分——实现用户界面，而服务工作线程实现一个可以支持离线和后台运行的后端，使 PWA 的行为更像一个应用而不是一个网站。这是因为服务工作线程可以在需要时（例如，处理推送通知）在后台由浏览器启动。

PWA 和单页应用

传统上，网站被构建为相互链接的页面集合。当用户单击同一网站中一个页面上的链接到另一个页面时，浏览器会加载新页面作为一个全新的实体，包括 HTML 和 HTML 加载的子资源，如 CSS 和 JavaScript。在单页应用中，站点由一个 HTML 页面组成，当用户单击内部链接时，这由 JavaScript 从服务器获取新内容并更新页面相关部分来处理。

单页应用可以提供更接近平台原生应用的用户体验，因此 PWA 通常被实现为单页应用。特别是，单页应用更容易实现无缝的用户界面，用户看到的是一个单一、一致的页面，并且只有页面的相关部分会在用户与应用交互时更新。

然而，PWA 不必是单页应用，单页应用也不必是 PWA。

渐进增强

虽然渐进式增强是大多数网站的可取属性，但对于 PWA 来说尤其重要，因为 PWA 期望在各种设备上运行，并且经常使用高级 Web API，而这些 API 可能并非所有浏览器都支持。

渐进式增强的一个基本组成部分是，如果用户通过在浏览器中输入其 URL 来访问 Web 上的 PWA，用户可以像普通网站一样与应用进行交互。但如果浏览器可以安装它，用户将被提示安装，应用将作为设备上的新功能出现。

PWA 应该对高级 API 进行功能检测，并提供可接受的回退体验。

例如，后台同步 API 使 PWA 能够在设备连接到网络后立即让服务工作线程发出网络请求。这的一个典型用例是消息传递。假设用户撰写了一条消息，但当用户尝试发送消息时，设备处于离线状态。后台同步 API 使设备能够在设备连接后在后台发送消息。在不支持后台同步的设备上，应用应告知用户消息未能发送，并让他们有机会稍后重试。