通过掌握清单文件（manifest）的显示模式，释放您的渐进式网络应用（PWA）的全部潜力。本综合指南探讨了各种显示选项及其在不同平台上对用户体验的影响。
前端 PWA Manifest Display：高级显示模式配置
渐进式网络应用（PWA）正在彻底改变用户与网络内容的交互方式。通过利用现代网络技术，PWA 直接通过浏览器提供类似应用的体验，弥合了传统网站与原生应用之间的差距。PWA 的核心是 Web 应用清单（web app manifest），这是一个 JSON 文件，提供了关于应用的关键信息，包括其名称、图标，以及最重要的——其显示模式。本文将深入探讨 PWA 清单文件中 display 模式属性的高级配置，探索各种选项及其对用户体验的影响。
理解 Web 应用清单文件
在我们深入探讨显示模式的复杂性之前，让我们简要回顾一下 Web 应用清单文件的作用。该清单文件通常命名为 manifest.json 或 manifest.webmanifest，是一个简单的 JSON 文件，包含了关于您的 PWA 的元数据。浏览器使用这些元数据来决定如何安装和显示该应用。清单文件中的关键属性包括：
- name: 您的 PWA 名称，向用户显示。
- short_name: 名称的简短版本，用于空间有限的情况。
- icons: 一组不同尺寸和格式的图标，用于应用的主屏幕图标、启动画面和其他 UI 元素。
- start_url: PWA 启动时加载的 URL。
- display: 这是本文的重点——显示模式决定了 PWA 如何向用户显示。
- background_color: 用于启动画面的背景颜色。
- theme_color: 浏览器用于标题栏和其他 UI 元素的主题颜色。
- description: PWA 的简要描述。
- screenshots: 一组屏幕截图，用于在应用安装横幅中显示。
- categories: PWA 所属的类别数组（例如，“books”、“shopping”、“productivity”）。
- prefer_related_applications: 布尔值，指示是否应优先选择特定平台的应用而非 Web 应用。
- related_applications: 可作为安装替代方案的特定平台应用数组。
清单文件通过 HTML 的 <head> 部分中的一个 <link> 标签链接到您的 PWA：
<link rel="manifest" href="manifest.json">
探索显示模式选项
清单文件中的 display 属性提供了四种不同的显示模式，每种模式都影响 PWA 向用户呈现的方式：
- fullscreen: PWA 占据整个屏幕，隐藏浏览器的 UI 元素，如地址栏和导航按钮。
- standalone: PWA 在其自己的窗口中运行，与浏览器分离，带有标题栏，但没有浏览器 UI 元素。这是 PWA 最常见也是最理想的显示模式。
- minimal-ui: 类似于 standalone，但包含最少的浏览器 UI 元素，如后退、前进和刷新按钮。
- browser: PWA 在标准的浏览器标签页或窗口中打开，显示完整的浏览器 UI。
让我们详细研究每种模式。
1. fullscreen 模式
fullscreen 模式提供最沉浸式的体验，为您的 PWA 最大化屏幕空间。这对于游戏、视频播放器或需要无干扰环境的应用是理想选择。
要配置 fullscreen 模式，只需在您的清单文件中将 display 属性设置为 "fullscreen"：
{
"name": "My Fullscreen PWA",
"display": "fullscreen",
"start_url": "/",
"icons": [
{
"src": "icon.png",
"sizes": "192x192",
"type": "image/png"
}
]
}
fullscreen 模式的注意事项：
- 用户体验： 确保您的 PWA 在全屏环境中提供清晰直观的导航。用户需要能够轻松退出或导航回之前的屏幕。
- 无障碍性： 考虑可能依赖浏览器 UI 元素进行导航的残障用户。在您的 PWA 中提供替代的导航方法。
- 平台支持： 尽管得到广泛支持，但 fullscreen 模式的行为在不同浏览器和操作系统之间可能略有不同。进行彻底的测试至关重要。
- 内容缩放： 确保您的内容在使用 fullscreen 模式时能够正确缩放以适应不同的屏幕尺寸和宽高比。
示例： 游戏应用或专用的视频流媒体服务将从沉浸式的 fullscreen 模式中获益匪浅，让用户能够专注于内容而不受干扰。
2. standalone 模式
standalone 模式提供了一种平衡的方法，在不完全隐藏浏览器 UI 的情况下提供类似应用的体验。PWA 在其自己的顶级窗口中运行，与浏览器分离，并在操作系统的应用启动器中有自己的应用图标。这通常是大多数 PWA 的首选模式。
要配置 standalone 模式，请将 display 属性设置为 "standalone"：
{
"name": "My Standalone PWA",
"display": "standalone",
"start_url": "/",
"icons": [
{
"src": "icon.png",
"sizes": "192x192",
"type": "image/png"
}
]
}
standalone 模式的优点：
- 类似应用的体验： 提供与常规网站在视觉上截然不同的体验，增强用户参与度。
- 主屏幕集成： 允许用户将 PWA 安装到他们的主屏幕，使其易于访问。
- 离线功能： standalone 模式下的 PWA 可以利用 service worker 提供离线功能，增强可靠性。
示例： 电子商务应用或社交媒体客户端在 standalone 模式下会运行得很好，为用户提供类似于原生应用的无缝体验。
3. minimal-ui 模式
minimal-ui 模式与 standalone 类似，但包含一组最少的浏览器 UI 元素，通常是后退、前进和刷新按钮。这种模式提供的沉浸式体验比 standalone 稍差，但对于依赖浏览器导航的 PWA 可能很有用。
要配置 minimal-ui 模式，请将 display 属性设置为 "minimal-ui"：
{
"name": "My Minimal-UI PWA",
"display": "minimal-ui",
"start_url": "/",
"icons": [
{
"src": "icon.png",
"sizes": "192x192",
"type": "image/png"
}
]
}
minimal-ui 模式的用例：
- 依赖浏览器导航： 当您的 PWA 严重依赖浏览器的后退和前进按钮时，
minimal-ui可以为用户提供更熟悉的体验。 - 旧版 Web 应用集成： 如果您正在将旧版 Web 应用迁移到 PWA，
minimal-ui可以通过提供熟悉的浏览器控件来简化过渡。
示例： 文档编辑应用或复杂的 Web 表单可能会受益于 minimal-ui 模式，允许用户使用浏览器的后退和前进按钮轻松地在不同部分之间导航。
4. browser 模式
如果清单文件中未指定 display 属性，则 browser 模式是默认的显示模式。在此模式下，PWA 在标准的浏览器标签页或窗口中打开，显示完整的浏览器 UI，包括地址栏、导航按钮和书签。此模式基本上等同于一个常规网站。
要明确配置 browser 模式，请将 display 属性设置为 "browser"：
{
"name": "My Browser PWA",
"display": "browser",
"start_url": "/",
"icons": [
{
"src": "icon.png",
"sizes": "192x192",
"type": "image/png"
}
]
}
何时使用 browser 模式：
- 简单的 Web 应用： 对于不需要类似应用体验的简单 Web 应用，
browser模式可能就足够了。 - 渐进增强： 您可以为不完全支持 PWA 功能的旧版浏览器使用
browser模式作为后备方案。
示例： 简单的博客或静态网站可能会使用 browser 模式，因为它不需要任何特殊的类似应用的功能。
设置后备显示模式
重要的是要考虑到并非所有浏览器都完全支持所有显示模式。为确保在不同平台上获得一致的体验，您可以在清单文件中使用 display_override 属性指定一个后备显示模式。
display_override 属性是一个按偏好顺序排列的显示模式数组。浏览器将尝试使用数组中它支持的第一个显示模式。如果所有指定的模式都不受支持，浏览器将回退到其默认显示模式（通常是 browser）。
例如，要优先使用 standalone 模式，但回退到 minimal-ui，然后再到 browser，您可以按如下方式配置清单文件：
{
"name": "My PWA with Fallback",
"display": "standalone",
"display_override": ["standalone", "minimal-ui", "browser"],
"start_url": "/",
"icons": [
{
"src": "icon.png",
"sizes": "192x192",
"type": "image/png"
}
]
}
超越基本显示模式：处理边缘情况和平台差异
虽然核心显示模式提供了很大程度的控制，但了解它们如何与各种平台和边缘情况相互作用，对于创建稳健和一致的用户体验至关重要。以下是一些高级注意事项：
1. 特定平台的清单文件
在某些情况下，您可能需要根据用户的操作系统（OS）进行略微不同的配置。例如，您可能希望 iOS 的图标尺寸与 Android 不同。虽然单个清单文件通常就足够了，但对于高度定制的体验，可以采用条件化清单加载。
这可以通过使用服务器端逻辑或 JavaScript 来检测用户的操作系统并提供相应的清单文件来实现。请注意这种方法会增加复杂性。
2. 处理屏幕方向
PWA 可以选择在清单文件中使用 orientation 属性来定义其首选的屏幕方向。例如，将应用锁定为横向模式可以增强游戏或媒体消费体验。
但是，请记住用户最终可以控制其设备的方向。设计您的 PWA 以优雅地处理方向变化，确保内容无论设备位置如何都保持可读和功能正常。
3. 启动画面定制
PWA 加载时短暂显示的启动画面，是创造良好第一印象的机会。定制启动画面的背景颜色（background_color）和主题颜色（theme_color）以与您的品牌形象保持一致。
确保所选颜色与应用图标形成足够的对比度，以最大化可见性和可读性。考虑在不同设备上测试以验证启动画面是否正确渲染。
4. 安全注意事项
PWA 与传统网站一样，应始终通过 HTTPS 提供服务。这可以保护用户浏览器和服务器之间的连接，防止敏感数据被窃听。此外，使用安全上下文是启用 service worker 的先决条件，service worker 是支撑 PWA 功能的核心技术。
验证您服务器的 SSL/TLS 证书是否有效并正确配置。定期更新您的安全协议以减轻潜在的漏洞。
5. 跨设备和浏览器测试
鉴于全球使用的设备和浏览器的多样性，彻底的测试对于确保您的 PWA 在所有目标平台上正常运行至关重要。利用浏览器开发者工具来模拟不同的屏幕尺寸和网络条件。
使用跨浏览器测试服务来自动化在各种浏览器和操作系统上的测试。从不同设备的用户那里收集反馈，以识别和解决任何兼容性问题。
6. 无障碍性最佳实践
在开发任何 Web 应用（包括 PWA）时，无障碍性应是核心考虑因素。遵守 Web 无障碍指南（WCAG）以确保您的 PWA 可供残障人士使用。为图像提供替代文本，使用语义化 HTML 元素，并确保足够的颜色对比度。
使用辅助技术（如屏幕阅读器）测试您的 PWA，以识别和解决任何无障碍障碍。在 fullscreen 模式下，确保提供替代的导航方法。
来自全球的实际案例
让我们探讨一些真实世界的例子，看看不同公司如何利用 PWA 显示模式来增强用户体验：
- 星巴克（全球）： 星巴克的 PWA 利用
standalone模式提供简化的订购体验，类似于其原生移动应用。这使得全球用户可以快速下单并跟踪他们的忠诚度积分。 - Twitter Lite（全球）： Twitter Lite 专为数据敏感地区的用户设计，使用
standalone模式提供高效、轻量级的社交媒体体验。这使得带宽有限地区的用户也能保持联系。 - Flipkart Lite（印度）： Flipkart Lite 是一个电子商务 PWA，利用
standalone模式为印度用户提供移动优先的购物体验。这使得使用旧设备和较慢互联网连接的用户可以轻松浏览和购买产品。 - AliExpress（中国，全球）： AliExpress 的 PWA 可在各种平台上使用，并利用 service worker 在全球范围内提供更快的体验。
可行的见解和最佳实践
为了有效地利用 PWA 清单显示模式，请考虑以下可行的见解和最佳实践：
- 优先考虑用户体验： 选择最符合您的 PWA 目的和目标受众的显示模式。
- 提供清晰的导航： 确保您的 PWA 内有直观的导航，尤其是在
fullscreen模式下。 - 彻底测试： 在不同的浏览器、设备和操作系统上测试您的 PWA。
- 实施后备机制： 使用
display_override确保在不同平台上获得一致的体验。 - 优化性能： 最小化加载时间并为离线使用优化您的 PWA。
- 考虑应用安装横幅： 使用应用安装横幅提示用户将您的 PWA 安装到他们的主屏幕。为此，请正确配置您的清单文件以触发此功能。
- 定期更新您的清单文件： 保持您的清单文件与最新的规范和最佳实践同步。
- 分析用户行为： 跟踪用户在不同显示模式下与您的 PWA 的交互方式，以确定改进领域。
结论
掌握 PWA 清单显示模式的配置对于提供卓越的用户体验至关重要。通过理解每种显示选项的细微差别并考虑特定平台的要求，您可以为多样化的用户需求优化您的 PWA，并创造一个真正引人入胜、类似应用的体验。请记住优先考虑用户体验，在各种平台上进行彻底测试，并根据用户反馈和不断发展的 Web 标准持续改进您的 PWA。通过遵循这些最佳实践，您可以释放 PWA 的全部潜力，并为您的全球受众提供卓越的 Web 体验。