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

Pete LePage
Sam Richard

渐进式 Web 应用 (PWA) 使用现代 API 构建和增强，可提供增强功能、可靠性和可安装性，同时通过单一代码库覆盖任何位置、任何设备上的任何人。为帮助您打造尽可能出色的体验，请参考核心和最佳核对清单和建议。

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

“渐进式 Web 应用核对清单”介绍了哪些因素可以让所有用户（无论大小或输入类型）都能安装和使用应用。

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

任何在线体验的成功都离不开广告效果，因为与性能不佳的网站相比，高绩效的网站在吸引和留住用户方面效果更好。应着重优化以用户为中心的性能指标。

原因

速度对于让用户使用您的应用至关重要。实际上，当网页加载时间从 1 秒增加到 10 秒时，用户跳出的概率会增加 123%。发生 load 事件时，性能也不会停止。用户永远不应想清楚自己的互动（例如，点击某个按钮）是否已记录。滚动和动画应流畅无阻。 性能会影响您的整个体验，包括应用的行为方式和用户对应用的感受。

虽然所有应用都有不同的需求，但 Lighthouse 中的性能评估是以核心网页指标为基础，在这些审核中得分较高将有助于用户获得愉悦的体验。您还可以使用 PageSpeed Insights 或 Chrome 用户体验报告获取您的 Web 应用的实际性能数据。

方式

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

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

原因

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

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

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

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

方式

Jeremy Keith 的弹性 Web 设计是一本很好的资源，它描述了如何在这种跨浏览器的渐进式方法中看待网页设计。

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

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

原因

设备有多种大小，用户可能会以多种大小使用您的应用，甚至在同一台设备上也是如此。因此，您不仅要确保内容适合视口，而且要确保网站的所有功能和内容在所有视口尺寸下均可使用，这一点至关重要。

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

移动设备要求软件开发团队仅关注应用中最重要的数据和操作。在 320 x 480 像素的屏幕上，显然没有空间放置多余的、不必要的元素。您必须分清轻重缓急。

方式

有很多关于自适应设计的资源，包括 Ethan Marcotte 的原创文章（与其相关的 重要概念集合），以及丰富的书籍和讲座。如需将讨论的范围缩小到自适应设计的内容方面，请参阅 内容优先设计和 内容外分自适应布局。 最后，虽然 Josh Clark 的 Seven Deadly Mobile Myths 主要侧重于移动设备，但其中的经验教训与响应式网站的小屏幕视图一样适用于移动设备。

提供自定义离线页面

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

原因

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

方式

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

可安装

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

原因

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

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

方式

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

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

要打造一款真正出色的 PWA（让用户感觉像使用同类最佳应用），您需要做的不仅仅是核对核心核对清单。最佳的 PWA 核对清单是让您的 PWA 感觉就像它是设备运行的一部分，同时充分利用网络的强大功能。

提供离线体验

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

原因

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

方式

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

完全可访问

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

原因

大多数用户在其人生的某些阶段都希望按照 WCAG 2.0 无障碍功能要求所涵盖的方式使用您的 PWA。人类与 PWA 互动和理解您的 PWA 的能力不尽相同，并且需求可能是临时的，也可能是永久性的。为您的 PWA 添加无障碍功能，让所有人都能使用。

方式

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

可通过搜索找到

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

原因

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

方式

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

支持任何输入类型

PWA 同样可供鼠标、键盘、触控笔或触控使用。

原因

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

方式

Pointer Events API 提供了可用于处理各种输入选项的统一界面，尤其适用于添加触控笔支持。为了同时支持触摸和键盘，请确保使用正确的语义元素（锚点、按钮、表单控件等），而不是使用非语义 HTML 重新构建这些元素。添加可在鼠标指针悬停时启用的互动，请确保这些互动也可在点击或点按时启用。
为权限请求提供上下文

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

原因

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

方式

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

遵循健全代码的最佳实践

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

原因

构建现代 Web 应用需要做大量工作。通过使应用保持最新状态和代码库正常运行，您可以更轻松地提供实现此核对清单中列出的其他目标的新功能。

方式

系统会执行多项高优先级检查，以确保代码库正常运行：

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