安装

用户安装您的 PWA 后，它将：

  • 在启动器、主屏幕、“开始”菜单或启动板中提供一个图标。
  • 在用户在设备上搜索该应用时显示。
  • 在操作系统中有一个单独的窗口。
  • 支持特定功能。

安装条件

每个浏览器都有一个条件，用于标记网站或应用是否为渐进式 Web 应用，且可为提供独立体验而安装。 PWA 的元数据由基于 JSON 的文件设置，称为“Web 应用清单”，我们将在下一个单元中详细介绍。

作为确保可安装性的最低要求，大多数支持它的浏览器都会使用网络应用清单文件和某些属性（例如应用名称和安装版体验的配置）。例外情况是适用于 macOS 的 Safari，它不支持可安装性。

不同浏览器对安装的要求也有所不同。这篇文章详细介绍了 Google Chrome 的标准，并提供了指向其他浏览器要求的链接。

由于 PWA 满足可安装性要求的测试可能需要几秒钟的时间，因此在收到网址响应后，可能无法立即提供可安装性本身。

桌面安装

目前，Linux、Windows、macOS 和 Chromebook 上的 Google Chrome 和 Microsoft Edge 支持桌面 PWA 安装。这些浏览器会在网址栏中显示一个安装标志（图标），说明当前网站可以安装（见下图）。

桌面版 Chrome 和 Edge，且网址栏中有安装徽章

当用户与网站互动时，他们可能会看到一个弹出式窗口（如下所示），邀请用户将应用作为应用进行安装。

Google Chrome 产品内帮助：建议安装 PWA。

浏览器的下拉菜单中还包含用户可以使用的“安装”项：

用于 PWA 安装的 Chrome 和 Edge 菜单项。

桌面操作系统仅支持独立和界面极简显示模式。

桌面设备上安装的 PWA：

  • 在 Windows PC 上的“开始”菜单或“开始”屏幕、Linux GUI 的 Dock 或桌面、macOS 启动板或 Chromebook 的应用启动器中应有一个图标。
  • 当应用处于活动状态、最近使用过或在后台打开时，在应用切换器和基座中应显示有相应图标。
  • 在应用搜索中显示，例如在 Windows 中搜索，或在 macOS 中显示“特别关注”。
  • 可在其图标上设置标记编号，以指示新通知。这是通过 Badging API 实现的。
  • 可以使用应用快捷方式为图标设置上下文菜单。
  • 无法使用同一个浏览器安装两次。

将应用安装到桌面后，如果用户希望您的应用在启动时自动打开，可以前往 about:apps，右键点击相应 PWA，然后选择“在您登录时启动应用”。

iOS 和 iPadOS 安装

在 iOS 和 iPadOS 上没有浏览器提示安装 PWA。在这些平台上，PWA 也称为“主屏幕 Web 应用”。你必须通过 Safari 中才提供的菜单，将这些应用手动添加到主屏幕。建议您在 HTML 中添加 apple-touch-icon 标记。如需定义图标，请添加指向 HTML <head> 部分的图标路径，如下所示：

<link rel="apple-touch-icon" href="/icons/ios.png">

Safari 将使用此信息来创建快捷方式，如果您没有为 Apple 设备提供特定图标，则当用户安装 PWA 时，主屏幕上的图标将是 PWA 的屏幕截图。

请务必注意，仅当用户通过 Safari 浏览您的网站时，才能使用 PWA。App Store 中提供的其他浏览器（例如 Google Chrome、Firefox、Opera 或 Microsoft Edge）无法在主屏幕上安装 PWA。

将应用添加到主屏幕的步骤如下：

  1. 打开浏览器底部或顶部的“共享”菜单。
  2. 点击添加到主屏幕。
  3. 确认应用的名称；该名称可由用户修改。
  4. 点击添加。在 iOS 和 iPadOS 上，网站和 PWA 的书签在主屏幕上看起来一样。

在 iOS 和 iPadOS 上，仅支持独立的显示模式。因此，如果您使用最简界面模式，该模式将回退到浏览器快捷方式；如果您使用全屏模式，则会回退到独立模式。

