PWA 是 Web 浏览器

虽然渐进式 Web 应用 (PWA) 仍处于开发的早期阶段，但它们有潜力彻底改变我们使用 Web 的方式。

Digital creative of a browser on the internet

渐进式 Web 应用 (PWA) 是一种 Web 应用程序，它使用现代 Web 技术来提供与任何移动应用相当的用户体验。活跃的开源社区，与 Google 和 Microsoft 等技术领导者一起，正在推动 PWA 的发展议程，以努力“弥合应用差距”。

基本上，PWA 在 Web 浏览器中运行您的应用。由于本质上存在 Play 商店和 App 商店的双寡头垄断系统，因此重点放在两个浏览器上：Google Chrome 和 Apple Safari（分别构建在开源 Chromium 和 WebKit 之上）。

我不会介绍如何创建桌面应用。有关该主题的更多信息，请查阅 Electron。

PWA 的构建方式与任何网站或 Web 应用相同。它们使用最新的移动技术并实施 UX 最佳实践。PWA 还可以将浏览器与原生代码连接，以改善用户体验。

如果您在您最喜欢的搜索引擎中输入“什么是 PWA”，您可能会得到类似于“PWA 被设计为快速、可靠和引人入胜，具有离线工作和安装在设备主屏幕上的能力”的标准回复。虽然这部分是事实，但这只是 PWA 有潜力成为什么以及它正在演变成什么的一个冰山一角，即使在我撰写本文时也是如此。

不是 PWA 的是什么

以下是允许您从单个代码库进行开发的跨平台应用框架。它们不使用浏览器作为其平台。

Flutter
React Native

Flutter 使用一种名为 Dart 的语言，该语言编译为 iOS、Android 和 Web 包。React Native 执行相同的操作，但在后端编译 JavaScript。

PWA 的定义是什么？

根据 PWA 的原始定义，它必须满足以下三个要求

Service worker： 提供离线功能。
Web manifest： 用于配置主屏幕和应用图标的 JSON 标记。
安全性： 强制执行 HTTPS，因为 service worker 在后台运行。

这些组件允许您通过 Google Lighthouse PWA 审核，并在您的分数上获得绿色对勾。

Google Lighthouse score, including performance, accessibility, best practices, SEO, and PWA

图片来源

（Alex Borsody，CC BY-SA 4.0）

一旦您满足这些要求，Chrome 的“添加到主屏幕”提示也会自动启用。

PWA Builder（Microsoft 提供的一项免费服务）具有出色的 UI，用于构建 PWA 和可视化基本要求。请参阅以下基于 developers.google.com 的示例。您可以在此处演示此功能，该功能由我在我之前的文章中讨论的 PWA 模块提供。

Google Developer's interface displaying Service Workers

图片来源

（Alex Borsody，CC BY-SA 4.0）

Google Developer's interface displaying Manifest

图片来源

（Alex Borsody，CC BY-SA 4.0）

PWA 的基本要求允许通过 service worker 实现离线行为，并且 manifest.json 文件允许在 Android 上实现“添加到主屏幕”行为，其中您的网站作为图标添加到主屏幕，并在没有浏览器 Chrome 的情况下（全屏）打开，并带有应用启动页面。这些是 PWA 的最低要求，除了由于离线缓存而提高性能外，主要给人一种网站是应用的错觉。这在核心上是一个心理差距，最终用户将不再将浏览器仅仅视为“网站”，而是将其视为它实际上是什么……一个应用平台。Google 似乎将此作为优先事项，为开发无数的功能、特性以及实际上提供增强的“类应用体验”的 UX/UI 增强功能铺平道路。

PWA 实际上是浏览器技术以及 Web 开发技术和技术的集合，这些技术和技术使网站更“像应用”。我已将这些技术和技术分解为以下类别。

增强的类应用体验

改进的移动设备 UX/UI 体验
- HTML/CSS/Javascript
原生设备访问和增强的 Web 功能
速度和性能

今天的 PWA 可以超越定义的范围

以下是有关上述三种体验描述的更多详细信息。

UX/UI 改进

