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

渐进式 Web 应用 (PWA) 使用现代 API 构建和增强,可提供更强大的功能、可靠性和可安装性,同时只需一套代码库即可覆盖任何人随时随地在任意设备上使用。为帮助您打造最佳体验,请使用核心最优核对清单和建议来引导您。

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

渐进式 Web 应用核对清单介绍了怎样才能使应用可供所有用户安装和使用(无论其大小或输入类型如何)。

启动速度快,且运行速度快

性能对于任何在线体验的成功都起着至关重要的作用,因为与性能不佳的网站相比,效果较好的网站能更好地吸引并留住用户。网站应专注于针对以用户为中心的性能指标进行优化。

原因

速度对于让用户使用您的应用至关重要。事实上,随着网页加载时间从 1 秒增加到 10 秒,用户跳出的概率会增加 123%。发生 load 事件后,性能并不止如此。用户绝不应当想知道他们的互动(例如点击按钮)是否已注册。滚动和动画播放时应该感觉流畅。 性能会影响您的整个体验,从用户对应用的看法到应用的实际性能。

虽然所有应用都有不同的需求,但 Lighthouse 中的性能审核是基于核心网页指标进行的,此类审核的得分越高,就越有可能为用户带来愉悦的体验。您也可以使用 PageSpeed InsightsChrome 用户体验报告来获取 Web 应用的实际性能数据。

具体做法

请遵循我们有关快速加载时间的指南,了解如何使 PWA 快速启动并保持快速运行。

适用于任何浏览器

在安装您的 Web 应用之前,用户可以使用任何浏览器来访问该应用。

原因

渐进式 Web 应用首先是 Web 应用,这意味着它们需要跨浏览器运行,而不仅仅是在某一种浏览器中运行。

Resilient Web Design 中的 Jeremy Keith 的话来说,实现这一目标的一种有效方法是,确定核心功能,使用尽可能简单的技术提供该功能,然后尽可能增强用户体验。在许多情况下,这意味着只需从 HTML 开始创建核心功能,然后使用 CSS 和 JavaScript 增强用户体验,即可打造更具吸引力的体验。

以提交表单为例。最简单的实现方法是提交 POST 请求的 HTML 表单。构建完成后,您可以使用 JavaScript 进行表单验证并使用 AJAX 提交表单,从而提升支持该表单的用户的体验。

请考虑到您的用户将会在各种设备和浏览器中浏览您的网站。您不能定位频谱的上端。通过使用功能检测,您将能够为最广泛的潜在用户提供实用的体验,包括那些使用目前尚不存在的浏览器和设备的用户。

具体做法

Jeremy Keith 的弹性网页设计是一个非常优秀的资源,其中介绍了如何以这种跨浏览器、渐进式方法思考网站设计。

附加阅读材料

适应任何屏幕尺寸

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

原因

设备有各种尺寸,用户甚至可能在同一部设备上以各种尺寸使用您的应用。因此,务必要确保您的内容不仅适合视口,而且网站的所有功能和内容在任意视口尺寸下均可使用。

用户想要完成的任务和他们想要访问的内容不会随着视口大小而改变。可以按照不同的视口大小重新排列内容,并且所有内容都应该以某种方式呈现。事实上,正如 Luke Wroblewski 在他的一本书“移动优先”中那样,从小处着手,从大处着手可以真正改进网站的设计:

移动设备需要软件开发团队专注于应用中最重要的数据和操作。320 x 480 像素的屏幕没有空间来放置无关紧要的元素。您必须确定优先级。

具体做法

关于自适应设计的资源有很多,包括 Ethan Marcotte 撰写的原创文章(与它相关的一系列重要概念)以及各种书籍和演讲。如需将讨论范围缩小到自适应设计的内容方面,您可以深入了解内容优先设计内容输出自适应布局。最后,虽然本课侧重于移动设备,但 Josh Clark 所著的 Seven Deadly Mobile Myths(七致命误区)课程与自适应网站的小尺寸视图以及移动网站一样相关。

提供自定义离线页面

当用户离线时,将其保留在 PWA 中可提供比退回默认浏览器离线页面更加顺畅的体验。

原因

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

具体做法

在 Service Worker 的 install 事件期间,您可以预缓存自定义离线页面以供日后使用。如果用户离线,您可以使用预缓存的自定义离线页面进行响应。您可以按照我们的自定义离线网页示例来查看实际操作示例,并了解如何自行实现此功能。

可安装

在设备上安装应用或向其中添加应用的用户更有可能与这些应用互动。

原因

安装渐进式 Web 应用后,该应用的外观、风格和行为将与所有其他已安装的应用相同。它可以与用户启动其他应用相同的位置启动。它在专属的应用窗口中运行,与浏览器分开,并且像其他应用一样显示在任务列表中。

您为何希望用户安装 PWA?这与您希望用户从应用商店安装您的应用的原因相同。安装您的应用的用户是互动度最高的受众群体,并且其互动指标比一般访问者更高,通常与使用移动设备的应用用户相当。这些指标包括重复访问量更多、用户在您网站上的停留时间更长以及转化率更高。

具体做法

您可以按照我们的可安装指南来了解如何使 PWA 可安装、如何测试 PWA 是否可安装,并尝试自行安装。

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

