使 PWA 可安装

PWA 的一个定义性特征是浏览器可以推广它以在设备上安装。安装后，PWA 对用户来说就像一个平台特定的应用程序，是设备上永久存在的功能，可以像任何其他应用程序一样直接从操作系统启动。

我们可以将其总结如下：

在本指南中，我们将讨论这些功能。但是，首先，我们将讨论 Web 应用程序必须满足哪些要求才能被推广安装。

可安装性

为了让 Web 应用程序被支持的浏览器推广安装，它需要满足一些技术要求。我们可以将这些视为 Web 应用程序成为 PWA 的最低要求。

注意：虽然这不是 PWA 可安装的要求，但许多 PWA 使用 Service Worker 来提供离线体验。有关更多信息，请参阅 CycleTracker：Service Worker 教程。

Web 应用清单是一个 JSON 文件，它告诉浏览器 PWA 在设备上应该如何显示和运行。要使 Web 应用程序成为 PWA，它必须是可安装的，而要使其可安装，它必须包含一个清单。

清单是通过应用程序的 HTML 中的 <link> 元素包含的。

html

<!doctype html>
<html lang="en">
  <head>
    <link rel="manifest" href="manifest.json" />
    <!-- ... -->
  </head>
  <body></body>
</html>

如果 PWA 有多个页面，则每个页面都必须以这种方式引用清单。

清单包含一个 JSON 对象，其中包含一组成员，每个成员定义了 PWA 的外观或行为的某个方面。这是一个非常简单的清单，只包含两个成员：“name”和“icons”。

json

{
  "name": "My PWA",
  "icons": [
    {
      "src": "icons/512.png",
      "type": "image/png",
      "sizes": "512x512"
    }
  ]
}

基于 Chromium 的浏览器，包括 Google Chrome、Samsung Internet 和 Microsoft Edge，要求清单包含以下成员：

有关每个成员的完整描述，请参阅 Web 应用清单参考文档。

PWA 要想被安装，它必须使用 https 协议提供服务，或者从使用 localhost 或 127.0.0.1 的本地开发环境提供服务 — 无论是否带有端口号。

这比安全上下文的要求更严格，安全上下文将从 file:// URL 加载的资源视为安全。

用户期望在其平台的应用商店中找到应用，例如 Google Play 商店或 Apple App Store。

如果您的应用符合安装先决条件，您可以打包它并通过应用商店进行分发。此过程特定于每个应用商店。

PWABuilder 是一个简化为各种应用商店打包和发布 PWA 过程的工具。它支持 Google Play 商店、Microsoft Store、Meta Quest Store 和 iOS App Store。

如果您已将应用添加到应用商店，用户就可以像平台特定应用一样从那里安装它。

当支持的浏览器确定 Web 应用程序符合前面描述的可安装性标准时，它将向用户推广该应用程序进行安装。用户将有机会安装该应用程序。这意味着您可以将 PWA 作为网站分发，使其可以通过网络搜索发现，并且还可以将其分发到应用商店，以便用户可以在那里找到它。

这是 PWA 能够提供两全其美之道的绝佳范例。这也是 PWA 如何与渐进增强配合工作的典范：如果用户在 Web 上遇到您的 PWA，使用无法安装它的浏览器，他们可以像普通网站一样使用它。

从 Web 安装 PWA 的用户界面因浏览器和平台而异。例如，当用户导航到某个页面时，浏览器可能会在 URL 栏中显示一个“安装”图标。

Chrome URL bar, showing PWA install icon

当用户选择该图标时，浏览器会显示一个提示，询问他们是否要安装 PWA，如果他们同意，PWA 就会被安装。

该提示显示 PWA 的名称和图标，这些信息来自 name 和 icons 清单成员。

浏览器和平台对从 Web 安装 PWA 的支持情况各不相同。

桌面端

基于 Chromium 的浏览器支持在所有受支持的桌面操作系统上安装带有清单文件的 PWA。
在 macOS Sonoma（Safari 17）及更高版本中，Safari 支持“添加到 Dock”（*文件* > *添加到 Dock...*），可以为任何 Web 应用（无论是否有清单文件）执行此操作。
Firefox 不支持使用清单文件安装 PWA。

移动端