安装

用户安装您的 PWA 后，它将执行以下操作：

  • 在启动器、主屏幕、开始菜单或启动板中放置图标。
  • 当用户在其设备上搜索该应用时，以结果的形式显示。
  • 在操作系统中有单独的窗口。
  • 支持特定功能。
。

安装条件

每个浏览器都有一个标准，用于标记网站或 Web 应用何时属于渐进式 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 的基座或桌面、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 时的屏幕截图。

请务必注意，只有用户通过 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 应用。这些设备上的某些浏览器（如华为浏览器）可以安装打包为 QuickApp 的 PWA，即使您未使用 QuickApp 堆栈也是如此。

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

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

提示安装

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

应用目录和商店

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

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

如果您想要详细了解如何将 PWA 发布到应用目录和商店，请参阅 BubbleWrap CLI 和 PWA Builder 了解相关信息。

资源