什么是渐进式 Web 应用？

特定平台的应用是为特定的操作系统 (OS) 和/或设备类别（例如 iOS 或 Android 设备）开发的，通常使用平台供应商提供的 SDK。它们通常通过供应商的应用商店分发，用户可以在其中查找和安装它们，并且随后在用户看来就像设备的永久额外功能一样，以某种方式扩展其功能。

特定平台的应用的优势包括

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

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

但是，网站相对于特定平台的应用具有一些优势，包括

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

渐进式 Web 应用结合了传统网站和特定平台应用的最佳功能。

PWA 具有网站的优势，包括

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

PWA 还具有许多特定平台应用的优势，包括

• PWA 可以安装在设备上。这意味着
  • PWA 可以从平台的应用商店安装或直接从 Web 安装。
  • PWA 可以像特定平台的应用一样安装，并且可以自定义安装过程。
  • 安装后，PWA 会在设备上获得一个应用图标，与特定平台的应用并列。
  • 安装后，PWA 可以作为独立应用启动，而不是浏览器中的网站。
• PWA 可以后台运行和离线运行：典型的网站仅在页面加载到浏览器中时处于活动状态。PWA 可以
  • 在设备没有网络连接时工作。
  • 在后台更新内容。
  • 响应来自服务器的推送消息。
  • 使用操作系统通知系统显示通知。
• PWA 可以使用整个屏幕，而不是在浏览器 UI 中运行。
• PWA 可以集成到设备中，注册为共享目标和来源，并访问设备功能。
• PWA 可以通过应用商店分发，也可以通过 Web 公开分发。

当你在浏览器中访问网站时，很明显该网站“正在浏览器中运行”。浏览器 UI 在网站周围提供了一个可见的框架，包括 UI 功能，如后退/前进按钮和页面的标题。你的网站调用的 Web API 由浏览器引擎实现。

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

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

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

除此之外，PWA 还具有一些其他功能

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

Web 应用清单

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

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

服务工作线程

虽然 PWA 不需要服务工作线程即可安装，但服务工作线程通常与 PWA 一起使用，以便至少提供最小的离线体验。

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

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

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

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

虽然渐进增强对于大多数网站来说都是一个理想的特性，但对于 PWA 来说尤其重要，因为 PWA 预计将在各种设备上运行，并且经常使用一些高级 Web API，而这些 API 可能不被所有浏览器支持。

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

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

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