有许多增强功能可以提高 PWA 的转换率和使用率。
应用快捷方式
应用快捷方式是指向 PWA 的深层链接的静态列表,它们写入您的清单中。Web 应用清单规范。您可通过它定义指向 PWA 中不同部分或功能的快捷方式列表,从而加快用户导航到常用部分的速度。
应用快捷方式在大多数桌面设备操作系统和 Android 上都支持 WebAPK,并且显示在主屏幕、Dock 或任务栏中的应用图标的上下文菜单中,如下图所示:
要访问此菜单,用户必须右键点击或长按 PWA 的图标。
快捷方式在清单的 shortcuts
成员中定义。它接受具有以下属性的成员数组:
name
- 向用户显示的文本,通常在上下文菜单中。
url
- 用户通过此快捷方式启动 PWA 时应加载的网址。此网址应该是您的 PWA 范围内的网址,并且应深层链接到
name
或short_name
所描述的功能。 short_name
- (可选)如果没有足够的空间来显示
name
字段的完整值,则使用较短的名称。 description
- (可选)说明此快捷方式的用途
icons
- (可选)包含
src
、type
、sizes
和可选purpose
字段的图标对象数组,用于描述应表示快捷方式的图片
您应将应用程序快捷方式视为尽力而为的功能。这意味着您无法依靠这些快捷方式始终显示,即使它们出现,您也不知道会显示多少快捷方式,也不知道平台是否会忽略这些图标,因为浏览器自行决定。我们不会针对每个平台进行全面讨论,但您可以在下面了解其在 Android 和桌面设备上的运作方式。处理这种不确定性的最佳方法是按优先级对商品进行排序。
以下代码示例定义了不同的应用快捷方式,如果您在 Android 上使用 Chrome 安装应用,或者在桌面设备上使用 Edge 或 Chrome 安装应用,可以尝试使用这些快捷方式。
iOS 和 iPadOS
在发布 PWA 时,我们提供了一些增强功能,可改善 iOS/iPadOS 上的 Safari 用户的体验。
启动画面
如“Web 应用清单”一章所述,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 上需要包含更多情况,例如横向/纵向打开以及在多任务模式(例如屏幕的 1/3、1/2 或 2/3)下渲染 PWA。
您可以参阅 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.standalone
为undefined
,则表示用户未使用 iPadOS 或 iOS 设备。 - 如果
navigator.standalone
为false
,则表示用户在浏览器中打开了 PWA,并且正在使用该应用。 - 如果
navigator.standalone
为true
,则表示用户从主屏幕打开了 PWA,并且正在享受独立的 PWA 体验。
全屏支持
在 iOS 和 iPad 上的 Safari 中,PWA 图标的显示模式仅支持 display: standalone
。虽然 Android 设备不支持 display: fullscreen
,但可以使用非标准元标记让您的 PWA 进入全屏模式。
在下图中,左侧是采用主题颜色的默认独立设计,右侧是具有全屏 iOS 模式的 PWA,您可以在状态栏后面呈现内容。
如果您在 HTML 中添加以下标记,则 iOS 和 iPadOS 上的 PWA 会进入全屏模式,但全屏模式不同于 Android 模式。
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
在此模式下,设备的状态栏(显示时钟、电池电量和通知图标的顶部)仍然可见,但会以透明背景呈现在内容顶部。
使用此模式时,请谨慎设计,因为操作系统始终会以白色呈现图标,因此您应始终将屏幕顶部的背景与浅色内容形成鲜明对比。此外,请务必使用 CSS 环境变量在安全区域内呈现内容,如《应用设计》章节中所述。
安装可靠性
对于 iOS 15.4 之前的版本和 iPadOS 上的 Safari,仅当用户打开共享表单时(在浏览器中使用共享图标),而不是在网页加载时,Safari 才会从网络加载清单文件。因此,Safari 在此之前不会检查您的网站是否为 PWA,这可能导致无法加载清单或清单耗时过长,进而导致 Safari 忽略它。
当 Safari 无法及时加载清单时,按“添加到主屏幕”会在主屏幕上放置一个图标,但不会提供应用体验;它只是 Safari 标签页的快捷方式。