优秀的渐进式 Web 应用有哪些特点？

性能对于任何在线体验的成功都起着重要作用，因为与性能不佳的网站相比，性能出色的网站在吸引和留住用户方面更胜一筹。专注于以用户为中心的性能指标进行优化。

原因

速度对于吸引用户使用您的应用至关重要。事实上，当网页加载时间从 1 秒增加到 10 秒时，用户跳出概率会增加 123%。性能也不会随着 load 事件而停止。用户绝不应怀疑其互动（例如点击按钮）是否已注册。滚动和动画应流畅。 性能会影响整个体验，包括应用的行为方式和用户对应用的看法。

虽然所有应用都有不同的需求，但 Lighthouse 中的性能审核是基于核心网页指标进行的，如果在这些审核中获得高分，您的用户就更有可能获得愉快的体验。您还可以使用 PageSpeed Insights 或 Chrome 用户体验报告来获取 Web 应用的实际性能数据。

方式

请按照我们的有关缩短加载时间的指南，了解如何让 PWA 快速启动并保持快速运行。

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

原因

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

正如 Jeremy Keith 在 Resilient Web Design 中所说，实现这一点的有效方法是：确定核心功能，使用尽可能简单的技术提供这些功能，然后尽可能提升体验。在许多情况下，这意味着从仅使用 HTML 创建核心功能开始，然后使用 CSS 和 JavaScript 提升用户体验，从而打造更具吸引力的体验。

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

用户会通过各种设备和浏览器访问您的网站。您不能仅定位到该谱系的高端。使用功能检测功能，为尽可能广泛的潜在用户（包括使用尚不存在的浏览器和设备的用户）提供可用的体验。

方式

Jeremy Keith 的《Resilient Web Design》（弹性 Web 设计）是一本非常实用的资源，介绍了如何采用这种跨浏览器渐进式方法来思考 Web 设计。

附加阅读材料

• A List Apart 的 了解渐进增强一文对此主题进行了简要介绍。
• Smashing Magazine 的 逐渐增强：它是什么？如何使用？ 提供了实用介绍和指向更高级主题的链接。
• MDN 的 实现特征检测一文介绍了如何通过直接查询特征来检测特征。

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

原因

设备的尺寸各不相同，用户可能在各种尺寸的设备上使用您的应用。因此，您不仅需要确保内容能适应视口，还需要确保网站的所有功能和内容在所有视口大小下都能正常使用。

用户想要完成的任务和想要访问的内容不会因视口大小而改变。您可以根据不同的视口大小重新排列内容，并且所有内容都应以某种方式显示。事实上，正如 Luke Wroblewski 在其著作《Mobile First》中所述，从小处着手，针对大屏幕调整设计，可以改进网站的设计：

移动设备要求软件开发团队仅专注于应用中最重要的数据和操作。320 x 480 像素的屏幕上根本没有空间容纳多余的元素。您必须确定优先事项。

方式

有关响应式设计的资源有很多，包括 Ethan Marcotte 的原创文章、 一系列相关重要概念，以及大量的图书和演讲。如需将讨论范围缩小到响应式设计的内容方面，请参阅 内容为先的设计和 内容为先的响应式布局。 最后，虽然 Josh Clark 的 Seven Deadly Mobile Myths 主要侧重于移动设备，但其中的经验教训对响应式网站的小屏幕视图同样适用，也适用于移动设备的一般情况。

与返回默认浏览器的离线页面相比，让用户留在 PWA 中可提供更顺畅的体验。

原因

用户希望已安装的应用无论处于何种连接状态都能正常运行。特定于平台的应用在离线状态下绝不会显示空白页，PWA 也绝不应显示浏览器的默认离线页面。 在用户导航到未缓存的网址时以及用户尝试使用需要连接的功能时，提供自定义离线体验有助于让您的 Web 体验感觉像是运行设备的一部分。

方式

在服务工件的 install 事件期间，您可以预缓存自定义离线页面，以便在用户离线时显示。如需了解如何自行实现此功能，请参阅创建离线后备网页。请注意，如果未提供任何网页，Chrome 将显示基本离线页面。

向设备安装或添加应用的用户往往会与这些应用进行更多互动。

原因

安装渐进式 Web 应用后，它的外观、风格和行为与所有其他已安装的应用一样。它从用户启动其他应用的位置启动。它在自己的应用窗口中运行，独立于浏览器，并且会显示在任务列表中，就像其他应用一样。

