安装

一旦用户安装了您的 PWA，它将

  • 在启动器、主屏幕、开始菜单或启动台中拥有一个图标。
  • 当用户在其设备上搜索该应用时，它将显示为搜索结果。
  • 在操作系统中拥有一个单独的窗口。
  • 支持特定功能。

安装标准

每个浏览器都有一个标准，用于标记网站或 Web 应用何时为渐进式 Web 应用，并且可以安装以获得独立体验。您的 PWA 的元数据由一个基于 JSON 的文件设置，该文件称为 Web 应用清单，我们将在下一个模块中详细介绍。

作为可安装性的最低要求，大多数支持它的浏览器都使用 Web 应用清单文件和某些属性，例如应用的名称以及已安装体验的配置。macOS 的 Safari 是一个例外，它不支持可安装性。

允许安装的要求因不同的浏览器而异，本文详细介绍了 Google Chrome 的标准，并包含指向其他浏览器要求的链接。即使您的 Web 应用不符合 Chrome 中的可安装性标准，用户也可以安装它。请查看Chrome 如何帮助用户安装他们重视的应用以了解更多信息。

由于 PWA 满足可安装性要求的测试可能需要几秒钟，因此可安装性本身可能不会在收到网址响应后立即可用。

桌面安装

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

Chrome and Edge on desktop with the install badge in the URL bar

当用户与某个网站互动时，他们可能会看到一个弹出窗口，例如下图所示，邀请用户将其安装为应用。

Google chrome in-product help suggesting the PWA installation.

浏览器的下拉菜单还包含一个“安装”项，用户可以使用该项

Chrome and Edge menu items for PWA installation.

桌面操作系统上仅支持独立和最小化界面 显示模式。

安装在桌面上的 PWA

  • 在 Windows PC 上的“开始”菜单或“开始”屏幕中、Linux GUI 中的停靠栏或桌面中、macOS 启动台中或 Chromebook 的应用启动器中拥有一个图标。
  • 当应用处于活动状态、最近使用过或在后台打开时，在应用切换器和停靠栏中拥有一个图标。
  • 出现在应用搜索中，例如 Windows 上的搜索或 macOS 上的 Spotlight。
  • 可以在其图标上设置徽章编号，以指示新的通知。这是通过 Badging API 完成的。
  • 可以使用 应用快捷方式 为图标设置上下文菜单。
  • 不能使用同一浏览器安装两次。

在桌面上安装应用后，如果用户希望您的应用在启动时自动打开，他们可以导航到 about:apps，右键单击 PWA，然后选择“登录时启动应用”。

iOS 和 iPadOS 安装

在 iOS 和 iPadOS 上，不存在安装 PWA 的浏览器提示。在这些平台上，PWA 也称为主屏幕 Web 应用。这些应用必须通过浏览器共享菜单手动添加到主屏幕。建议您将 apple-touch-icon 标记添加到您的 html 中。要定义图标，请将图标的路径包含到您的 HTML <head> 部分，如下所示

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

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

将应用添加到主屏幕的步骤是

  1. 打开共享菜单，该菜单位于浏览器的底部或顶部。
  2. 点击 添加到主屏幕。
  3. 确认应用的名称；该名称是用户可编辑的。
  4. 点击 添加。在 iOS 和 iPadOS 上，指向网站和 PWA 的书签在主屏幕上看起来相同。

在 iOS 和 iPadOS 上，仅支持独立 显示模式。因此，如果您使用最小化 UI 模式，它将回退到浏览器快捷方式；如果您使用全屏模式，它将回退到独立模式。

安装在 iOS 和 iPadOS 上的 PWA

  • 出现在主屏幕、Spotlight 的搜索、Siri 建议和应用库搜索中。
  • 不出现在 App Gallery 的类别文件夹中。
  • 缺乏对徽章和应用快捷方式等功能的支持。

顺便说一下，一种称为 Web Clips 的原生技术用于在操作系统中创建 PWA 图标。它们只是 Apple Property List 格式的 XML 文件，存储在文件系统中。

Android 安装

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

  • 安装菜单项措辞的变化，例如 安装 或 添加到主屏幕。
  • 详细的安装对话框。

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

Mini info bar and installation dialogs on Android.

根据设备和浏览器，您的 PWA 将安装为 WebAPK、快捷方式或 QuickApp。

WebAPK

WebAPK 是一个 Android 包 (APK)，由用户设备的受信任提供商创建，通常在云端的 WebAPK 铸造服务器上创建。此方法由安装了 Google 移动服务 (GMS) 的设备上的 Google Chrome 以及三星互联网浏览器使用，但仅在三星制造的设备上使用，例如 Galaxy 手机或平板电脑。总而言之，这占了 Android 用户的大多数。

当用户从 Google Chrome 安装 PWA 并且使用 WebAPK 时，铸造服务器会为 PWA“铸造”（打包）并签署 APK。该过程需要时间，但当 APK 准备就绪时，浏览器会在用户的设备上静默安装该应用。由于受信任的提供商（Play 服务或三星）签署了 APK，因此手机会在不禁用安全性的情况下安装它，就像从商店下载的任何应用一样。无需侧载应用。

通过 WebAPK 安装的 PWA

快捷方式

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

使用快捷方式安装的 PWA

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

A PWA installed with different browsers on the same device.

QuickApp

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

当您的 PWA 安装为 QuickApp 时，用户将获得与使用快捷方式类似的体验，但图标上会带有 QuickApps 图标（闪电图像）。该应用也可以从 QuickApp 中心启动。

QuickApps on a Huawei or ZTE home screen.

提示安装

在桌面和 Android 设备上基于 Chromium 的浏览器中，可以从您的 PWA 触发浏览器的安装对话框。安装提示章节将介绍执行此操作的模式以及如何实现它们。

应用目录和商店

您的 PWA 也可以在应用目录和商店中列出，以扩大其覆盖范围，并让用户在他们查找其他应用的同一位置找到它。大多数应用目录和商店都支持允许您发布不包含整个 Web 应用（例如您的 HTML 和资源）的软件包的技术。这些技术允许您仅创建一个指向独立 Web 呈现引擎的启动器，该引擎将加载应用并允许 Service Worker 缓存必要的资源。

支持发布 PWA 的应用目录和商店有

如果您想了解更多关于如何将 PWA 发布到应用目录和商店的信息，请查看 BubbleWrap CLI 和 PWA Builder。

资源