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

Pete LePage
Sam Richard

渐进式 Web 应用 (PWA) 使用现代 API 构建而成并得到改进，可提供增强的功能，并具有可靠性和可安装性，能通过单一代码库覆盖全球各地使用任意类型的设备的任何用户。为帮助您打造尽可能出色的体验，请参考核心和最佳核对清单和建议。

核心渐进式 Web 应用核对清单

渐进式 Web 应用核对清单介绍了应用具备可安装性和 可供所有用户使用，无论其大小或输入类型如何。

启动速度快，并始终保持快速运行

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

原因

速度对于吸引用户使用您的应用至关重要。事实上，当网页加载时间从 1 秒增加到 10 秒时，用户跳出概率会增加 123%。但效果 load 事件停止。用户绝不应怀疑其互动（例如点击按钮）是否已注册。滚动和动画应感觉流畅。 性能会影响应用的整个体验， 以及用户对应用的感受

虽然所有应用都有不同的需求，但 Google Cloud 中的性能审核 Lighthouse 基于核心网页指标， 而且得分较高将使用户更有可能 提供愉悦的体验您还可以使用 PageSpeed Insights 或 Chrome 用户体验报告来获取您的 Web 应用的实际性能数据。

方式

请遵循我们的快速加载指南， 了解如何让 PWA 快速启动并保持快速运行。
可在任何浏览器中使用

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

原因

渐进式 Web 应用首先是 Web 应用，这意味着它们需要运行 。

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

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

用户会通过各种设备和浏览器访问您的网站。您不能只定位该范围的最高端。使用 功能检测，以尽可能提供最广泛的实用体验 潜在用户，包括使用浏览器和设备的用户 尚不存在的功能。

方式

Jeremy Keith 的弹性 Web 设计 是一篇很好的资源，它描述了如何看待 这种渐进的过程。

附加阅读材料
适应任何屏幕尺寸

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

原因

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

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

移动设备需要软件开发团队专注于 只保留应用中最重要的数据和操作只有 不要留在 320x480 像素的屏幕上 元素。您必须分清轻重缓急。

方式

关于自适应设计的资源有很多，包括 Ethan Marcotte 的原创文章、一系列相关重要概念，以及大量的图书和演讲。如需将讨论范围缩小到响应式设计的内容方面，请参阅内容为先的设计和内容为先的响应式布局。 最后，虽然本课程重点讲解了移动平台， 七个致命的移动误区 同样与自适应网页小视图的 更像是移动网站

提供自定义离线页面

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

原因

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

方式

在 Service Worker 的 install 事件期间，您可以预缓存 一个自定义离线页面，在用户离线时显示。如需了解如何自行实现此功能，请参阅创建离线后备网页。请注意，Chrome 会 如果没有提供，则显示基本的离线网页。

可安装

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

原因

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

与设备专用应用一样，安装您应用的用户是最重要的 感兴趣的受众群体，并且互动度指标通常与应用广告旗鼓相当 使用移动设备的用户。这些指标包括更多的重复访问次数 访问者在您网站上停留的时间更长，并且转化率也高于 。

方式

遵循我们的可安装指南 ，了解如何使 PWA 可安装。

最佳渐进式 Web 应用核对清单

若要创建一款真正出色的 PWA，让用户感觉像一款出色的应用，您需要 不仅仅是核心核对清单最佳 PWA 核对清单是为了让 这样，您的 PWA 就会感觉它是设备的一部分 充分利用网络的优势。

提供离线体验

如果不严格要求网络连接，您的应用也能照常运行 和在线时一样。

原因

除了提供自定义离线页面外，用户还希望 PWA 可离线使用。例如，旅游和航空公司应用应该 方便您在离线状态下查看详细信息和登机牌。音乐 视频和播客应用应允许离线播放。社交和 新闻应用应缓存近期内容，以便用户离线阅读。 用户还希望在离线时保持身份验证状态，因此针对 离线身份验证。离线 PWA 提供真正类似于应用 打造卓越的用户体验。

方式

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

完全可访问

所有用户互动均通过 WCAG 2.0 无障碍功能要求

原因

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

方式

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

可通过搜索找到

您的 PWA 很容易被发现 。

原因

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

方式

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

适用于任何输入类型

使用鼠标、键盘、触控笔或触控也可使用 PWA。

原因

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

方式

Pointer Events API 提供一个统一的界面来使用各种输入选项，以及 尤其适合添加触控笔支持。支持触摸模式 和键盘，请确保您使用的是正确的语义元素 （锚点、按钮、表单控件等），并且无需使用 非语义 HTML。如果添加的是悬停时启用的互动， 确保它们也可以在点击或点按时激活。
为权限请求提供上下文

请求用户授予使用功能强大的 API 的权限时，请提供相关背景信息并询问 。

原因

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

方式

权限用户体验 以及 UX Planet 的 向用户请求权限的正确方式 了解如何设计权限提示 并应用于所有 PWA。

遵循有关代码运行状况的最佳实践

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

原因

构建现代 Web 应用需要做大量工作。正在保持 确保您的应用保持最新状态，并且您的代码库状况良好，这样可让您更轻松地 让您能够提供一些新功能，从而实现 此核对清单。

方式

一些高优先级检查可确保运行状况良好 codebase:

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