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

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

原因

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

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

具体做法

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

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

原因

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

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

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

要考虑到您的用户将通过各种设备和浏览器来体验您的网站。您不能只定位频谱的上端。通过使用功能检测，您就能够为广大潜在用户（包括使用目前可能尚不存在的浏览器和设备的用户）提供易用的体验。

具体做法

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

附加阅读材料

• List Apart 的了解渐进式增强是对该主题的详细介绍。
• Smashing 杂志的渐进式增强功能：简介及使用方法 提供了实用的介绍和指向更高级主题的链接。
• MDN 有一篇标题为实现特征检测的文章，其中介绍了如何通过直接查询来检测某项功能。

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

原因

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

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

> 移动设备要求软件开发团队专注于应用中最重要的数据和操作。在 320 x 480 像素的屏幕上，根本没有空间来添加无关、非必要的元素。> 您必须确定优先级。

具体做法

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

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

原因

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

具体做法

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

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

原因

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

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

具体做法

您可以按照我们的可安装指南来了解如何使 PWA 可安装、如何测试 PWA 是否可安装，并尝试自行完成相关操作。

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

原因

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

具体做法

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

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

原因

大多数人在人生的某个阶段都希望以 WCAG 2.0 无障碍功能要求涵盖的方式充分利用 PWA。人类与 PWA 互动并理解其存在的广泛性，其需求可能是暂时的，也可能是永久性的。让您的 PWA 可访问，以确保它可供所有人使用。

具体做法

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

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

原因

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

具体做法

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

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

原因

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

具体做法

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

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

原因

触发权限提示（如通知、地理定位和凭据）的 API 会故意对用户造成干扰，因为它们往往与需要用户选择启用的强大功能相关。在没有其他背景信息（例如在网页加载时）的情况下触发这些提示，会使用户不太可能接受这些权限，未来更有可能不信任它们。请仅在为用户提供需要该权限的上下文理由后触发这些提示。

具体做法

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

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

原因

构建现代 Web 应用需要投入大量精力。通过及时更新应用并让代码库正常运行，您可以更轻松地提供新功能来达成本核对清单中列出的其他目标。

具体做法

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