谷歌在2015年提出初步建议后，近年来，渐进式 Web 开发不断发展。渐进式 Web 应用程序 (PWA) 利用最好的 Web 和移动技术来提供出色的用户体验。
为什么 PWA 值得付出努力？企业可能更愿意为响应式网站为 Android 和 iOS 平台构建单独的应用程序。然而，使用 Progressive Web Apps 可以帮助统一所有这些方法。在这份渐进式 Web 应用初学者指南中，我们讨论了为什么许多企业在 2020 年探索这一途径，然后向您展示如何与时俱进。
我们首先讨论 Progressive Web Apps 的作用，然后讨论采用它们的主要原因。接下来，在查看使用 HTML、CSS 和原始 JavaScript 的 PWA 简单示例之前，我们将探索典型的渐进式 Web 应用程序的元素。
什么是渐进式 Web 应用程序 (PWA)？
渐进式网络应用是使用最新网络功能为用户提供可与原生移动应用相媲美的体验的网络应用。虽然渐进式网络应用程序是使用网络技术构建的，但它们的功能模仿了原生应用程序的功能。
Progressive Web App 的目标是提供类似应用程序的体验。如果您选择 Progressive Web Apps，您可能会放弃一些本机功能，但这种选择会极大地扩展您的范围。随着 Web 技术可用的功能越来越多，原生应用程序和渐进式 Web 应用程序之间的差距近年来已经缩小，导致采用率提高。
渐进式 Web 应用程序的特征
就像响应式网页设计的概念一样，渐进式 Web 应用程序包含开发人员可能遵循的一组特征。它包含一系列技术和功能，弥合了原生应用程序和渐进式网络应用程序之间的差距。除了适应各种设备、浏览器和屏幕外，Progressive Web Apps 还具有以下特点：
- Installable：PWA 可以安装并固定到设备的主屏幕，以便以后使用.
- 能够离线工作：PWA 应该在未连接时工作（至少屏幕显示您需要连接）。
- 安全性：由于 PWA 中的信息是通过网络交换的，因此您应该确保连接使用 HTTPS 协议和 SSL。
- 支持本机应用程序功能，例如全屏模式和推送通知。
在构建 Progressive Web Apps 时，这些特征应该作为指南。因此，关于您的应用程序是否增量的答案，解决方案更多的是规模问题，而不是二元选择。
归根结底，Progressive Web App 只是一个 Web 应用程序 - 因此它不会出现在任何应用程序商店中。这会损害您的应用程序吗？这始终是一种权衡。流行的应用程序商店让您更容易被发现，并吸引正在等待新的和有趣的应用程序的新用户。另一方面，进入应用商店需要付出很大的努力，你的创作必须100%符合商店的要求。自己交付 PWA 通常更简单，但你必须有一个预先存在的受众，你可以向他们推销你的应用程序。
实施渐进式网络应用：关键考虑因素
到目前为止，我们已经讨论了渐进式网络应用的特征。让我们来看看 Progressive Web Apps 的一些元素。在继续本节之前，我们假设您的网站具有响应能力并且可以在各种设备和浏览器上正常运行。
要使您的应用程序离线工作，您需要雇用一名服务人员。简而言之，服务注册了您的 Web 应用程序的离线版本。接下来，您需要为您的 PWA 清单。本质上，这是一个包含应用程序元数据的 JSON 文件。
您可以在我们的指南中了解如何按照这些步骤在 WooCommerce 上创建渐进式 Web 应用程序。
为什么要开发渐进式 Web 应用程序？
原生移动应用程序通常需要几个步骤来安装和设置。随着安装您的应用程序涉及的步骤越来越多，关注的用户会越来越少。另一方面，用户几乎可以立即使用 Progressive Web Apps。渐进式网络应用程序可帮助企业极大而有效地吸引他们的受众。 PWA 的最大优势是：
- 提高效率：由于应用程序加载了网络技术，因此它们通常比原生应用程序花费更少的时间。
- 有效利用带宽：由于 PWA 只是基于文本的代码，因此理想情况下它们比本机应用程序的安装文件要小。因此，用户可能需要花费更少的数据才能让您的应用程序在他们的设备上运行。
使用 Lighthouse 评估渐进式 Web 应用程序
正如我们之前建立的那样，渐进式 Web 应用程序由一组属性定义。您如何评估您的 Web 应用程序是否是渐进式的？ Google 的 Lighthouse 是一种用于评估网站进度的工具。 Lighthouse 是一个自动化的开源程序，可以根据性能、SEO 和可访问性等参数评估您的网站。您可以安装 Lighthouse Chrome 插件以将其用作开发人员工具的一部分。
要进行 Lighthouse 审核，请在 Chrome 中打开您的网站，然后导航至 Chrome 开发人员工具中的 Lighthouse 选项卡。该工具的 Progressive Web Apps 部分详细介绍了您网站的各种参数以及您如何与这些领域的最佳实践相关联。
Lighthouse demo PWA demo：如何创建待办事项list
我们在博客前面创建了一个基于 ReactJS 的 WooCommerce 渐进式 Web 应用程序。在本节中，让我们创建一个 vanillaJS 渐进式 Web 应用程序。这个应用程序将是一个简单的待办事项列表。最终的用户界面只有一个任务列表和一个用于向列表中添加新任务的按钮。
我们的渐进式网络应用演示
PWA 的 HTML/CSS 结构
首先，让我们为渐进式 Web 应用程序创建一个结构。
.wp-block-code { border: 0;填充：0； } .wp-block-code> div { 溢出：自动； } .hljs { 框大小调整：边框框； } 。 hljs.shcb-code-table { 显示：表格；宽度：100%； } .hljs.shcb 代码表 > .shcb-loc { color: inherited;显示：表行；宽度：100%； } .hljs.shcb- code-table .shcb-loc> span { display: table-cell; } .wp-block-code code.hljs: not (.shcb-wrap-lines) { space: pre; .wp-block-code 代码。 hljs.shcb-wrap-lines { 空白：预包装； } .hljs.shcb-line-numbers { border-spacing: 0;计数器复位：行； } .hljs.shcb-line-numbers> .shcb-loc { counter-increment: line; } .hljs.shcb-line-numbers .shcb-loc> span { padding-left: 0.75em; } .hljs.shcb-line-numbers .shcb-loc :: before { border-right: 1px solid #ddd;内容：计数器（行）；显示：表格单元格；填充：0 0.75em；文本对齐：右； -webkit-用户选择：无； -moz-用户选择：无； -ms- 用户选择：无；用户选择：无；空格：nowrap；宽度：1%；
…
请注意，就像在响应式网页设计中一样，我们设置视口。此外，我们将初始缩放设置为“1”。接下来，我们链接到样式表和清单。我们很快就会看到如何创建清单 JSON 文件。
接下来，我们定义页面的主体。我们创建一个标题和一个按钮来将项目添加到列表中。我们将很快使用 JavaScript 将操作与按钮点击相关联。