与特定于设备的应用一样，安装您应用的用户是互动度最高的受众群体，其互动指标通常与移动设备上的应用用户相当。这些指标包括重复访问次数更多、在您网站上停留时间更长，以及转化率高于一般访问者。

方式

请按照我们的可安装指南了解如何使 PWA 可安装。

如果网络连接不是严格要求，您的应用在离线状态下与在线状态下一样正常运行。

原因

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

方式

确定用户希望哪些功能在离线状态下可用后，您需要使内容可供离线使用并能适应离线环境。您可以使用 IndexedDB（浏览器内 NoSQL 存储系统）存储和检索数据，并使用后台同步让用户在离线时执行操作，并在用户重新建立稳定连接之前推迟服务器通信。您还可以使用服务工作器存储其他类型的内容（例如图片、视频文件和音频文件），以供离线使用，并实现安全且长效的会话以保持用户身份验证。从用户体验的角度来看，您可以使用 框架屏幕，让用户在加载时感知速度和内容，然后根据需要回退到缓存的内容或离线指示器。

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

原因

大多数用户在某个时间点都希望以符合 WCAG 2.0 无障碍要求的方式使用您的 PWA。用户与您的 PWA 互动和理解能力存在差异，这些差异可能只是暂时性的，也可能是永久性的。为您的 PWA 添加无障碍功能，让所有人都能使用。

方式

不妨先从 W3C 的《Web 无障碍功能简介》入手。大多数无障碍功能测试必须手动完成。Lighthouse 中的无障碍审核、axe 和 Accessibility Insights 等工具可以帮助您自动执行一些无障碍功能测试。此外，请务必使用语义正确的元素，而不是自行重新创建这些元素（例如 a 和 button 元素）。这样可以确保，当您确实需要构建更高级的功能时，能够满足无障碍功能方面的预期（例如何时使用箭头，何时使用标签页）。 营养卡 A11Y 指南针对一些常见组件提供了非常实用的建议。

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

原因

网络的一大优势是能够通过搜索发现网站和应用。事实上，超过一半的网站流量都来自自然搜索。确保内容具有规范网址，并且搜索引擎可以将您的网站编入索引，对让潜在用户找到您的 PWA 至关重要。采用客户端呈现时尤其如此。

方式

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

您的 PWA 可通过鼠标、键盘、触控笔或触控方式使用。

原因

设备提供多种输入法，用户应能够在使用您的应用时在这些输入法之间无缝切换。同样重要的是，输入法不应取决于屏幕尺寸，这意味着大视口必须支持触控，小视口必须支持键盘和鼠标。请尽可能确保您的应用及其所有功能支持用户选择的任何输入法。在适当的情况下，改进体验，以允许使用特定于输入的控件（例如“下拉刷新”）。

方式

Pointer Events API 提供了一个统一的接口来处理各种输入选项，特别适合添加触控笔支持。如需同时支持触摸和键盘，请确保您使用的是正确的语义元素（锚点、按钮、表单控件等），而不是使用非语义 HTML 重新构建这些元素。添加可通过悬停触发的互动时，请确保这些互动也可以通过点击或点按触发。

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

原因

触发权限提示的 API（例如通知、地理位置信息和凭据）会故意干扰用户，因为它们通常与需要用户选择启用的强大功能相关。 如果在没有提供额外上下文信息的情况下触发这些提示（例如在网页加载时），用户就更不可能会接受这些权限，并且日后也更不信任这些权限。正确的做法是，仅在向用户提供相关背景信息（说明您需要该权限的原因）后，才触发这些提示。

方式

权限用户体验一文和 UX Planet 的 正确向用户请求权限的方法是了解如何设计权限提示的好资源，这些提示侧重于移动设备，但适用于所有 PWA。

保持代码库的健康状态有助于您更轻松地实现目标并提供新功能。

原因

构建现代 Web 应用需要考虑很多因素。确保应用保持最新状态并维护良好的代码库，有助于您更轻松地提供符合此核对清单中列出的其他目标的新功能。

方式

有许多高优先级检查可确保代码库保持健康状态：

• 避免使用存在已知漏洞的库。
• 确保您没有使用已弃用的 API。
• 从代码库中移除不安全的编码做法（例如使用 document.write() 或使用非非活跃滚动事件监听器），
• 您甚至可以采用防御性编码，以确保在 Google Analytics 或其他第三方库加载失败时，您的 PWA 不会中断。
• 考虑要求进行静态代码分析（例如 linting），以及在多个浏览器和发布渠道中进行自动化测试。这些方法有助于在错误进入生产环境之前将其捕获。