应用设计

本章将重点介绍在浏览器标签页之外呈现内容的一些关键方面。

窗口

对于什么是应用窗口，不同的操作系统会有不同的想法。例如，在 iPhone 上，应用始终会占据 100% 的屏幕空间。在 Android 和 iPad 上，应用通常以全屏模式运行，但也可以在两个应用之间共享屏幕，但每次只打开一个应用实例。相比之下，在桌面设备上，应用可以一次打开多个实例。它会与所有其他打开的应用共享可用的屏幕空间。每个应用实例可调整大小并将其放置在屏幕上的任意位置，即使与其他应用重叠，也是如此。

图标

我们通过图标来识别应用。当您搜索应用、在“设置”中、在何处启动应用，以及查看正在运行的应用时，都会显示该图标。

其中包括：

  • 主屏幕（iOS、iPadOS、Android）。
  • 应用启动器（macOS、Android）。
  • “开始”菜单或应用菜单（Windows、ChromeOS、Linux）。
  • 基座、任务栏或多任务面板（适用于所有操作系统）。

为渐进式 Web 应用创建图标时，请确保其图标与平台无关，因为每个操作系统都可以呈现图标并对其应用不同的形状蒙版，如下图所示。

不同平台不同形状的 PWA 图标。

设置应用主题

您可以通过多种方式自定义 PWA 中的应用样式，包括：

  • 主题颜色：定义桌面设备上窗口标题栏的颜色和移动设备状态栏的颜色。使用元标记，您可以选择不同的方案（例如深色模式或浅色模式），并且系统会根据用户的偏好设置使用这些方案。
  • 背景颜色：定义加载应用及其 CSS 之前的窗口颜色。
  • 强调色：定义内置浏览器组件（例如表单控件）的颜色。
显示主题和强调色的桌面设备 PWA，以及显示主题和背景颜色的 Android PWA 启动画面。
显示主题和强调色的桌面 PWA，以及显示主题和背景颜色的 Android PWA 启动画面。

显示模式

您可以定义自己的渐进式 Web 应用所需的窗口体验，有以下三个选项可供选择：

  • 全屏
  • 独立式
  • 极简的界面

全屏体验

全屏体验适用于沉浸式体验，例如游戏、VR 或 AR 体验。此功能目前仅适用于 Android 设备，并且会隐藏状态栏和导航栏，让 PWA 完全占据整个屏幕显示您的内容。

在桌面设备和 iPadOS 上，全屏 PWA 不受支持；但是，您可以在 PWA 中使用 Fullscreen API，根据用户请求将您的应用全屏显示。

独立体验

独立模式是渐进式 Web 应用最常用的选项，即在操作系统标准窗口中显示 PWA，没有任何浏览器导航界面。该窗口可能还包含一个由浏览器控制的菜单，用户可以在该菜单中执行以下操作：

  • 复制当前网址。
  • 查看、应用或停用浏览器扩展程序。
  • 查看和更改权限。
  • 检查当前来源和 SSL 证书。

当 PWA 在标签页中呈现时，标题栏也可能会取代多功能框或网址栏，显示权限和硬件使用情况。

桌面设备上安装了 Microsoft Edge 且显示菜单的 PWA。 一款通过桌面版 Google Chrome 安装的 PWA，显示了下拉菜单和插件图标。
上图显示了 PWA 如何在桌面设备上以独立模式显示在 Microsoft Edge 和 Chrome 中。

在移动设备上，独立的 PWA 体验会创建一个标准屏幕，让状态栏保持可见，以便用户仍然可以看到通知、时间和电池电量。它通常不包含任何由浏览器控制的菜单，而不像桌面设备独立体验可能包含的菜单。

呈现独立应用的 iOS 设备。

Android 上的一些浏览器会在 PWA 在前台创建固定的静默通知时创建此类通知，以便用户复制当前网址或其他选项。

Chrome 呈现的 Android 通知，其中显示了对当前处于活动状态的 PWA 执行的一些操作。

极简的界面

此模式适用于 Android 和桌面设备操作系统上的渐进式 Web 应用。当您使用 PWA 时，呈现 PWA 的浏览器会显示最小的界面，以帮助用户在应用内导航。

