渐进式网络应用程序（PWA）通过现代 API 构建和增强，以单一代码库为任何设备上的任何人提供增强的功能、可靠性和可安装性。为了帮助您创造尽可能最佳的体验，请使用核心和优化的清单及建议来指导您。
核心渐进式网络应用程序清单
渐进式网络应用程序清单描述了是什么使应用程序可安装且所有用户（无论规模或输入类型如何）都能使用。
快速启动，持续快速
性能在任何在线体验的成功中都起着重要作用，因为高性能的网站比性能差的网站更能吸引和留住用户。专注于以用户为中心的性能指标进行优化。
原因
速度对于吸引用户使用您的应用程序至关重要。实际上，当页面加载时间从 1 秒增加到 10 秒时，用户跳出的概率会增加 123%。性能问题不仅影响加载事件，用户不应怀疑他们的交互（例如点击按钮）是否已注册。滚动和动画应感觉流畅。性能会影响您的整个体验，包括应用程序的行为和用户的感知。
尽管所有应用程序都有不同的需求，但 Lighthouse 中的性能审计基于核心网络关键指标，在这些审计中获得高分将使您的用户更有可能拥有愉快的体验。您还可以使用 PageSpeed Insights 或 Chrome 用户体验报告来获取您的网络应用程序的真实世界性能数据。
方法
遵循我们关于快速加载时间的指南，了解如何使您的 PWA 快速启动并持续快速。
在任何浏览器中工作
用户可以在安装之前使用他们选择的任何浏览器访问您的网络应用程序。
原因
渐进式网络应用程序首先是网络应用程序，这意味着它们需要在各种浏览器中工作。
一种有效的方法是，正如杰里米·基思（Jeremy Keith）在《弹性网页设计》（Resilient Web Design）中所述，确定核心功能，使用最简单的技术使这些功能可用，然后在可能的情况下增强体验。在许多情况下，这意味着从仅使用 HTML 创建核心功能开始，然后使用 CSS 和 JavaScript 增强用户体验以创建更具吸引力的体验。
以表单提交为例。最简单的实现方式是一个提交请求的 HTML 表单。构建之后，您可以使用 JavaScript 进行表单验证并通过 AJAX 提交表单，为支持的用户改善体验。POST
您的用户在各种设备和浏览器上体验您的网站。您不能只针对该范围的高端。使用功能检测为尽可能广泛的潜在用户（包括使用尚未存在的浏览器和设备的用户）提供可用的体验。
方法
杰里米·基思（Jeremy Keith）的《弹性网页设计》是描述如何以这种跨浏览器、渐进式方法思考网页设计的优秀资源。
补充阅读
A List Apart 的《理解渐进增强》（Understanding Progressive Enhancement）是对该主题的良好介绍。
Smashing Magazine 的《渐进增强：它是什么，以及如何使用它？》（Progressive Enhancement: What It Is, And How To Use It?）给出了实用的介绍并链接到更高级的主题。
MDN 的《实现功能检测》（Implementing feature detection）文章讨论了如何通过直接查询来检测功能。
适应任何屏幕尺寸
用户可以在任何屏幕尺寸上使用您的 PWA，并且其所有内容在任何视口尺寸下都可用。
原因
设备有各种尺寸，用户可能在同一设备上以各种尺寸使用您的应用程序。因此，确保您的内容不仅适合视口，而且您网站的所有功能和内容在所有视口尺寸下都可用至关重要。
用户想要完成的任务和想要访问的内容不会随视口尺寸而改变。您可以为不同的视口尺寸重新排列您的内容，并且它应该以某种方式全部存在。实际上，正如卢克·沃罗布尔斯基（Luke Wroblewski）在他的《移动优先》（Mobile First）一书中所述，从小处着手并为更大的屏幕调整您的设计可以改善网站的设计：
移动设备要求软件开发团队只关注应用程序中最重要的数据和操作。在 320×480 像素的屏幕中根本没有空间容纳无关紧要的元素。您必须确定优先级。
方法
关于响应式设计有很多资源，包括伊桑·马科特（Ethan Marcotte）的原始文章，与之相关的重要概念的集合，以及大量的书籍和演讲。要将此讨论缩小到响应式设计的内容方面，请参考内容优先设计和内容输出响应式布局。最后，虽然它专注于移动，但乔什·克拉克（Josh Clark）的《七种致命的移动神话》（Seven Deadly Mobile Myths）中的经验教训与响应式网站的小尺寸视图以及更广泛的移动设备一样相关。
提供自定义离线页面
当用户离线时，让他们留在您的 PWA 中，比退回到默认的浏览器离线页面提供更无缝的体验。
原因
用户期望已安装的应用程序无论连接状态如何都能工作。特定平台的应用程序离线时从不显示空白页面，PWA 也不应显示浏览器默认的离线页面。提供自定义离线体验，无论是当用户导航到未缓存的 URL 还是当用户尝试使用需要连接的功能时，都有助于您的网络体验感觉像是其运行的设备的一部分。
方法
在服务工作者的事件期间，您可以预缓存自定义离线页面以供以后使用。如果用户离线，您可以使用预缓存的自定义离线页面进行响应。您可以遵循我们的自定义离线页面示例，查看实际操作的示例并了解如何自己实现。
可安装
安装或向其设备添加应用程序的用户往往更参与这些应用程序。
原因
安装渐进式网络应用程序使其外观、感觉和行为与所有其他已安装的应用程序一样。它从用户启动其他应用程序的同一位置启动。它在自己的应用程序窗口中运行，与浏览器分开，并且出现在任务列表中，就像其他应用程序一样。
与特定设备的应用程序一样，安装您的应用程序的用户是您最参与的受众，并且通常具有与移动设备上的应用程序用户相当的参与指标。这些指标包括更多的重复访问、在您的网站上花费的更长时间以及比典型访问者更高的转化率。
方法
遵循我们的可安装指南，了解如何使您的 PWA 可安装。在这里推荐使用ROIBest的智能推荐功能，点击查看
优化渐进式网络应用程序清单
要创建真正出色的 PWA，一个感觉像一流应用程序的 PWA，您需要的不仅仅是核心清单。优化的 PWA 清单是关于使您的 PWA 感觉像是其运行的设备的一部分，同时利用网络的强大功能。
提供离线体验
在连接不是严格要求的情况下，您的应用程序离线时的工作方式与在线时相同。
原因
除了提供自定义离线页面外，用户期望 PWA 离线时可用。例如，旅行和航空公司应用程序应在离线时随时提供旅行详细信息和登机牌。音乐、视频和播客应用程序应允许离线播放。社交和新闻应用程序应缓存最近的内容，以便用户离线阅读。用户还期望离线时保持身份验证，因此为离线身份验证进行设计。离线的 PWA 为用户提供真正类似应用程序的体验。
方法
在确定用户期望哪些功能离线工作后，您需要使您的内容可用并适应离线环境。您可以使用 IndexedDB（一种浏览器内的 NoSQL 存储系统）来存储和检索数据，并使用后台同步让用户在离线时采取操作，并将服务器通信推迟到用户有稳定连接为止。您还可以使用服务工作者存储其他类型的内容（例如图像、视频文件和音频文件）以供离线使用，并实现安全、长期的会话以保持用户的身份验证。从用户体验的角度来看，您可以使用骨架屏幕，在加载时给用户一种速度和内容的感觉，然后根据需要回退到缓存的内容或离线指示器。
完全可访问
所有用户交互都符合 WCAG 2.0 可访问性要求。
原因
大多数用户在其生命中的某个时刻，都希望以 WCAG 2.0 可访问性要求所涵盖的方式使用您的 PWA。人类与您的 PWA 交互和理解的能力存在差异，需求可能是暂时的或永久的。通过使您的 PWA 可访问，您可以使其对每个人都可用。
方法
W3C 的《网页可访问性介绍》（Introduction to Web Accessibility）是一个很好的起点。大多数可访问性测试必须手动完成。Lighthouse 中的可访问性审计、axe 和 Accessibility Insights 等工具可以帮助您自动化一些可访问性测试。同样重要的是使用语义正确的元素，而不是自己重新创建这些元素，例如和元素。这确保了当您需要构建更高级的功能时，满足可访问性期望（例如何时使用箭头与选项卡）。A11Y Nutrition Cards 对于一些常见组件在这方面有出色的建议。abutton
可通过搜索发现
您的 PWA 可以通过搜索轻松发现。
原因 网络的最大优势之一是能够通过搜索发现网站和应用程序。实际上，超过一半的网站流量来自自然搜索。确保内容存在规范的 URL 并且搜索引擎可以索引您的网站对于让潜在用户找到您的 PWA 至关重要。在采用客户端渲染时尤其如此。 方法 首先确保每个 URL 都有一个独特、描述性的标题和元描述。然后，您可以使用 Google 搜索控制台和 Lighthouse 中的搜索引擎优化审计来调试和解决您的 PWA 的可发现性问题。您还可以使用 Bing 或 Yandex 的网站所有者工具，
适用于任何输入类型
您的 PWA 对于鼠标、键盘、手写…
发表评论