增强功能

有许多增强功能可提高 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 用户的体验。

启动画面

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

这些映像在 Apple 设备上称为启动映像,它们使用值为 apple-touch-startup-imagerel 属性,例如:

<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 静态图片,并提供包含 <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 图标的显示模式。虽然 Android 设备不支持 display: fullscreen,但可以使用非标准元标记使 PWA 进入全屏模式。

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

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

如果您在 HTML 中添加以下代码,您的 iOS 和 iPadOS 上的 PWA 会进入全屏模式,但不同于 Android 模式。

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

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

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

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

安装可靠性

版本低于 15.4 的 iOS 和 iPadOS 中的 Safari 仅在用户打开分享表单(使用浏览器中的分享图标)时从网络加载清单文件,在网页加载时不加载。因此,Safari 在此之前不会检查您的网站是否为 PWA,这可能会导致无法加载清单或清单用时过长,导致 Safari 忽略它。

当 Safari 无法按时加载清单时,按“添加到主屏幕”在主屏幕上放置图标,但不提供应用体验;它只能是 Safari 标签页的快捷方式。

资源