PWA 的最佳实践

适应所有浏览器

您的 PWA 基于 Web 技术。这意味着，除了可以在设备上安装之外，PWA 也可以在 Web 浏览器中运行。为了确保兼容性，必须在各种浏览器和操作系统上测试您的应用。

考虑用户可能使用的各种浏览器，并满足广泛的潜在用户群体。使用功能检测可以为最广泛的受众提供可用的体验。

功能检测也有助于渐进增强 (Progressive Enhancement)，这是一种设计理念，可以为尽可能多的用户提供出色的体验。

通过渐进增强，您首先使用最简单的技术来确保您应用的核心功能普遍可用，然后为支持的设备增强体验。

例如，使用 HTML 的 <form> 元素处理表单提交意味着该表单将在所有浏览器中正常工作，包括不支持 JavaScript 的浏览器。然后，您可以逐步增强表单，通过添加客户端验证和基于 JavaScript 的提交处理，为兼容设备提供更好的体验。

适应所有设备

与在各种浏览器上测试应用的重要性一样，跨设备测试可确保您的应用对最广泛的受众都可用。

响应式设计对于 PWA 至关重要，可以确保内容在任何屏幕尺寸上都可访问。用户应该能够访问所有功能和内容，而无论其设备的屏幕尺寸如何。通过在不同的视口大小下重新排列内容，您可以优先显示重要数据和操作。

确保用户无论如何访问您的内容都能与您的应用进行交互。支持键盘和鼠标，以及触摸或触控笔输入方法。确保您的所有应用功能都可以通过任何输入方法进行访问。

最后，使用语义化 HTML 元素，而不是重新创建自己的按钮或表单元素，因为语义化 HTML 元素可以开箱即用地支持所有用户输入方法。

提供离线体验

已安装应用的用户的期望是它们始终可用；即使连接到缓慢或不可靠的网络，或者设备完全离线。

自定义离线页面

至少，您的 PWA 应该提供一个自定义离线页面，告知用户他们已离线，而不是显示通用的浏览器错误页面。自定义离线页面可提供跨浏览器和设备更一致的体验，并使用户与您的应用保持互动。

您可以通过使用 Service Worker 来拦截网络请求，并在用户离线时响应自定义离线页面，从而提供自定义离线页面。

离线操作

要进一步提供类应用体验，您的 PWA 应该在用户离线时也能运行。这意味着用户即使离线也可以继续使用您应用的部分，最好是全部功能。

考虑以下场景：用户撰写了一封长邮件并点击“发送”，却没意识到他们已失去网络连接。因为您的应用支持离线运行，该邮件将被本地保存，并在设备重新联网后自动发送。

了解更多关于离线和后台操作的信息。

支持深层链接

深层链接是超链接，指向您应用域内的特定页面。例如，您应用的主页可能位于 https://example.com/，但您也可以链接到特定产品页面 https://example.com/products/123。

通过唯一 URL 引用任何资源的能力是 Web 最强大的功能之一。由于 PWAs 构建在 Web 技术之上，因此它们可以，也应该，利用这一特性。

通过唯一的 URL 使您应用的不同部分可用，允许用户收藏、直接导航到以及共享您应用内的特定内容。它还允许搜索引擎索引您应用的内容，并通过 Web 搜索使其可发现。

提高速度

用户对已安装的应用的期望与对网站不同。用户期望网站需要时间加载和导航，尤其是在网络连接较差的情况下。然而，他们期望已安装的应用始终快速响应。

您的应用加载和执行核心功能的速度在用户参与度和留存率方面起着关键作用。应用响应越慢，用户越可能放弃。

有工具、API 和最佳实践可以帮助衡量和改进性能。要了解更多，请参阅 Web 性能。

使其易于访问

可访问性对于确保每个人都能使用您的应用至关重要，无论个人能力如何，或者他们使用什么设备来访问您的应用。可访问性确保尽可能多的人可以使用您的应用。法律也要求可访问性。此外，可访问性通常会为所有人带来更好的用户体验，而不仅仅是那些有永久或暂时性残疾的人。

了解如何在可访问性中使您的应用易于访问。

提供类应用体验

与操作系统集成

用户期望已安装的 PWA 的行为方式与任何已安装的平台特定应用相同。要提供用户期望的类应用体验，请以某种方式将您的应用与操作系统集成。例如：

• 使用 Notifications API 向用户设备发送通知。
• 使用 file_handlers Web 应用清单成员处理文件。
• 在应用图标上显示徽章。
• 启用应用之间的数据共享。

许多 Web 应用清单成员 可用于自定义您的应用在用户设备上的显示方式，并更深入地与操作系统集成。

应用的外观和感觉

用户安装应用是为了获得比网站更专注的体验，并更有效地完成任务。他们期望应用更精简，减少混乱，并专注于最重要的任务。

确保您的 PWA 提供类应用体验，请考虑以下指南：

• 使用 standalone 显示模式，为您的应用提供自己的专用窗口。
• 定义您的应用图标.
• 使用 prefers-color-scheme 媒体功能检测用户的首选主题，并相应地调整您应用的主题。
• 自定义您应用的主题和背景颜色，以提供更精致的体验，使其感觉更像平台特定应用。
• 精简内容，专注于您的应用允许用户完成的最重要任务。这可能意味着删除传统网站中常见的大型标题和页脚，而是用菜单的隐喻替换它们。
• 使用 system-ui font-family 使您的内容感觉更像原生平台，并且加载速度更快，而无需用户下载自定义字体。

另见

• What makes a good Progressive Web App on web.dev (2022)。
• Best practices for PWAs on learn.microsoft.com (2023)。