本章将重点介绍在浏览器标签页之外呈现内容的一些关键方面。
窗口
不同的操作系统对于应用窗口的定义也不尽相同。 例如，在 iPhone 上，某个应用始终会占据 100% 的屏幕。在 Android 和 iPad 上，应用程序通常以全屏模式运行，但可以在两个应用程序之间共享屏幕，但是一次只能打开一个应用程序实例。 相比之下，在桌面设备上，应用可以一次打开多个实例。 它与所有其他打开的应用共用可用的屏幕空间。 每个应用实例都可以调整大小并放在屏幕上的任何位置，甚至可以与其他应用重叠。
图标
我们通过图标来识别应用。当您在设置中搜索应用程序时、启动应用程序或看到正在运行的应用程序时，系统会显示该图标。
其中包括：
- 主屏幕（iOS、iPadOS、Android）。
- 应用启动器（macOS、Android）。
- “开始”菜单或应用菜单（Windows、ChromeOS、Linux）。
- 基座、任务栏或多任务面板（适用于所有操作系统）。
为渐进式 Web 应用创建图标时 请确保其图标与平台无关，因为每个操作系统都可以渲染图标并对其应用不同的形状蒙版，如下图所示。
设置应用主题
您可以通过多种方式在 PWA 中自定义应用样式，包括：
- 主题颜色：定义桌面上窗口标题栏的颜色和移动设备上的状态栏颜色。使用元标记时，您可以选择不同方案（例如深色模式或浅色模式），系统会根据用户的偏好设置来使用这些方案。
- 背景颜色：定义应用及其 CSS 加载之前的窗口颜色。
- 强调色：定义内置浏览器组件（如表单控件）的颜色。
显示模式
您可以为自己的渐进式 Web 应用定义所需的窗口体验。有三个选项可供选择：
- 全屏
- 独立式
- 极简的用户界面
全屏体验
全屏体验适合提供沉浸式体验，例如游戏、VR 或 AR 体验。PWA 目前仅适用于 Android 设备，并且可隐藏状态栏和导航栏，让 PWA 完全占据整个屏幕空间来显示您的内容。
桌面设备和 iPadOS 不支持全屏 PWA；不过，您可以在 PWA 中使用 Fullscreen API，以便在用户的请求下以全屏模式显示应用。
独立体验
独立模式是渐进式 Web 应用最常用的选项，在无任何浏览器导航界面的操作系统标准窗口中显示 PWA。此窗口可能还包含一个由浏览器控制的菜单，用户可在该菜单中执行以下操作：
- 复制当前网址。
- 查看、应用或停用浏览器扩展程序。
- 查看和更改权限。
- 检查当前来源和 SSL 证书。
当 PWA 在标签页中呈现时，标题栏可能还会显示权限和硬件使用情况，从而取代多功能框或网址栏。
<ph type="x-smartling-placeholder">
在移动设备上，独立 PWA 体验会创建一个保持状态栏可见的标准屏幕，以便用户仍然可以查看通知、时间和电池电量。它通常没有任何由浏览器控制的菜单，就像桌面设备独立体验一样。
Android 上的某些浏览器会在 PWA 在前台运行时创建固定的静默通知，以便用户复制当前网址或其他选项。
极简界面
此模式适用于 Android 和桌面操作系统上的渐进式 Web 应用。 当您使用它时，呈现 PWA 的浏览器会显示一个极简的界面，以帮助用户在应用中导航。
在 Android 上，您将获得一个标题栏，用于呈现当前的 <title> 元素和源站，其中包含一个小下拉菜单。在桌面设备上，您会在标题栏中看到一组有助于导航的按钮，其中包括返回按钮，以及一个根据当前加载状态在停止和重新加载操作之间切换的控件。
针对桌面设备优化设计
当您设计可在桌面设备上运行的渐进式 Web 应用时， 您需要考虑与浏览器标签页中或移动操作系统中的应用相比，窗口大小是无限可能的。
在第 3 章中，我们提到了迷你模式：桌面应用的大小可以达到 200 x 100 像素。此窗口将使用 HTML 中 <title> 元素的内容作为窗口的标题。当您在应用间和其他位置按 alt-tab 键时，也会呈现这些内容。
请留意您的 HTML 的 <title> 元素，并重新考虑如何使用该元素。<title> 不仅仅适用于 SEO，而且不仅适用于呈现浏览器标签页中的前几个字符；它就会成为独立桌面窗口的用户体验的一部分。
CSS 最佳实践
当内容以独立形式呈现时，您获享的 CSS 布局、设计和动画体验都是有效的。不过，下面提供了一些提示和技巧，可帮助您改善独立窗口的体验。
媒体查询
您可以在 PWA 中使用的第一个媒体查询是接受值 browser、standalone、minimal-ui 或 fullscreen 的 display-mode 属性。
此媒体查询会对每种模式应用不同的样式。 例如，您可以仅在浏览器模式下呈现安装邀请，或者仅在用户通过系统图标使用您的应用时呈现某条特定信息。这可能包括添加应用在独立模式下启动时使用的返回按钮。
/* 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 时，他们会期望应用行为。虽然定义它的含义并不容易，但默认网页行为在某些情况下无法提供最佳体验。
用户选择
内容通常可使用鼠标或指针选择，也可使用按住触摸手势进行选择。虽然这对内容有帮助，但对于 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 的凹口）。在这些情况下，某些浏览器会公开环境变量，并提供用于显示内容的安全区域。
如果您希望拥有对屏幕（甚至不可见区域）的完全访问权限，以呈现您的颜色或图片，请在 <meta name="viewport"> 标记的内容中添加 viewport-fit=cover。然后，使用 safe-area-inset-* 环境变量将您的内容安全地扩展到这些区域。