Pete LePage
Sam Richard
渐进式 Web 应用 (PWA) 使用现代 API 构建而成并得到改进，可提供增强的功能，并具有可靠性和可安装性，能通过单个代码库覆盖全球各地使用任意设备的任何用户。为了帮助您打造尽可能出色的体验，请参考核心和最佳核对清单和建议。
核心渐进式 Web 应用核对清单
渐进式 Web 应用核对清单介绍了如何让应用可供所有用户安装和使用，无论应用大小或输入类型如何。
启动快，运行也快
性能对于任何在线体验的成功都至关重要，因为与性能不佳的网站相比，性能出色的网站更能吸引和留住用户。专注于优化以用户为中心的性能指标。
原因
速度对于吸引用户使用您的应用至关重要。事实上，当网页加载时间从 1 秒增加到 10 秒时，用户跳出的概率会增加 123%。性能不会随着 load 事件的发生而停止。用户绝不应怀疑自己的互动（例如点击按钮）是否已注册。滚动和动画应流畅自然。性能会影响您的整个体验，包括应用的运行方式和用户对应用的感知。
虽然所有应用的需求各不相同，但 Lighthouse 中的性能审核是基于核心网页指标的，在这些审核中获得高分将有助于您的用户获得更愉快的体验。您还可以使用 PageSpeed Insights 或 Chrome 用户体验报告来获取 Web 应用的实际性能数据。
具体做法
请参阅我们的快速加载时间指南，了解如何让 PWA 快速启动并保持快速运行。
可在任何浏览器中使用
用户可以在安装您的 Web 应用之前使用任意浏览器访问该应用。
原因
渐进式 Web 应用首先是 Web 应用，这意味着它们需要在各种浏览器中正常运行。
根据 Jeremy Keith 在弹性 Web 设计一书中的说法，一种有效的方法是确定核心功能，使用尽可能简单的技术提供这些功能，然后在可能的情况下增强体验。在许多情况下，这意味着先仅使用 HTML 创建核心功能，然后使用 CSS 和 JavaScript 增强用户体验，从而打造更具吸引力的体验。
以表单提交为例。实现此目的的最简单方法是使用提交 POST 请求的 HTML 表单。构建完成后，您可以使用 JavaScript 增强体验，以进行表单验证并通过 AJAX 提交表单，从而为支持它的用户提供更好的体验。
用户会通过各种设备和浏览器访问您的网站。您不能只定位该频谱的顶端。使用功能检测来为尽可能多的潜在用户（包括使用尚未出现的浏览器和设备的用户）提供可用的体验。
具体做法
Jeremy Keith 的弹性 Web 设计是一本出色的资源，介绍了如何以这种跨浏览器、渐进式方法来考虑 Web 设计。
附加阅读材料
A List Apart 的了解渐进增强一文很好地介绍了这一主题。
Smashing Magazine 的渐进增强：是什么以及如何使用？一文提供了实用介绍，并链接到更高级的主题。
MDN 的实现功能检测一文讨论了如何通过直接查询来检测功能。
可适应任何屏幕尺寸
用户可以在任何屏幕尺寸下使用您的 PWA，并且所有内容都可以在任何视口尺寸下使用。
原因
设备有各种尺寸，用户可能会以各种尺寸使用您的应用，即使是在同一设备上也是如此。因此，务必确保您的内容适合视口，并且网站的所有功能和内容在所有视口尺寸下均可使用。
用户想要完成的任务和想要访问的内容不会随视口大小而变化。您可以针对不同的视口大小重新排列内容，无论如何，所有内容都应显示出来。事实上，正如 Luke Wroblewski 在其著作《Mobile First》（移动优先）中所述，从小处着手并针对更大的屏幕调整设计可以改进网站的设计：
“移动设备要求软件开发团队仅关注应用中最重要的数据和操作。320x480 像素的屏幕上根本没有空间容纳多余的不必要元素。
您必须确定优先顺序。”
具体做法
有许多关于自适应设计的资源，包括：Ethan Marcotte 的原创文章和与自适应设计相关的重要概念合集，以及大量书籍和讲座。
如需将讨论范围缩小到响应式设计的内容方面，请参阅：
以内容为先的设计
内容优先的自适应布局。
移动设备七大误区，这对于自适应网站的小尺寸视图与所有移动设备同样重要。
提供自定义离线网页
当用户处于离线状态时，让用户留在 PWA 中可提供比返回到默认浏览器离线页面更流畅的体验。
原因
用户希望已安装的应用无论连接状态如何都能正常运行。特定于平台的应用在离线时绝不会显示空白页面，而 PWA 绝不应显示浏览器默认的离线页面。无论是当用户前往未缓存的网址时，还是当用户尝试使用需要连接的功能时，提供自定义离线体验都有助于让您的 Web 体验感觉像是运行它的设备的一部分。
具体做法
在 service worker 的 install 事件期间，您可以预缓存自定义离线网页，以便在用户离线时显示该网页。请参阅创建离线回退网页，了解如何自行实现此功能。如果未提供任何自定义离线页面，Chrome 会继续显示基本离线页面。
是否可安装
在设备上安装或添加应用的用户往往会更频繁地使用这些应用。
原因
安装渐进式 Web 应用后，该应用的外观、风格和行为方式会与其他已安装的应用一样。它与用户启动其他应用的方式相同，都是从同一位置启动。
它会在自己的应用窗口中运行，与浏览器分开，并且会像其他应用一样显示在任务列表中。
与特定于设备的 app 一样，安装您的 app 的用户是互动度最高的受众群体，他们的互动度指标通常与移动设备上的 app 用户相当。与普通访问者相比，这些指标包括更多回访次数、更长的网站停留时间和更高的转化率。
具体做法
请按照我们的可安装指南操作。
最佳渐进式 Web 应用核对清单
若要打造一款真正出色的 PWA，一款感觉像是一流的应用，您需要的不仅仅是核心清单。最佳 PWA 清单旨在让您的 PWA 感觉像是其所运行设备的一部分，同时充分利用 Web 的强大功能。
提供离线体验
在并非严格要求连接网络的情况下，应用在离线状态下的运行方式与在线状态下相同。
原因
除了提供自定义离线页面之外，用户还希望 PWA 在离线状态下可用。例如，旅行和航空公司应用应在离线时随时提供行程详细信息和登机牌。音乐、视频和播客应用应允许离线播放。社交应用和新闻应用应缓存近期内容，以便用户离线阅读。用户还希望在离线时保持身份验证状态，因此请设计离线身份验证。
离线 PWA 可为用户提供真正的类应用体验。
具体做法
确定用户希望哪些功能在离线状态下正常运行后，您需要让内容在离线环境下可用且可适应离线环境。您可以使用浏览器内 NoSQL 存储系统 IndexedDB 来存储和检索数据，并使用后台同步功能让用户在离线时执行操作，并在用户重新获得稳定连接后延迟服务器通信。您可以使用 service worker 存储其他类型的内容（例如图片、视频文件和音频文件）以供离线使用，并实现安全、持久的会话，以保持用户身份验证状态。
从用户体验的角度来看，您可以使用骨架屏，让用户在加载时感受到速度和内容，然后根据需要回退到缓存内容或离线指示器。
完全可访问
所有用户互动均符合最新的《Web 内容无障碍指南》(WCAG) 国际标准。
原因
大多数用户在生命中的某个时刻都希望以 WCAG 涵盖的方式使用您的 PWA。人类与 PWA 互动和理解 PWA 的能力各不相同，需求可能是暂时的，也可能是永久的。通过让 PWA 具有无障碍功能，您可以让所有人都能使用它。
具体做法
W3C 的无障碍 Web 简介是一个不错的起点。大多数无障碍功能测试都必须手动完成。Lighthouse 中的无障碍功能审核、axe 和 Accessibility Insights 可帮助您自动执行一些无障碍功能测试。此外，请务必使用语义正确的元素，而不是自行重新创建这些元素，例如 和
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() 或具有非被动滚动事件监听器。
您甚至可以进行防御性编码，以确保即使分析或其他第三方库无法加载，PWA 也不会中断。
考虑要求在多个浏览器和发布渠道中进行静态代码分析（例如 linting）以及自动化测试。这些技术有助于在错误进入生产环境之前将其捕获。