PWA 的最佳实践

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

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

特性检测还有助于渐进增强，这是一种设计理念，可以为尽可能多的用户提供良好的体验。

使用渐进增强，你首先专注于使应用的核心功能在所有地方都能正常工作，方法是使用最简单的技术，然后为支持的设备增强体验。

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

与跨各种浏览器测试应用一样重要，跨设备测试确保你的应用能够访问最广泛的受众。

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

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

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

已安装应用的用户期望它们始终能够工作；即使连接到速度缓慢或不可靠的网络，或者设备完全离线时也是如此。

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

你可以使用服务工作线程拦截网络请求并在用户离线时响应自定义离线页面来提供自定义离线页面。

为了更进一步并提供类似应用的体验，你的 PWA 应该在用户离线时也能正常工作。这意味着用户即使在离线时也能继续使用应用的一些（最好是全部）功能。

考虑以下场景：用户撰写了一封很长的电子邮件，然后点击“发送”，但没有意识到他们已断开网络连接。因为你的应用可以在离线状态下工作，所以电子邮件将保存在本地，并在设备重新联机后自动发送。

详细了解离线和后台操作。

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

通过唯一的 URL 引用任何资源的能力是 Web 最强大的功能之一。由于 PWA 基于 Web 技术构建，因此它们可以（也应该）利用此功能。

使应用的不同部分可以通过唯一的 URL 访问，使用户能够为应用中的特定内容添加书签、直接导航到该内容以及共享该内容。它还允许搜索引擎索引应用的内容并使其可以通过 Web 搜索被发现。

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

应用加载和执行其核心功能的速度在用户参与度和留存率中起着关键作用。应用响应时间越长，用户放弃它的可能性就越大。

有一些工具、API 和最佳实践可以帮助测量和提高性能。要了解更多信息，请参阅Web 性能。

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

了解如何在可访问性中使你的应用可访问。

用户期望已安装的 PWA 的行为与任何已安装的特定于平台的应用一样。为了提供用户期望的类似应用的体验，请以某种方式将你的应用与操作系统集成。例如

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

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

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

通过考虑以下指南，确保你的 PWA 提供类似应用的体验

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

• 什么构成了一个好的渐进式 Web 应用 on web.dev (2022).
• PWA 的最佳实践 on learn.microsoft.com (2023).