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