渐进式 Web 应用 (PWA) 使用现代 API 构建和增强，可提供增强功能、可靠性和可安装性，同时通过单一代码库覆盖任何位置、任何设备上的任何人。为帮助您尽可能打造最佳体验，请使用核心和最佳核对清单和建议来指导您。
核心渐进式 Web 应用核对清单
《渐进式 Web 应用核对清单》介绍了可让所有用户安装和使用应用（无论应用的大小或输入类型如何）的要素。
任何在线体验的成功都离不开广告效果，因为与性能不佳的网站相比，高绩效网站在吸引和留住用户方面效果更好。应着重优化以用户为中心的性能指标。
为什么
速度对于让用户使用您的应用至关重要。事实上，网页加载时间从 1 秒增加到 10 秒时，用户跳出的概率提高了 123%。发生 load 事件时，性能也不会停止。用户永远不应知道他们的互动（例如，点击某个按钮）是否已记录。滚动和动画应感觉流畅。
性能会影响您的整个体验，包括应用的行为方式和用户对应用的感受。
虽然所有应用都有不同的需求，但 Lighthouse 中的性能评估是以核心网页指标为基础，在这些审核中得分较高将有助于用户获得愉悦的体验。您还可以使用 PageSpeed Insights 或 Chrome 用户体验报告获取您的 Web 应用的实际性能数据。
如何定价
请遵循我们关于缩短加载时间的指南，了解如何让 PWA 快速启动并保持快速运行。
在安装您的 Web 应用之前，用户可以使用他们选择的任何浏览器来访问该应用。
为什么
渐进式 Web 应用首先是 Web 应用，这意味着它们需要跨浏览器运行。
根据弹性 Web 设计一文中的 Jeremy Keith 所说，实现这一目标的有效方法是确定核心功能，利用尽可能简单技术提供这些功能，然后尽可能改善用户体验。在许多情况下，这意味着从只使用 HTML 开始创建核心功能，并使用 CSS 和 JavaScript 改善用户体验，以打造更具吸引力的体验。
以表单提交为例。最简单的实现方法是使用提交 POST 请求的 HTML 表单。构建该表单后，您可以使用 JavaScript 改善表单验证体验，并通过 AJAX 提交表单，从而改善可支持表单的用户的体验。
用户会在各种设备和浏览器中体验您的网站。您不能只定位该范围的最高端。利用功能检测功能，为尽可能广泛的潜在用户（包括使用尚不存在的浏览器和设备的用户）提供良好的体验。
如何定价
Jeremy Keith 的弹性 Web 设计是一本很好的资源，它描述了如何在这种跨浏览器的渐进式方法中看待网页设计。
附加阅读材料
- A List Apart 的 了解渐进式增强一文详细介绍了该主题。
- Smashing Magazine 的 Progressive Enhancement: What It and How To Use?提供了实用的介绍，并提供了指向更高级主题的链接。
- MDN 的 实现功能检测一文介绍了如何通过直接查询来检测功能。
用户可以在任何屏幕尺寸上使用您的 PWA，并且其所有内容在任何视口尺寸下都可用。
为什么
设备有多种大小，用户可能会以多种大小使用您的应用，甚至在同一台设备上也是如此。因此，您不仅要确保内容适合视口，而且要确保网站的所有功能和内容在所有视口尺寸下均可使用，这一点至关重要。
用户想要完成的任务以及他们想要访问的内容不会因视口大小而异。您可以根据不同的视口大小重新排列内容，并且这些内容应该以一种方式呈现在那里。事实上，正如 Luke Wroblewski 所写的移动设备优先一书所说的那样，先从小屏幕开始，然后针对大屏幕调整您的设计，可以改善网站的设计：
移动设备要求软件开发团队仅关注应用中最重要的数据和操作。在 320 x 480 像素的屏幕上，显然没有空间放置多余的、不必要的元素。您必须分清轻重缓急。
如何定价
有很多关于自适应设计的资源，包括 Ethan Marcotte 的原创文章（与其相关的 重要概念集合），以及丰富的书籍和讲座。如需将讨论的范围缩小到自适应设计的内容方面，请参阅 内容优先设计和 内容外分自适应布局。 最后，虽然网站主要侧重于移动设备，但 Josh Clark 所著的 Seven Deadly Mobile Myths 课程对自适应网站的小规模视图和更笼统的移动设备同样适用。
与返回到默认的浏览器离线页面相比，当用户离线时，将其保留在 PWA 中可提供更顺畅的体验。
为什么
用户希望已安装的应用无论连接状态如何都能正常运行。特定于平台的应用在离线状态下绝不会显示空白页面，PWA 也绝不应显示浏览器的默认离线页面。 在用户导航到尚未缓存的网址时以及当用户尝试使用需要连接的功能时，提供自定义离线体验，有助于让您的网页体验就像是设备运行的一部分。
如何定价
在 Service Worker 的 install 事件期间，您可以预缓存自定义离线页面以供日后使用。如果用户离线，您可以使用预缓存的自定义离线页面进行响应。您可以按照我们的自定义离线网页示例查看实际应用示例，并了解如何自行实现。
在设备上安装或添加应用的用户往往会更多地与这些应用互动。
为什么
安装渐进式 Web 应用后，其外观、风格和行为与所有其他已安装的应用类似。它从用户启动其他应用的位置启动。它在独立于浏览器的应用窗口中运行，并且会显示在任务列表中，就像其他应用一样。
与设备专用应用一样，安装您应用的用户是互动度最高的受众群体，并且其互动度指标通常与使用移动设备上的应用用户不相上下。与一般访问者相比，这些指标包括更多的重复访问次数、更长的网站停留时间以及更高的转化率。
如何定价
请遵循我们的可安装指南，了解如何使 PWA 可安装。
最优渐进式 Web 应用核对清单
若要创建一款真正出色的 PWA（让人感觉像是一流应用的 PWA），您需要的不仅仅是核心核对清单。最佳的 PWA 核对清单是让您的 PWA 感觉就像它是设备运行的一部分，同时充分利用网络的强大功能。
如果不严格要求连接，您的应用可在离线状态下运行与在线运行相同。
为什么
除了提供自定义离线页面之外，用户还希望 PWA 能够离线使用。例如，旅游和航空公司应用应提供在离线状态下随时可用的行程详细信息和登机牌。音乐、视频和播客应用应允许离线播放。社交应用和新闻应用应缓存近期内容，以便用户离线阅读。 用户还希望在离线时保持已验证身份的状态，因此在设计时将离线身份验证考虑在内。离线 PWA 可为用户提供真实的应用式体验。
如何定价
确定用户希望离线使用哪些功能后，您需要使您的内容可供离线使用，并适应离线环境。您可以使用 IndexedDB（一种浏览器内 NoSQL 存储系统）来存储和检索数据，并可使用后台同步功能让用户在离线时执行操作，并将服务器通信推迟到用户恢复稳定连接后再执行。您还可以使用 Service Worker 存储其他类型的内容（如图片、视频文件和音频文件）以供离线使用，并实现安全的长期会话以确保用户进行身份验证。从用户体验的角度来看，您可以使用 骨架屏幕，让用户在加载时能感受到速度和内容，然后根据需要回退到缓存内容或离线指示器。
所有用户互动均符合 WCAG 2.0 无障碍功能要求。
为什么
大多数用户在其人生的某些阶段都希望按照 WCAG 2.0 无障碍功能要求所涵盖的方式使用您的 PWA。人类与 PWA 互动和理解您的 PWA 的能力不尽相同，并且需求可能是临时的，也可能是永久性的。通过让 PWA 变得易于使用，您可以使其可供所有人使用。
如何定价
W3C 的
Web 无障碍功能简介是很好的入手点。大多数无障碍功能测试都必须手动完成。Lighthouse 中的无障碍功能审核、axe 和无障碍功能数据分析等工具可帮助您自动执行一些无障碍功能测试。此外，请务必使用语义正确的元素，而不是自行重新创建这些元素，例如 a 和 button 元素。这样可以确保当您确实需要构建更高级的功能时，可以满足无障碍预期（例如，何时使用箭头而不是标签页）。
A11Y 营养卡针对一些常见组件在这方面提供了很好的建议。
用户可以通过搜索轻松找到您的 PWA。
为什么
Web 的最大优势之一是通过搜索发现网站和应用。事实上，网站流量的半数以上来自自然搜索。确保内容存在规范网址，并且搜索引擎可以将您的网站编入索引，这对潜在用户找到您的 PWA 至关重要。采用客户端渲染时尤其如此。
如何定价
首先确保每个网址都有唯一的描述性标题和元描述。然后，您可以使用 Lighthouse 中的 Google Search Console 和搜索引擎优化审核来调试和解决 PWA 的易发现问题。您还可以使用 Bing 或 Yandex 的网站所有者工具，并考虑使用 Schema.org 中的架构在 PWA 中添加结构化数据。
使用鼠标、键盘、触控笔或触控也可使用 PWA。
为什么
设备提供了各种输入法，用户应该在使用您的应用时能够在这些输入法之间无缝切换。同样重要的是，输入法不应取决于屏幕尺寸，这意味着大视口必须支持触摸，小视口必须支持键盘和鼠标。请尽您所能确保您的应用及其所有功能都支持用户使用可能会选择的任何输入法。在适当的情况下，增强体验，以便也允许使用输入专用控件（例如下拉刷新）。
如何定价
Pointer Events API 提供了可用于处理各种输入选项的统一界面，尤其适用于添加触控笔支持。为了同时支持触摸和键盘，请确保使用正确的语义元素（锚点、按钮、表单控件等），而不是使用非语义 HTML 重新构建这些元素。添加可在鼠标指针悬停时激活的互动，请确保这些互动也可在点击或点按时激活。
在请求获得使用功能强大的 API 的权限时，请提供背景信息，并仅在需要 API 时询问。
为什么
触发权限提示（例如通知、地理定位和凭据）的 API 旨在对用户造成干扰，因为它们往往与需要选择启用的强大功能相关。 在没有额外背景信息（例如网页加载时）的情况下触发这些提示，会降低用户接受这些权限的可能性，并且未来更有可能不信任这些权限。而应仅在向用户提供需要该权限的情境理由后触发这些提示。
如何定价
权限用户体验一文和 UX Planet 的 请求用户授予权限的正确方法是了解如何设计权限提示（虽然侧重于移动设备）并适用于所有 PWA 的优秀资源。
使代码库保持良好的健康状态有助于更轻松地实现目标和提供新功能。
为什么
构建现代 Web 应用需要做大量工作。通过使应用保持最新状态并确保代码库正常运行，您可以更轻松地提供实现此核对清单中列出的其他目标的新功能。
如何定价
系统会执行多项高优先级检查，以确保代码库正常运行：
- 避免使用存在已知漏洞的库。
- 确保您使用的不是已弃用的 API。
- 从代码库中移除不安全的编码做法（例如使用
document.write()或采用非被动滚动事件监听器）。 - 您甚至可以进行防御性编码，以确保在分析或其他第三方库无法加载时，您的 PWA 不会中断。
- 考虑要求进行静态代码分析（如执行 lint 请求），以及在多个浏览器和发布版本中进行自动化测试。这些方法有助于在错误进入生产环境之前发现错误。