是什么造就了优秀的渐进式 Web 应用？

使用集合保持井井有条 根据您的偏好保存内容并进行分类。

性能在任何在线体验的成功中都起着重要作用，因为高性能网站比性能差的网站更能吸引和留住用户。专注于优化以用户为中心的性能指标。

原因

速度对于让用户*使用*您的应用至关重要。事实上，当页面加载时间从 1 秒增加到 10 秒时，用户跳出的概率会增加 123%。性能不仅仅在 load 事件时停止。用户永远不应怀疑他们的互动（例如，点击按钮）是否已注册。滚动和动画应感觉流畅。性能会影响您的整个体验，包括您的应用的行为方式以及用户对其的感知方式。

虽然所有应用程序都有不同的需求，但 Lighthouse 中的性能审核基于 Core Web Vitals，并且在这些审核中获得高分将使您的用户更有可能获得愉快的体验。您还可以使用 PageSpeed Insights 或 Chrome 用户体验报告 来获取您的 Web 应用的真实性能数据。

方法

请参阅我们的快速加载时间指南，了解如何使您的 PWA 启动迅速并保持快速。

用户可以在安装您的 Web 应用之前使用他们选择的任何浏览器来访问它。

原因

渐进式 Web 应用首先是 Web 应用，这意味着它们需要在各种浏览器中运行。

根据 Jeremy Keith 在 弹性 Web 设计 中的说法，一种有效的方法是识别核心功能，使用尽可能简单的技术使这些功能可用，然后在可能的情况下增强体验。在许多情况下，这意味着首先仅使用 HTML 创建核心功能，然后使用 CSS 和 JavaScript 增强用户体验，以创建更具吸引力的体验。

以表单提交为例。实现它的最简单方法是使用 HTML 表单提交 POST 请求。构建完成后，您可以使用 JavaScript 增强体验，以进行表单验证并通过 AJAX 提交表单，从而改善支持它的用户的体验。

您的用户在各种设备和浏览器上体验您的网站。您不能只针对该频谱的顶端。使用功能检测为最广泛的潜在用户提供可用的体验，包括那些使用尚不存在的浏览器和设备的用户。

方法

Jeremy Keith 的 弹性 Web 设计 是一本优秀的资源，描述了如何在这种跨浏览器、渐进式方法论中思考 Web 设计。

延伸阅读

• A List Apart 的 了解渐进增强 是对该主题的良好介绍。
• Smashing Magazine 的 渐进增强：它是什么，以及如何使用它？ 提供了实用的介绍，并链接到更高级的主题。
• MDN 的 实现功能检测 文章讨论了如何通过直接查询来检测功能。

用户可以在任何屏幕尺寸上使用您的 PWA，并且所有内容在任何视口尺寸下都可用。

原因

设备有各种尺寸，用户可能会在各种尺寸下使用您的应用程序，即使在同一设备上也是如此。因此，至关重要的是，不仅要确保您的内容适合视口，还要确保您网站的所有功能和内容在所有视口尺寸下都可用。

用户想要完成的任务和他们想要访问的内容不会随视口大小而改变。您可以为不同的视口大小重新排列您的内容，并且它应该以某种方式都在那里。事实上，正如 Luke Wroblewski 在他的著作《Mobile First》中所述，从小处着手并调整您为较大屏幕的设计可以改进网站的设计

移动设备要求软件开发团队专注于应用程序中最重要的数据和操作。在 320 x 480 像素的屏幕中，根本没有空间容纳无关紧要的不必要元素。您必须优先考虑。

方法

关于响应式设计有很多资源，包括 Ethan Marcotte 的原始文章、与之相关的重要概念的集合，以及大量的书籍和讲座。要将此讨论范围缩小到响应式设计的内容方面，请参阅 内容优先设计 和 内容输出响应式布局。最后，虽然它侧重于移动设备，但 Josh Clark 的 七个致命的移动神话 中的课程对于响应式网站的小尺寸视图与对于更广泛的移动设备同样重要。

当用户离线时，让他们留在您的 PWA 中比退回到默认浏览器离线页面提供更无缝的体验。

原因

用户期望已安装的应用无论其连接状态如何都能正常工作。特定于平台的应用在离线时永远不会显示空白页，而 PWA 永远不应显示浏览器默认离线页面。提供自定义离线体验，无论是在用户导航到未缓存的 URL 时，还是在用户尝试使用需要连接的功能时，都有助于您的 Web 体验感觉像是其运行设备的一部分。

方法

在 Service Worker 的 install 事件期间，您可以预缓存自定义离线页面，以便在用户离线时显示。查看 创建离线回退页面 以了解如何自行实现它。请注意，如果未提供，Chrome 将显示 基本离线页面。

安装或向其设备添加应用的用户往往会更多地参与这些应用。

原因

安装渐进式 Web 应用使其外观、感觉和行为都像所有其他已安装的应用一样。它从用户启动其他应用的同一位置启动。它在自己的应用窗口中运行，与浏览器分开，并且它像其他应用一样出现在任务列表中。

与特定于设备的应用一样，安装您的应用的用户是您参与度最高的受众，并且通常具有与移动设备上应用用户相当的参与度指标。这些指标包括比普通访问者更多的重复访问、更长的网站停留时间和更高的转化率。

方法