UX/UI 和视觉问题解决对于使您的网站感觉像应用至关重要。这通常表现为对动画、输入/字体大小、滚动问题或其他 CSS 错误等细节的关注。重要的是要有一个强大的前端开发团队，以便他们可以创建这种 UX。在设计和 UX 类别中，我们可以使用 Web 文档（HTML/JSS/JS）的构建块来实现增强功能。这方面的两个例子是

Hotwire Turbo：一个开源框架，使用 HTML over the wire 仅重新加载使用 AJAX 或 WebSockets 更改的页面区域。这提供了 SPA 使用有限 JavaScript 力求实现的性能改进。这种方法非常适合您的单体应用程序或模板渲染系统；无需投入增加解耦前端和后端的复杂性。
移动设备特定的 SPA 框架： 有几个解耦框架可以为您的网站提供类似应用的用户体验。Onsen UI 和 Framework 7 是两个出色的选择，可以帮助您为您的网站创建快速、响应灵敏的用户界面。但是，您无需依赖这些框架。如上所述，一个优秀的前端团队可以通过实施最新的类应用移动设计技术来构建您力求实现的 UI。

此幻灯片更详细地介绍了在您的 PWA 中保持 HTML/CSS/JS 的最新状态。

我们最喜欢的关于开源的资源

Web 功能

Chromium 团队不断改进浏览器体验。您可以在 Project Fugu（总体 Web 功能项目）中跟踪此进度。WebKit 也在不断努力改进其浏览器体验和功能。

Swift API 还可以与 WKWebView 交互以增强原生体验。

Google 有一项名为 Bubblewrap 的服务，它与 Trusted Web Activity (TWA) 配合使用。所有这些操作只是将您的 PWA 启用网站包装在原生 APK 捆绑包中，以便您可以将其提交到应用商店。这就是上面提到的 PWA Builder 链接在 Android 上的工作方式。您可以在我之前的文章中了解有关 WKWebView 和 TWA 的所有信息。

速度和性能

有无数种方法可以提高您的应用性能。查看 Google PageSpeed 工具开始。

使用 PWA 的好处包括以下几点

提高 Lighthouse 分数和 SEO。
单个代码库。
无摩擦测试。
开发周期的即时反馈循环。
使用托管 PaaS Web 部署工作流程。
Web 技术是各种开发人员的技能组合。
唯一提供成熟 Web 体验的跨平台开发解决方案。
无限的选项来定制设计，而无需依赖跨平台框架的有限 UI 组件。
触达互联网连接有限（或没有）的用户。

使用 PWA 有一些缺点/注意事项，包括

功能有限：与原生设备访问相比，PWA 仍然存在“应用差距”。但是，浏览器在弥合这一差距方面取得了很大进展。从 Thomas Steiner 了解更多关于 Project Fugu 如何弥合应用差距的信息，并访问 What web can do 以查看您浏览器的功能。在选择您的技术时，您的 PWA 项目很有可能属于大多数不会遇到关于功能/特性的限制的应用。
缺乏标准化：上面 Thomas Steiner 的采访讨论了“PWA 标准”，目前尚缺乏该标准。在我看来，这是围绕该主题的许多困惑以及开发人员难以度过第一个“顿悟时刻”的原因。这种困惑导致技术发展势头比应有的速度慢。此外，由于缺乏清晰度，营销或管理部门甚至可能不知道要询问 PWA，因为他们不明白它是什么。
iOS App Store：应用商店目前不列出 PWA，因此它们比原生应用更难找到。有一些方法可以做到这一点。但是，关键是使您的 Web 应用体验与原生应用一样好或更好。做得对，苹果之神会眷顾你，因为评论中最重要的事情似乎是你提供良好的移动体验。Ionic，一个在 PWA 成为术语之前就在原生 iOS 应用中使用 WKWebView 的框架，在他们的论坛中有一些有趣的见解。如果您知道自己在做什么，这不会成为问题。您可以在我之前的 Opensource.com 文章的“将您的 Web 应用放入应用商店”部分中查看更多信息。
某些情况下的潜在安全问题：浏览器使用 cookie 作为身份验证。自浏览器诞生以来，这是一种久经考验的浏览器方法，用于维护状态，但可能不适合您的项目需求。浏览器具有出色的密码管理功能，并且不断发展和实施其他身份验证方法，例如 Webauthn。使用关联域提供了另一层安全性。