PWA——结合移动和网络世界的精华
几年前我听说过渐进式 Web 应用程序。那时我没有对这个话题做太多的研究。我记得我遇到过一篇文章，它以类似这样的句子开始描述渐进式 Web 应用程序：“使用特殊编码技术开发的网站可以用作移动应用程序”。坦率地说，这句话，“特殊编码技术”的话特别让我远离那个话题。我记得我认为这可能需要针对不同的移动设备使用不同的编码语言。这将是一个会带来太多工作量并且难以实施的结构。网络和移动的 DNA
上个月（2021 年 11 月）我有机会参加了一些Chrome 开发者峰会的学习休息室和研讨会由谷歌组织。其中一个研讨会被称为“您的第一个渐进式 Web 应用程序”。据我了解，在本次研讨会的 3 小时时间表内，我们希望学习和开发一个可以作为移动应用程序工作的 Web 应用程序，这意味着它可以安装在移动设备和操作系统上。我没有看到它很可能，但我还是注册了。然后我收到了一封注册确认邮件，上面说只有 CSS、HTML 和 javascript 的基本知识就足够了。但是，怎么会？这封电子邮件是说除了最基本的网络技术之外，您不需要了解任何额外的知识。我有点感兴趣，但内心深处我仍然在想他们会教如何使用某种工具或第三方捆绑一个 Web 项目，并通过打包将它变成一个原生应用程序。
技术的重心是网络。将移动世界与网络无缝结合的最佳方式是 Progressive Web Apps。至少在更好的东西出来之前是最好的。
注意：渐进式 Web 应用程序将使用首字母缩写词 PWA 来提及。PWA 没有具体的技术定义。PWA 只是一个 Web 应用程序，它使用多个 Web 浏览器 API 和 Web 平台中的一些渐进式扩展功能。它更像是一组最佳实践和技术，可让您的用户在具有相同代码库的每个平台上以出色的类似应用程序的体验享受您的网站。所以这不像你有没有 PWA。它更像是您的网站或多或少是 PWA。
多平台支持
Progressive Web Application 是 Google 引入的一个名称，被其他公司如 Firefox、Opera、Microsoft、Samsung 等采用，并继续使用。但当然不是苹果。尽管 Apple 没有公开宣传，但 PWA 可以在 Apple 设备上运行。实际上，这个想法诞生于 Apple 提出的独立应用程序。后来，这个想法得到了增强，并因渐进式网络应用程序的名称而变得更加流行。
移动和网络世界的精华
我喜欢使用这个例子的想法；“两组的交集”数学。PWA 正是来自 Web 和 Mobile 集合的交集，并包含每个集合的一些最佳特性。
-来自网络世界-
链接和可发现性：由于这是一个 Web 应用程序，您可以使用链接在社交媒体平台上创建帖子并共享指向您的应用程序的直接链接，您的应用程序也将在线可用，这意味着可以被搜索引擎发现。
易于部署和更新：在移动应用程序上部署和更新过程是一个很大的工作量，这是一个棘手的过程。然而，在 Web 应用程序上，部署比移动应用程序容易得多。由于 Web 应用程序意味着 Web 服务器上有一些文件，并且唯一需要以部署的名义完成的事情就是更新这些文件。为了能够部署移动应用程序，您需要遵循要发布或更新应用程序的应用程序商店的步骤和限制，在应用程序商店上创建更改请求并等待他们批准该更改请求（批准可能需要数小时/数天），即使您的部署已顺利发布到应用商店，您的用户也需要前往商店并获取您共享的更新。
标准和工具：与常规移动应用程序不同，PWA 通过 HTTPS 提供服务。所以我们可以说，PWA 从网络世界中获得了网络标准和工具的优势，并通过网络标准的力量确保了安全通信。
-来自移动世界-
离线访问：在移动原生应用程序中，即使没有互联网连接或可用服务器，用户也可以启动和使用应用程序的某些部分（有时是全部）。离线访问正是产品所有者决定在 Web 应用程序之外制作移动应用程序的原因。PWA 为互联网访问受限的用户提供不间断的用户体验。
已安装的图标和独立：就像移动应用程序一样，PWA 在移动设备的主页或桌面的应用程序列表中都有一个图标，并且在安装时独立工作。
推送通知：推送通知也是移动世界的一个非常强大的功能。即使应用程序没有启动和工作，PWA 也可以管理并向本机设备发送通知。
性能和用户体验：移动应用程序的性能总是更好。因为移动应用程序在安装过程中会在设备上存储大量数据。此外，当我们查看调查结果时，很明显用户喜欢移动应用程序的 UX 设计而不是 Web 应用程序设计。
如果您使用的是谷歌浏览器，那么您一定是在没有互联网连接时访问过此页面。这种可爱但令人讨厌的恐龙被称为Downasour。PWA 带来的最具开创性的就是离线访问。所以我们告别了这个Downasour。
谷歌浏览器
如果没有互联网访问，网站将如何运作？
原生应用程序可以在没有互联网连接的情况下打开，因为在下载和安装应用程序的过程中，应用程序的关键资源存储在设备中。这些资源可以根据您的移动应用程序的离线访问量来管理。这正是 PWA 中发生的事情。
在我们深入了解细节及其工作原理之前。最好解释一下 PWA 的内容。
PWA 不依赖于单个 API。有许多 Web 技术可用于创建渐进式 Web 应用程序。
申请成为 PWA 的最低要求：
[*]网络清单
[*]服务人员
这两个确保浏览器将解释这是一个 PWA，并为用户提供安装和提供其他 PWA 增强功能的能力。
清单文件
Web 应用程序清单是一个 JSON 文本文件（通常命名为manifest.json或webmanifest.json）。该文件包含下载和运行 PWA 所需的所有信息，就像原生应用程序一样。清单可以包含许多变量，它们都提供有关 PWA 的本机行为的许多不同信息。
基本清单文件示例
服务人员
服务工作者是一个脚本，它允许管理缓存中的资产并拦截/控制来自 Web 浏览器的网络请求。Service Worker 是用 JavaScript 编写的。它是一个浏览器功能，它的作用不同于网站中的常规 JS 脚本，即。它无权访问 DOM。
Service Worker 的角色
如图所示，标准 Web 应用程序直接向 Web 服务器发出请求，随着 Web 的逐步增强，Service Worker 充当 Web 应用程序的网络代理。由于服务工作人员可以拦截网络请求并修改响应，因此在某种程度上，服务工作人员只能通过HTTPS运行以确保其安全。
Service Worker 可以在后台同步数据、管理缓存、处理推送通知和拦截网络请求。事实上，他们还能够检查服务器的可用性，将内容存储在缓存中，并将该内容提供给 PWA 的 UI 部分。就像任何其他网络工作者一样，服务工作者独立于 UI 上下文工作。
如何安装？
由于 PWA 是多平台应用程序，因此有很多方法可以根据您使用的设备和浏览器来安装它们。在 Chrome 中，如果您正在访问的应用程序是 PWA，您会在地址栏右侧看到安装小图标。在 iPhone 中，您只能使用 Safari 来安装 PWA，打开工具栏菜单并单击添加到主屏幕按钮。
此外，您可以使用一些第三方将您的 PWA 变成可以在应用商店上发布的包。
在主屏幕和初始屏幕上安装适用于 Android 的 PWA 演示的示例
在主屏幕和 PWA 运行时为 iOS 安装 PWA 演示的示例
桌面渐进式 Web 应用程序在自己的窗口中运行，没有标签或地址栏
互联网上有许多很棒的 PWA。而且这个数字只会在未来几年内增长。确保这项伟大的技术在您的雷达上！
页:
[1]