iOS 和 iPadOS 上安装的 PWA：

  • 显示在主屏幕、特别关注的搜索、Siri 建议和应用库搜索中。
  • 不会显示在应用程序库的类别文件夹中。
  • 缺乏对标志和应用快捷方式等功能的支持。

顺便说一下，Safari 使用称为网页剪辑的原生技术在操作系统中创建 PWA 图标。它们只是存储在文件系统中的 Apple 属性列表格式的 XML 文件。

Android 安装

在 Android 设备上，PWA 安装提示因设备和浏览器而异。用户可能会看到：

  • 用于安装的菜单项的用词变体，例如“Install”或“Add to Home Screen”。
  • 详细的安装对话框。

在下图中，您可以看到两个不同版本的安装对话框：简单的迷你信息栏（左）和详细的安装对话框（右）。

Android 上的迷你信息栏和安装对话框。

根据您的设备和浏览器，您的 PWA 可能会以 WebAPK、快捷方式或 QuickApp 的形式进行安装。

WebAPKs

WebAPK 是由用户设备的可信提供商（通常位于云端）在 WebAPK 创建服务器上创建的 Android 软件包 (APK)。此方法适用于安装了 Google 移动服务 (GMS) 的设备的 Google Chrome 和三星互联网浏览器，但仅限于三星制造的设备，例如 Galaxy 手机或平板电脑。总计涵盖了大部分 Android 用户。

当用户通过 Google Chrome 安装 PWA 且使用 WebAPK 时，系统会创建服务器“创建”（软件包）并为 PWA 签名 APK。该过程需要一些时间，但在 APK 准备就绪后，浏览器会以静默方式将该应用安装到用户的设备上。由于受信任的提供商（Play 服务或三星）对 APK 进行了签名，因此手机在安装 APK 时不会停用安全功能，就像从商店下载的任何应用一样。无需旁加载应用。

通过 WebAPK 安装的 PWA：

快捷键

虽然 WebAPK 可为 Android 用户提供最佳体验，但我们无法始终创建它们。如果无法创建网站快捷方式，浏览器就会回退到创建网站快捷方式。由于 Firefox、Microsoft Edge、Opera、Brave 和 Samsung Internet（在非三星设备上）没有受信任的服务器，因此它们会创建快捷方式。如果创建服务不可用或您的 PWA 不符合安装要求，Google Chrome 也会显示。

使用快捷方式安装的 PWA：

  • 在主屏幕上显示带有浏览器标记的图标（请参阅以下示例）。
  • 启动器中或设置、应用中没有图标。
  • 无法使用任何需要安装的功能。
  • 无法更新其图标和应用元数据。
  • 可安装多次，即使使用同一个浏览器也可以；发生这种情况时，所有实例都将指向同一实例，并使用相同的存储空间。

同一设备上安装了不同浏览器的 PWA。

QuickApps

部分制造商（包括华为和中兴）提供了一个名为“QuickApps”的平台，可用于创建类似于 PWA 但使用不同的技术栈的轻量级 Web 应用。QuickApps即使您没有使用 QuickApp 堆栈，这些设备上的某些浏览器（例如华为浏览器）也可以安装打包为 QuickApp 的 PWA。

当您的 PWA 作为 QuickApp 安装时，用户获得的体验与使用快捷方式时的体验类似，但带有一个带有 QuickApps 图标的图标（闪电图片）。也可以通过 QuickApp Center 启动该应用程序。

华为或中兴主屏幕上的 QuickApps。

提示安装

在桌面设备和 Android 设备上基于 Chromium 的浏览器中，可以通过 PWA 触发浏览器的安装对话框。“安装提示”一章将介绍执行此操作的模式以及实现方法。

应用目录和商店

您的 PWA 还可在应用目录和商店中上架，以扩大覆盖面，让用户能在查找其他应用的同一位置找到该应用。 大多数应用目录和商店都支持一些技术，可让您发布不包含整个 Web 应用的软件包（例如您的 HTML 和资源）。利用这些技术，您只需创建独立 Web 呈现引擎的启动器即可加载应用，并让 Service Worker 缓存必要的资源。

支持发布 PWA 的应用目录和商店包括：

如需详细了解如何将 PWA 发布到应用目录和商店，请参阅 BubbleWrap CLI 和 PWA Builder。

资源