什么是PWA？关于渐进式Web应用程序
假设您需要订餐 - 您可以通过该公司的应用程序立即进行订餐。也许您需要政府服务——同样的情况也适用。您甚至可以通过应用程序获得医疗紧急拨号服务。
从银行业务到学习，从交易到购物，无所不包的应用程序应有尽有。每个企业都有一个应用程序，甚至我们的政府也将其服务简化为应用程序形式。
等等，构建和维护应用程序很麻烦，而且对于小型企业来说相当昂贵，那么他们如何管理呢？
嗯，很简单：借助技术进步，有一种选择可以帮助小企业摆脱困境。此选项将应用程序的功能与 Web 开发中使用的技术相结合，为企业构建负担得起的服务 - 我说的是渐进式 Web 应用程序。
让我们深入了解 PWA 的全部含义。
（更|多优质内|容：java567 点 c0m）
什么是渐进式 Web 应用程序？
渐进式 Web 应用程序 (PWA) 是使用我们可能都了解和喜爱的 Web 技术（例如 HTML、CSS 和 JavaScript）构建的应用程序。但它们具有实际本机应用程序的感觉和功能。等一下！原生应用程序，这是什么意思？
本机应用程序是使用特定编程语言为特定设备平台（IOS 或 Android）构建的软件应用程序。 PWA 具有推送通知和离线工作等功能。它们还基于现代 API 构建和增强，这使得可以轻松提供改进的功能以及可靠性以及将它们安装在任何设备上的能力。
PWA 利用了庞大的网络生态系统，其中包括插件、社区以及部署和维护网站的相对容易性，这与开发相当困难的本机应用程序相反。这意味着您可以快速轻松地构建 PWA。
随着它的流行，许多公司已经转向该产品，我倾向于认为这是因为它能够在 Android 和 iOS 上运行，没有太大区别。将产品作为 PWA 的顶级公司的一些很好的例子包括：Twitter、Pintrest、Uber、Tiktok、Spotify、Jumia（非洲领先的电子商务网站）等......
该产品的一个共同特点是它们都可以安装在主屏幕上，能够从您上次离开的位置离线工作，并提供与其本机应用程序相当的体验和功能。
就像构建本机移动应用程序时，应该满足一些期望才能制作出供消费者使用的优质产品，同样的情况也适用于 PWA。让我们讨论一下什么才是好的 PWA。
PWA 的特点
以下是开发 PWA 时应考虑的事项：
反应能力
不同的公司生产具有不同屏幕尺寸的小工具，作为开发人员，您有责任确保所有不同的用户都喜欢该产品，无论他们使用什么设备。因此，最好确保您的应用程序可以在任何屏幕尺寸上使用，并且其内容在任何视口尺寸下都可用。
可安装
研究表明，与访问官方网站相比，用户倾向于更多地使用已安装的应用程序。使用 PWA 作为您的产品，可以为用户提供普通应用程序的外观、感觉和参与度。
独立连接
通过让用户即使在离线状态下也能继续使用您的应用程序，可以提供比将他们返回到默认离线页面更一致的体验。
音乐应用程序就是一个很好的例子，即使没有互联网连接，您的用户也应该能够访问离线播放并收听保存的音乐。另一个很好的例子是 Twitter 应用程序，用户可以返回阅读他们可能错过的推文。
可发现性
由于大多数 PWA 都是转换后的网站，因此让它们在搜索引擎上可被发现是公平的，这将有助于为您的应用程序产生额外的流量。与无法通过搜索引擎发现的本机应用程序相比，这也是一个优势。
外貌
应用程序的外观应该像普通应用程序一样，因此请务必包含应用程序图标等内容，这将有助于使其易于识别，启动画面等内容也会增加应用程序的触感和感觉。
跨平台
PWA 首先作为 Web 应用程序开发，这意味着它们需要在所有浏览器/系统上运行，而不仅仅是选定的少数浏览器/系统。用户在决定安装它们之前应该能够在任何浏览器中使用它们。
所以各位！现在您已经了解了有关 PWA 的一般信息。在此过程中，您可能偶尔会注意到 PWA 和 Native App 之间的比较，这可能会让您有点困惑，那么让我们通过检查两者之间的比较来澄清一下电波，以获得清晰的理解。
PWA 和本机应用程序之间的差异
开发成本
与本机应用程序相比，PWA 的开发成本更低当您开发本机应用程序时，您必须学习某种编程语言，然后为每种类型的设备（Android 和 iOS）构建应用程序版本。另一方面，您可以选择聘请经验丰富的专业人士来为您完成这项工作，这甚至会导致成本更高。
今后，您还需要资源来维护和更新应用程序，这意味着需要大量的金钱和时间。
对于 PWA，您可以为不同平台拥有单一代码库。它还节省时间，因为您不需要从头开始开发它，您可以配置当前的网站以适应。
如果您选择雇用开发人员，则与本地开发人员相比，它只会雇用一名开发人员，根据您需要应用程序的位置，您最多可以雇用两名开发人员。
可发现性
本机应用程序无法被搜索引擎索引，只能通过 App/Play 商店的网站找到它们。您可以使用应用商店优化 (ASO) 使您的应用在 App/Play 商店中更容易被发现，但那是另一回事了。
与本机应用程序不同，PWA 的工作方式类似于网站，因此可以被搜索引擎索引。这有助于他们在搜索结果中排名更好。
安全
如今，为了运行一个网站，应该使用 SSL 证书对其进行加密，这增加了额外的安全层。现在，我们已经知道 PWA 是将网站转换为应用程序，这意味着它们更安全，因为它们在 HTTPS 上运行。这些安全协议允许客户端和服务器之间安全地交换数据，以便数据不会被篡改。
为了保护您的本机应用程序，您需要实施各种安全措施，例如多重身份验证等。
安装与下载
本机应用程序需要从应用程序商店下载并安装。这需要用户从头到尾做出一些承诺。用户在安装应用程序之前必须通过并检查多个权限。
另一方面，PWA 不需要任何这些步骤。您可以在浏览器中为其添加书签，只需点击几下即可将应用程序添加到主屏幕。
PWA 的好处
许多私人和公共组织正在转向 PWA，不仅因为它们的开发成本低廉，而且因为它们提供了更高的参与度。 现在让我们快速总结一下 PWA 的优势：
它们反应灵敏，并且适用于许多不同的屏幕尺寸。
它们可以在多个平台和任何具有现代网络浏览器的设备上运行。
它们的功能就像普通的本机应用程序一样。
更新是独立的，您无需访问 Play 商店进行更新。
它们是使用常见的网络技术构建的。
它们又快又轻。
与其他网站不同，它们可以离线工作。
它们可以通过搜索引擎发现。
它们易于安装。
维护成本低。
PWA 开发入门要求
开始构建 PWA 并不需要太多时间。您只需要一些东西就可以开始了。
工具 开发 PWA 的最著名的技术堆栈是 AngularJS。说到 Angular，这里有一份关于如何将现有 Angular 应用程序转换为 PWA 的丰富指南。其他堆栈包括 ReactJS 和 Polymer。
HTTPS 您将需要一台具有 HTTPS 连接的服务器。这可以确保您的用户数据的安全。它为您的网站增加了额外的安全层。
应用程序外壳 当您的应用程序加载时，它可以提供良好的第一印象。简而言之，这是用户第一次与您的应用程序交互时看到的内容。
Service Worker 这是 PWA 背后的关键技术之一。它们帮助支持您的应用程序离线工作，并执行高级缓存并运行后台任务。即使您的 PWA 未运行，Service Worker 也可以完成任务。与 Service Worker 相关的其他一些功能包括：
发送推送通知
徽章图标
运行后台获取任务等...
清单文件这是使用Web 应用程序清单生成器 创建的 JSON 文件。该文件包含告诉您 PWA 应如何显示和运行的信息。它允许您确定 PWA 的名称、描述、图标、颜色和其他功能。以下是清单文件的示例：
{
"short_name": "DevBlogger",
"name": "DevBlogger",
"description": "All dev stories under one roof",
"theme_color": "#eb5252",
"background_color": "#000000",
"display": "fullscreen",
"Scope": "/", "orientation": "portrait",
"icons": [
{
"src": "images/android/android-launchericon-48-48.png",
"type": "image/png",
"sizes": "48x48"
},
{
"src": "images/android/android-launchericon-96-96.png",
"type": "image/png",
"sizes": "96x96"
},
{
"src": "images/android/android-launchericon-192-192.png",
"type": "image/png",
"sizes": "192x192"
}
],
"start_url": "index.html?utm_source=homescreen"
}
审核您的应用程序 这可以使用 Google Lighthouse 工具实现。Google Lighthouse 是一款开源软件，任何人都可以在任何网页上使用。谷歌是 PWA 的大力支持者，并将其视为网络的未来。您可以使用 Lighthouse 来帮助您了解 PWA 的速度、可访问性和 SEO 准备情况。
如何构建 PWA
通过执行以下步骤，您可以轻松创建功能齐全的 PWA，在所有设备上提供令人惊叹的用户体验。
第 1 步 - 规划您的应用程序
在投入开发之前，您应该考虑 PWA 的目标、想要包含哪些功能、优先级和用户体验。您可以为应用程序创建第一个设计概念和线框图，以可视化结构和布局。 在大多数情况下，这通常称为“发现阶段”。您有机会构思和收集用户和利益相关者的反馈，并考虑您的产品的功能。
第 2 步 - 设计用户界面
规划一切顺利后，您现在可以继续设计应用程序的 UI。在此阶段，请考虑响应能力、与不同平台的兼容性等因素。请务必捕获对用户至关重要的所有细节，包括他们在使用过程中的交互和参与。
第 3 步 - 开发前端
使用 HTML、CSS、JavaScript 和 Angular 等框架的 Web 技术。React 或 Vue.js 为用户开发具有视觉吸引力的界面。并且永远记住，他们使用此堆栈进行开发的关键原则是实现移动优先方法，同时确保对更大屏幕的响应能力。
第 4 步 - 实施 Service Worker
如前所述，Service Worker 是 PWA 的关键组成部分。它们是在后台运行的 JavaScript 文件，支持离线功能、推送通知和缓存。为了确保您的 PWA 发挥最大潜力，您需要注册并实施 Service Worker。如何做到这一点很大程度上取决于您使用的框架。
第 5 步 - 添加推送通知
利用 Push API 和服务工作线程来实现推送通知。获得必要的用户同意并使用推送通知服务向用户发送通知。
第 6 步 - 优化性能
一般来说，优化是开发中非常重要的一步。这就是您为用户提供无缝体验的方式。确保您减少加载时间。通过利用代码分割和缓存等技术，我们应该能够实现 PWA 的快速高效的操作。
第 7 步 - 测试和调试
在不同的设备、浏览器和网络条件上测试您的 PWA，以确保其满足目标。还要确保收集用户反馈并在必要时进行必要的改进。
结论
请记住，PWA 对于行业来说是新事物，并且尚未得到充分利用，它们可以成为您工具包中的一个很好的补充。
凭借最新的技术和正确的工具，开始使用 PWA 最终可以增加个人或组织产品的销量和金钱收益。它具有许多功能，包括速度快、能够离线工作，而且它们的性能就像普通的本机应用程序一样。这为您的用户提供了良好的体验并让他们满意。
如果您已经读到这里，我真的很感激。
享受编码的乐趣❤。