在 Android 上，您将获得一个标题栏，用于呈现当前的 <title> 元素和出发地，并提供一个较小的下拉菜单。在桌面设备上，您会在标题栏中看到一组有助于导航的按钮，其中包括返回按钮，以及一个可根据当前加载状态在停止和重新加载操作之间切换的控件。

Microsoft Edge 上的桌面版极简界面，其中包含返回和重新加载按钮
在 Android 上，浏览器使用只读主题导航栏来实现最简界面，这里是 Firefox 和 Chrome

优化桌面设备的设计

在设计可在桌面设备上运行的渐进式 Web 应用时，需要考虑与在浏览器的标签页中或在移动操作系统中作为应用相比，窗口大小具有无限的可能性。

在第 3 章中，我们提到了迷你模式：桌面应用可以小到 200x100 像素。此窗口会将您的 HTML 中 <title> 元素的内容用作窗口的标题。当您在应用之间和其他位置使用 Alt-Tab 键时，相应内容也会呈现。

请注意 HTML 的 <title> 元素，并重新考虑如何使用该元素。<title> 不仅仅用于搜索引擎优化 (SEO)，也不只是呈现浏览器标签页中的第一个字符，还会成为独立桌面窗口用户体验的一部分。

CSS 最佳实践

当您的内容以独立体验呈现时，您对 CSS 布局、设计和动画的所有体验均有效。不过，您可以参考一些提示和技巧来改善独立窗口的体验。

媒体查询

您可以在 PWA 中使用的第一个媒体查询是 display-mode 属性，它接受值 browser、standalone、minimal-ui 或 fullscreen。

此媒体查询会对每种模式应用不同的样式。 例如，您可以仅在浏览器模式下呈现安装邀请，或者仅在用户使用系统图标时呈现一条特定信息。您可能需要添加一个返回按钮，以便在您的应用以独立模式启动时使用。

/* It targets only the app used within the browser */
@media (display-mode: browser) {
}
/* It targets only the app used with a system icon in standalone mode */
@media (display-mode: standalone) {
}
/* It targets only the app used with a system icon in all mode */
@media (display-mode: standalone), (display-mode: fullscreen), (display-mode: minimal-ui) {
}

应用体验

用户在使用安装的 PWA 时，会希望看到应用的行为。虽然定义具体含义并非易事，但在某些情况下，默认 Web 行为并不能提供最佳体验。

用户选择

内容通常可以使用鼠标或指针，或按住触摸手势来选择。虽然对内容有帮助，但并不能为 PWA 中的导航项、菜单和按钮提供最佳体验。

一款计算器 PWA，您可以选择每个互动式按钮，例如数字。

因此，最好使用 user-select: none 及其 -webkit- 前缀版本停用针对这些元素的用户选择功能：

.unselectable {
   user-select: none;
}

强调色

在 PWA 中，您可以使用 accent-color 属性在 HTML 表单控件中指定与您的品牌相匹配的颜色。

系统字体

如果您希望对话框或消息等元素与用户的默认平台字体相匹配，可以使用以下字体系列：

selector {
  font-family: -apple-system, BlinkMacSystemFont,
    "Segoe UI", system-ui, Roboto, Oxygen-Sans, Ubuntu, Cantarell,
    "Helvetica Neue", sans-serif;
}

下拉即可刷新

现代移动浏览器（例如 Google Chrome 和 Safari）具有一项功能，可在用户下拉页面时刷新页面。在某些浏览器（例如 Android 版 Chrome）中，独立的 PWA 也启用了该行为。

您可能需要停用此操作。例如，在提供您自己的手势管理或刷新操作时，或者用户可能会无意中触发相应操作。

您可以使用 overscroll-behavior-y: contain: 停用此行为。

  body {
    overscroll-behavior-y: contain;
  }

安全区域

某些设备没有无遮挡的矩形屏幕；相反，其屏幕可能是不同的形状（如圆形），或屏幕部分不能使用，如 iPhone 13 的缺口。在这种情况下，有些浏览器会公开环境变量，其中包含可以显示内容的安全区域。

上图是一部横向版凹口设备，在标准视口的两侧显示未渲染的区域；下图是一部借助视口-fit=cover，可以完整访问视口的设备。

如果您希望能够完全访问屏幕（甚至是不可见区域）以呈现颜色或图片，请在 <meta name="viewport"> 标记的内容中添加 viewport-fit=cover。然后，使用 safe-area-inset-* 环境变量将您的内容安全地扩展到这些区域。

资源