请参阅我们的可安装指南，了解如何使您的 PWA 可安装。

在并非严格要求连接的情况下，您的应用在离线状态下的工作方式与在线状态下相同。

原因

除了提供自定义离线页面外，用户还期望 PWA 可以在离线状态下使用。例如，旅行和航空公司应用应在离线时轻松提供旅行详情和登机牌。音乐、视频和播客应用应允许离线播放。社交和新闻应用应缓存最近的内容，以便用户可以在离线状态下阅读。用户还期望在离线时保持身份验证，因此请设计用于离线身份验证。离线 PWA 为用户提供真正的类似应用的体验。

方法

在确定用户期望哪些功能在离线状态下工作后，您需要使您的内容可用并适应离线环境。您可以使用 IndexedDB（一种浏览器内 NoSQL 存储系统）来存储和检索数据，并使用 后台同步 让用户在离线时执行操作，并将服务器通信推迟到用户再次获得稳定连接为止。您还可以使用 Service Worker 存储其他类型的内容（例如图像、视频文件和音频文件）以供离线使用，并实施 安全、持久的会话 以保持用户身份验证。从用户体验的角度来看，您可以使用 骨架屏，在加载时让用户感知到速度和内容，然后可以根据需要回退到缓存内容或离线指示器。

所有用户交互均符合 WCAG 2.0 无障碍功能要求。

原因

大多数用户在他们生命中的某个时刻，都希望以 WCAG 2.0 无障碍功能要求涵盖的方式使用您的 PWA。人类与您的 PWA 互动和理解的能力存在于一个范围内，需求可能是暂时的或永久的。通过使您的 PWA 无障碍，您可以使其对所有人可用。

方法

W3C 的 Web 无障碍功能简介 是一个好的起点。大多数无障碍功能测试必须手动完成。Lighthouse 中的 无障碍功能 审核、axe 和 Accessibility Insights 等工具可以帮助您自动化一些无障碍功能测试。使用语义正确的元素而不是自行重新创建这些元素也很重要，例如 a 和 button 元素。这确保了当您确实需要构建更高级的功能时，可以满足无障碍功能期望（例如何时使用箭头与选项卡）。A11Y Nutrition Cards 针对某些常见组件提供了有关此方面的出色建议。

您的 PWA 可以通过搜索轻松发现。

原因

Web 的最大优势之一是通过搜索发现网站和应用的能力。事实上，超过一半的网站流量来自自然搜索。确保内容存在规范网址，并且搜索引擎可以索引您的网站对于让潜在用户找到您的 PWA 至关重要。当采用客户端渲染时尤其如此。

方法

首先确保每个 URL 都有一个唯一的、描述性的标题和元描述。然后，您可以使用 Google Search Console 和 Lighthouse 中的 搜索引擎优化审核 来调试和修复 PWA 的可发现性问题。您还可以使用 Bing 或 Yandex 的网站站长工具，并考虑在您的 PWA 中包含使用来自 Schema.org 的架构的结构化数据。

您的 PWA 可以同样方便地使用鼠标、键盘、手写笔或触摸。

原因

设备提供各种输入方法，用户应该能够在使用您的应用程序时在它们之间无缝切换。同样重要的是，输入方法不应依赖于屏幕尺寸，这意味着大视口必须支持触摸，而小视口必须支持键盘和鼠标。尽您所能，确保您的应用程序及其所有功能都支持用户可能选择的任何输入方法的使用。在适当的情况下，增强体验以允许特定于输入的控件（例如下拉刷新）。

方法

指针事件 API 为使用各种输入选项提供了一个统一的接口，并且特别适合添加手写笔支持。为了支持触摸和键盘，请确保您正在使用正确的语义元素（锚点、按钮、表单控件等），而不是使用非语义 HTML 重建它们。当包含悬停时激活的交互时，请确保它们也可以在单击或点击时激活。

当请求使用强大的 API 的权限时，请提供上下文，并且仅在需要 API 时才请求。

原因

触发权限提示的 API（如通知、地理位置和凭据）被有意设计为对用户具有干扰性，因为它们往往与需要选择加入的强大功能相关。在没有额外上下文的情况下（例如在页面加载时）触发这些提示，使用户不太可能接受这些权限，并且更有可能在未来不信任它们。相反，仅在向用户提供您需要该权限的上下文理由后才触发这些提示。

方法

权限 UX 文章和 UX Planet 的 请求用户权限的正确方法 是理解如何设计权限提示的良好资源，虽然侧重于移动设备，但适用于所有 PWA。

保持代码库健康使您更容易实现目标并交付新功能。

原因

构建现代 Web 应用程序需要很多工作。保持您的应用程序最新并保持代码库健康使您更容易交付满足本清单中列出的其他目标的新功能。

方法

有很多高优先级的检查可以确保代码库健康

• 避免使用具有已知漏洞的库。
• 确保您没有使用已弃用的 API。
• 从您的代码库中删除不安全的编码实践（例如使用 document.write() 或具有非被动滚动事件侦听器），
• 您甚至可以防御性地编码，以确保您的 PWA 在分析或其他第三方库加载失败时不会崩溃。
• 考虑要求进行静态代码分析（如 linting）以及在多个浏览器和发布渠道中进行自动化测试。这些技术可以帮助在错误进入生产环境之前捕获它们。