使 PWA 可安装

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

我们可以总结如下

支持的浏览器会将 PWA 推广给用户，以便在设备上安装。
PWA 可以像平台特定的应用一样安装，并且可以自定义安装过程。
安装后，PWA 会在设备上获得一个应用图标，与平台特定的应用并排。
安装后，PWA 可以作为独立应用启动，而不是浏览器中的网站。

我们将在本指南中讨论这些功能中的每一个。但是，首先，我们将讨论 Web 应用必须满足的一些要求，才能将其推广以进行安装。

可安装性

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

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

Web 应用清单

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）要求清单包含以下成员

name 或 short_name
icons 必须包含一个 192px 和一个 512px 的图标
start_url
display 和/或 display_override
prefer-related-application 必须为 false 或不存在

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

需要 HTTPS、localhost 或环回地址

为了使 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 安装

当支持的浏览器确定 Web 应用满足前面描述的可安装条件时，它会将应用推广给用户以进行安装。用户将有机会安装应用。这意味着你可以将你的 PWA 作为网站分发，使其可以通过 Web 搜索发现，也可以将其分发到应用商店，以便用户可以在那里找到它。

这是一个很好的例子，说明 PWA 如何为你提供两全其美的好处。这也是渐进增强如何在 PWA 中发挥作用的一个很好的例子：如果用户在 Web 上遇到你的 PWA，并且使用无法安装它的浏览器，他们可以使用它就像一个普通的网站。

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

Chrome URL bar, showing PWA install icon

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

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

浏览器支持

从 Web 推广 PWA 安装的支持因浏览器和平台而异。

在桌面端

Chromium 浏览器支持在所有支持的桌面操作系统上安装具有清单文件的 PWA。
Firefox 和 Safari 不支持使用清单文件安装 PWA。

在移动端

在 Android 上，Firefox、Chrome、Edge、Opera 和 Samsung Internet Browser 都支持安装 PWA。
在 iOS 16.3 及更早版本中，PWA 只能使用 Safari 安装。
在 iOS 16.4 及更高版本中，可以从 Safari、Chrome、Edge、Firefox 和 Orion 的共享菜单中安装 PWA。

将网站安装为应用

桌面版和 Android 版 Chrome、桌面版 Safari 和桌面版 Edge 也支持用户将任何网站安装为应用，无论它是否具有清单文件，以及不考虑清单文件可安装性条件。使用清单文件的好处是，浏览器在访问网站时会主动将其推广以进行安装，并且开发人员可以自定义安装行为。

触发安装提示

PWA 可以为用户提供自己的页面内 UI 来打开安装提示，而不是依赖于浏览器默认提供的 UI。这使 PWA 能够提供一些上下文和用户安装 PWA 的理由，并且可以帮助使安装用户流程更容易发现。

此技术依赖于beforeinstallprompt 事件，该事件在全局Window 对象上触发，只要浏览器确定 PWA 可安装即可。此事件具有prompt() 方法，该方法会显示安装提示。因此，PWA 可以

添加自己的“安装”按钮
侦听 beforeinstallprompt 事件
通过调用preventDefault() 取消事件的默认行为
在其自己的“安装”按钮的事件处理程序中，调用prompt()。

这在 iOS 上不受支持。

自定义安装提示

默认情况下，安装提示包含 PWA 的名称和图标。如果你为description 和screenshots 清单成员提供值，则仅在 Android 上，这些值将显示在安装提示中，从而为用户提供额外的上下文和安装 PWA 的动力。

下图显示了在 Android 上运行的 Google Chrome 上PWAmp 演示的安装提示的外观

Install prompt for PWAmp on Android

启动应用

安装 PWA 后，其图标将显示在设备上，与用户安装的任何其他应用并排，点击该图标即可启动应用。

你可以使用display 清单成员来控制显示模式：即 PWA 启动时的显示方式。特别是

"standalone" 指示 PWA 应该看起来和感觉像一个平台特定的应用程序，没有浏览器 UI 元素
"browser" 表示 PWA 应该像普通网站一样，在新浏览器标签页或窗口中打开。

如果浏览器不支持给定的显示模式，则 display 将根据预定义的顺序回退到受支持的显示模式。 display_override 使您可以重新定义回退顺序。