若要打造真正出色的渐进式 Web 应用(让人感觉像是一流的应用),您不仅需要核心核对清单,最佳的渐进式 Web 应用核对清单是:让 PWA 感觉就像是其运行所在设备的一部分,同时充分利用 Web 的强大之处。

提供离线体验

如果不严格要求网络连接,您的应用在离线状态下的工作方式与在线时相同。

原因

除了提供自定义离线页面之外,用户还希望渐进式 Web 应用能够离线使用。例如,旅游和航空公司应用应在离线状态下提供行程详细信息和登机牌信息。音乐、视频和播客应用应允许离线播放。社交应用和新闻应用应缓存最新内容,以便用户在离线时能够阅读。用户还希望在离线时保持身份验证,因此应针对离线身份验证进行设计。离线 PWA 为用户提供了真实的应用式体验。

具体做法

在确定用户希望哪些功能可以离线使用后,您需要确保您的内容可供离线使用并能够适应离线上下文。此外,您可以使用 IndexedDB(一种浏览器型 NoSQL 存储系统)来存储和检索数据,还可以使用后台同步功能允许用户在离线状态下执行操作,并将服务器通信延迟到用户连接恢复稳定状态之后。您还可以使用 Service Worker 存储其他类型的内容,例如图片、视频文件和音频文件,以供离线使用。从用户体验的角度来看,您可以使用骨架屏幕,让用户在加载时感受速度和内容,然后根据需要回退到缓存的内容或离线指示器。

完全可访问

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

原因

大多数人在人生的某个阶段都希望以 WCAG 2.0 无障碍功能要求涵盖的方式充分利用 PWA。人类与 PWA 交互并了解 PWA 的能力是多种多样的,并且需求可能是临时或永久性的。通过使您的 PWA 可访问,您可以确保它可供所有人使用。

具体做法

不妨从 W3C 的网页无障碍简介着手。大多数无障碍功能测试必须手动完成。Lighthouse 中的无障碍功能审核、axe无障碍功能数据分析等工具可以帮助您自动执行某些无障碍功能测试。此外,使用语义正确的元素(例如 abutton 元素)也很重要,而不是自行重新创建这些元素。这样可确保当您确实需要构建更高级的功能时,也能满足无障碍预期(例如,何时使用箭头而非标签页)。 A11Y 营养卡片就一些常见组件提供了很好的建议。

可通过搜索发现您的 PWA。

原因

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

具体做法

首先确保每个网址都有唯一的描述性标题和元描述。然后,您可以借助 Lighthouse 中的 Google Search Console搜索引擎优化审核来调试和修复 PWA 的可检测性问题。您也可以使用 BingYandex 的网站站长工具,并考虑在 PWA 中使用 Schema.org 中的架构添加结构化数据

支持任何输入类型

PWA 同样可与鼠标、键盘、触控笔或触摸搭配使用。

原因

设备提供多种输入法,并且用户在使用您的应用时应该能够在这些输入法之间无缝切换。同样重要的,输入法不应依赖于屏幕尺寸,这意味着大视口需要支持触摸,小视口需要支持键盘和鼠标。请尽最大努力确保您的应用及其所有功能支持用户使用用户可能选择使用的任何输入法。在适当情况下,您还应增强体验,以便也支持输入专用控件(例如下拉刷新)。

具体做法

Pointer Events API 提供了一个用于处理各种输入选项的统一接口,特别适合添加触控笔支持。如需同时支持轻触和键盘,请确保使用正确的语义元素(锚点、按钮、表单控件等),而不是使用非语义的 HTML(有益于无障碍功能)重新构建这些元素。添加可通过悬停鼠标激活的互动时,请确保它们也可在用户点击或点按时触发。

为权限请求提供上下文

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

原因

触发权限提示(如通知、地理定位和凭据)的 API 被刻意设计为对用户造成干扰,因为它们往往与需要用户选择启用的强大功能相关。在没有其他上下文(例如网页加载时)的情况下触发这些提示,会使用户接受这些权限的可能性会降低,并且日后更有可能会信任它们。而应仅在向用户提供相关权限的情境理由后触发这些提示。

具体做法

权限用户体验一文和 UX Planet 的向用户请求权限的正确方法是非常实用的资源,可帮助您了解如何设计适用于移动设备的权限提示,并适用于所有 PWA。

遵循有关运行状况良好的代码的最佳做法

使代码库保持良好的运行状况可以更轻松地实现目标并提供新功能。

原因

构建现代 Web 应用需要投入大量精力。通过及时更新应用和保持代码库的运行状况,您可以更轻松地提供有助于实现此核对清单中列出的其他目标的新功能。

具体做法

有许多高优先级检查来确保代码库健康:避免使用存在已知漏洞的库,确保未使用已废弃的 API,从代码库中移除 Web 反模式(例如,使用 document.write() 或具有非被动滚动事件监听器),甚至防御性编码,以确保在分析库或其他第三方库无法加载时您的 PWA 不会中断。考虑在多个浏览器和发布渠道中进行静态代码分析(如 lint 检查)以及自动测试。这些技术有助于在错误发布到生产环境之前发现错误。