增强功能

有许多增强功能可以提高 PWA 的转化次数和使用量。

应用快捷方式是指指向 PWA 的深层链接的静态列表,这些链接会写入清单中。Web 应用清单规范。借助该规范,您可以定义指向 PWA 中不同部分或功能的快捷方式列表,从而加快导航到经常访问的部分。

应用快捷方式适用于大多数桌面操作系统和支持 WebAPK 的 Android,它们会显示在主屏幕、Dock 或任务栏中应用图标上的上下文菜单中,如下图所示:

Android 和 macOS 中的应用快捷方式。

如需访问此菜单,用户必须右键点击或长按 PWA 的图标。

快捷方式在清单的 shortcuts 成员中定义。它接受一个成员数组,该数组具有以下属性:

name
将向用户显示的文本,通常在上下文菜单中。
url
当用户从这个快捷方式启动 PWA 时,PWA 应加载的网址。该网址应位于您的 PWA 范围内,并且应深层链接到 nameshort_name 所描述的功能。
short_name
(可选)当没有足够的空间来显示 name 字段的完整值时,使用的较短名称。
description
(可选)此快捷方式的用途说明
icons
(可选)一个包含 srctypesizes 和可选 purpose 字段的图标对象数组,用于描述应使用哪些图片来代表快捷方式

您应将应用快捷方式视为尽力提供的功能。这意味着,您无法依赖这些快捷方式始终显示,即使它们显示,您也不知道系统会显示多少个快捷方式,或者平台是否会忽略这些图标,因为这取决于浏览器的自由裁量。我们无法针对每个平台进行完整讨论,但您可以通过下文了解它在 Android 和桌面设备上的运作方式。应对这种不确定性的最佳方式是按优先级对项目进行排序。

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

iOS 和 iPadOS

发布 PWA 时,可以进行一些增强,以改善 iOS/iPadOS 上 Safari 用户的体验。

启动画面

“网络应用清单”章节所述,Android 会根据清单的值自动创建启动画面。但在 iOS 和 iPadOS 上,情况并非如此。在这些设备中,您应使用 <link> 元素在 HTML 中将启动画面定义为静态图片。

这些图片在 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)。

如需查看更新后的 iOS 和 iPadOS 屏幕尺寸列表,请参阅 Apple 人机界面准则

您可以使用 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 静态图片,并为您提供包含 <link> 元素的 HTML 代码,以便注入到文档中。PWA 资源生成器就是此类工具的一个示例。
  • 客户端生成器,这是一个 JavaScript 工具,可根据当前设备的类型和屏幕大小,将一个或多个启动图片的 base64 版本嵌入到 <link> 注入的元素中。您可以使用内存画布渲染图片,并将其转换为包含 PNG 文件的 data: URI。PWA Compat 库是一款易于使用的客户端库,它通过克隆 Android 的典型启动画面来实现此目的。

检测 Apple 移动平台上的 PWA

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

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

  • 如果 navigator.standaloneundefined,则表示用户使用的不是 iPadOS 或 iOS 设备。
  • 如果 navigator.standalonefalse,则表示用户在浏览器中打开了 PWA,并在其中使用该 PWA。
  • 如果 navigator.standalonetrue,则表示用户从主屏幕打开了 PWA,并获得了独立 PWA 体验。

全屏支持

在 iOS 和 iPad 上的 Safari 中,仅支持将 display: standalone 用作您的 PWA 的显示模式

在下一张图片中,左侧是采用主题颜色的默认独立设计,右侧则是采用全屏 iOS 模式的 PWA,可让您在状态栏后面呈现内容。

独立的默认行为(左)和全屏 iOS 屏幕(右)。

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

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

在此模式下,设备的状态栏(显示时钟、电池电量和通知图标的顶部)仍然可见,但会以透明背景呈现在内容顶部。

使用此模式时,请谨慎设计,因为操作系统始终会以白色呈现图标,因此您应始终让屏幕顶部的背景与浅色内容形成对比。此外,请务必使用 CSS 环境变量在安全区域中呈现内容,如“应用设计”章节中所述。

默认情况下,视口的顶部 0px 位于状态栏下方;如果您添加了黑色半透明元标记,视口的顶部 0px 将与屏幕的实际顶部一致

安装可靠性

在 iOS 和 iPadOS 15.4 之前的版本中,只有在用户使用浏览器中的“分享”图标打开 Share Sheet 时,系统才会从网络加载清单文件,而不是在页面加载时加载。因此,在该时刻之前,浏览器不会检查您的网站是否为 PWA,这可能会导致以下情况:清单无法加载或花费太长时间,而浏览器会忽略它。

如果浏览器无法按时加载清单,则按“添加到主屏幕”会在主屏幕上放置一个图标,但不会提供应用体验;它只会成为浏览器标签页的快捷方式。

资源