增强功能

有许多增强功能可以改进 PWA 的转化率和使用率。

应用快捷方式

应用快捷方式是 PWA 的静态深层链接列表，它们写在您的 manifest 中。Web 应用 Manifest 规范。它允许您定义指向 PWA 中不同部分或功能的快捷方式列表，它们可以加速导航到经常访问的部分。

应用快捷方式在大多数桌面操作系统和带有 WebAPK 的 Android 上可用，并且它们会出现在主屏幕、dock 或任务栏中应用图标的上下文菜单中，如下图所示

App shortcuts in Android and macOS.

要访问此菜单，用户必须右键单击或长按 PWA 的图标。

快捷方式在 manifest 的 shortcuts 成员中定义。它接受一个成员数组，其中包含以下属性

name
将显示给用户的文本，通常在上下文菜单中。
url
当用户从此快捷方式启动 PWA 时，PWA 应加载的 URL。它应该是 PWA 作用域内的 URL，并且应该深层链接到 name 或 short_name 描述的功能。
short_name
（可选）当没有足够的空间显示 name 字段的完整值时使用的较短名称。
description
（可选）对此快捷方式将执行的操作的描述
icons
（可选）图标对象数组，其中包含 src、type、sizes 和可选的 purpose 字段，描述哪些图像应代表快捷方式

您应该将应用快捷方式视为尽力而为的能力。这意味着您不能依赖这些快捷方式始终如一地出现，即使它们出现，您也不知道会出现多少个快捷方式，或者平台是否会忽略图标，这由浏览器自行决定。每个平台的完整讨论超出了范围，但下面您将了解它在 Android 和桌面上的工作方式。处理这种不确定性的最佳方法是按优先级对项目进行排序。

以下代码示例定义了不同的应用快捷方式，如果您在 Android 上使用 Chrome 或在桌面上使用 Edge 或 Chrome 安装应用，则可以尝试这些快捷方式。

iOS 和 iPadOS

在发布 PWA 时，有一些增强功能可以改善 iOS/iPadOS 上 Safari 用户的体验。

启动画面

如Web 应用 Manifest 章节中所见，Android 会根据 manifest 的值自动创建启动画面。iOS 和 iPadOS 的情况并非如此。在这些设备中，您应该在 HTML 中将启动画面定义为静态图像，方法是使用 <link> 元素。

这些图像在 Apple 设备上称为启动图像，它们使用带有 apple-touch-startup-image 值的 rel 属性，如下所示

<link rel="apple-touch-startup-image" href="ios-startup.png">

挑战在于启动图像必须具有您的 PWA 在打开时将具有的确切窗口大小。因此，不同的 iOS 和 iPadOS 设备将需要不同的图像。iPad 上需要涵盖更多情况，例如横向/纵向打开以及在多任务模式下渲染 PWA（例如屏幕的 1/3、1/2 或 2/3）。

您可以在Apple 人机界面指南中查看 iOS 和 iPadOS 屏幕尺寸的更新列表

可以使用 media 属性内的媒体查询设置启动图像的不同版本

<link rel="apple-touch-startup-image" href="ios-startup.png"
      media="orientation: portrait">
<link rel="apple-touch-startup-image" href="ios-startup-landscape.png"
      media="orientation: landscape">

iOS 启动图像的设计模式

定义启动图像是一项艰苦的工作，因此我们提供了一些用于自动生成和配置的工具

  • 静态生成与您的构建系统集成，创建所有 PNG 静态图像，并为您提供 HTML 代码以及要注入到文档中的 <link> 元素。PWA Asset Generator 就是这样一个工具的示例。
  • 客户端生成器，一种 JavaScript 工具，可以根据当前设备的类型和屏幕尺寸，将启动图像的一个或多个 base64 版本嵌入到注入的 <link> 元素中。您可以使用内存中的画布，渲染图像并将其转换为带有 PNG 文件的 data: URI。PWA Compat 库是一个易于使用的客户端库，它通过克隆 Android 的典型启动画面来做到这一点。

在 Apple 移动平台上检测 PWA

虽然您应该在 PWA 中使用渐进增强和功能检测，但在某些边缘情况下，我们需要知道用户是否在 Apple 移动平台上的 PWA 中，例如当您想提供安装说明或添加指向仅限 iOS 的平台特定应用的链接时。

为避免读取用户代理字符串，请检查 navigator 对象的 standalone 属性。这是一个非标准属性，仅在 iOS 和 iPadOS 上的 WebKit 引擎上可用。

  • 如果 navigator.standalone 为 undefined，则表示用户不在 iPadOS 或 iOS 设备上。
  • 如果 navigator.standalone 为 false，则表示用户在浏览器中打开了 PWA 并在那里使用它。
  • 如果 navigator.standalone 为 true，则表示用户从主屏幕打开了 PWA，并且正在获得独立的 PWA 体验。

全屏支持

在 iOS 和 iPad 上的 Safari 中，仅支持 display: standalone 作为PWA 的显示模式。

在下图中，您可以在左侧看到带有主题颜色的默认独立设计，在右侧看到具有全屏 iOS 模式的 PWA，该模式允许您在状态栏后面渲染内容。

A standalone default behavior (left) and a fullscreen iOS screen (right).

如果在您的 HTML 中添加以下标记，您的 iOS 和 iPadOS 上的 PWA 将进入全屏模式，但这与 Android 不同。

<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">

在此模式下，设备的状态栏（顶部，您可以在其中看到时钟、电池电量和通知图标）仍然可见，但在您的内容之上以透明背景渲染。

使用此模式时，请注意您的设计，因为操作系统将始终以白色渲染图标，因此您应始终将屏幕顶部的背景与浅色内容形成对比。此外，重要的是使用 CSS 环境变量在安全区域中渲染内容，如应用设计章节中所述。

The top 0px of your viewport is below the status bar by default; if you add a black-translucent meta tag, the top 0px of your viewport will match the physical top of the screen

安装可靠性

在 15.4 之前的 iOS 和 iPadOS 上，仅当用户打开共享表单（使用浏览器内的共享图标）时才从网络加载 manifest 文件，而不是在页面加载时加载。因此，浏览器直到那时才会检查您的网站是否是 PWA，这可能会导致 manifest 无法加载或花费太多时间的情况，并且浏览器会忽略它。

当浏览器无法按时加载 manifest 时，按“添加到主屏幕”会在主屏幕上放置一个图标，但不会提供应用体验；它只会是浏览器标签页的快捷方式。

资源