渐进式 Web 应用开发：2022 年如何打造 PWA
由 Mux 赞助的 DEV 全球展示挑战赛：展示你的项目！
在谈到Web开发时，渐进式Web应用（PWA）一直是热门词汇。但您的公司真的能从PWA中获益吗？阅读本文，了解您现在以及在2022年应该如何以及何时使用和不应该使用这项技术。
PWA简介
渐进式 Web 应用 (PWA) 是 Web 和移动应用开发领域一个相对较新的趋势。该术语由谷歌工程师 Alex Russell 于 2015 年提出，指的是采用“渐进式”设计方法的 Web 应用，其行为和功能与原生应用类似。然而，PWA 的具体含义可能并不十分清晰，因为目前尚无明确的定义来界定什么是渐进式 Web 应用。
然而，PWA 设计模式有一些显著的特征。这些特征包括使用 Service Worker（在浏览器中运行的后台脚本，用于提供推送通知等功能）和应用清单（标准化的 JSON 文件，用于指示平台如何安装和管理应用）。此外，还有一些常见的设计主题，通常被认为是 PWA 独有的。
PWA 的优点和缺点
在应用程序开发中采用渐进式 Web 应用 (PWA) 技术有很多好处，但也存在一些需要考虑的缺点。PWA 设计的主要优势在于其平台无关性。这意味着可以使用同一套代码库开发应用程序，并将其部署到多个不同的平台上。
这种简化开发的方式减少了应用上市所需的时间和资源。PWA 具有平台独立性，且本身即可安装，因此应用可以轻松部署到多个平台。用户可以像下载和安装任何原生应用一样下载和安装 PWA，而无需依赖浏览器访问，从而带来流畅直观的用户体验。
PWA 也受益于现代网站设计的优势，例如响应式设计和轻量级特性。现代浏览器允许开发者利用各种设计选项，根据不同的平台和屏幕尺寸做出响应，从而为用户提供一致的体验。这些现代化应用的代码库更小，并且由于它们可以在浏览器中运行（而不是作为原生应用运行），因此更加轻便。作为独立的 Web 应用，PWA 的另一个优势是它们可以被搜索引擎收录。
然而，PWA 设计的主要缺点在于其平台和硬件支持方面的一些限制。由于 PWA 运行在浏览器中，因此它们无法像使用平台 SDK 构建的原生应用那样直接访问平台的所有功能。一些平台对这类应用的支持也受到限制，不过支持和功能正在不断发展。
为什么要使用 PWA？
归根结底，PWA 设计适用于那些希望快速、经济地将应用交付给用户的开发者。这种设计非常适合资金有限的早期创业公司，他们希望尽快将 MVP 应用推向市场。但任何希望利用现代应用开发发展趋势的公司，都能从 PWA 中获益匪浅。
使用 PWA 的大品牌
PWA（渐进式Web应用）并非仅适用于小型公司和资金紧张的初创企业。相反，许多全球性企业通过转向PWA策略，显著提升了用户体验，并取得了显著成效。Twitter就是一个备受瞩目的例子，该公司在设计Twitter Lite应用时就充分考虑了PWA技术。Twitter Lite推出后，Twitter的推文数量增长了75%，每次会话浏览页面数增长了65%，跳出率下降了20%。
福布斯和Pinterest也为其业务设计了PWA（渐进式Web应用），福布斯的应用访问量增长了43%，用户互动度增长了100%。Pinterest的PWA则带来了44%的用户驱动广告收入增长。这些只是众多采用PWA设计的企业案例中的几个例子，其他知名品牌如Uber和速卖通也采用了类似的设计。
PWA 与其他技术的比较
PWA 最容易与原生应用或 Web 应用进行比较，它介于两者之间。但还有许多其他技术也处于 Web 和原生应用之间的范畴，这些技术也可以与 PWA 进行比较。
PWA 与原生应用
将 PWA 与原生应用的通用定义直接比较，可以发现一些差异。具体来说，PWA 使用更轻量级、更简单的代码库构建（只需要 Web 语言，而无需特定于平台的 SDK 框架）。
PWA 与跨平台应用
与 React Native、PhoneGap 或 Flutter 等混合技术相比，跨平台应用有一些需要特别注意的细节。例如，React Native 专为构建跨平台原生应用而设计，并且只需一套代码库即可实现，但通常它要求开发团队具备更广泛的技能，因为他们需要处理各种用不同语言（例如 Java 或 Objective-C，具体取决于平台）编写的原生控件和插件。
PhoneGap 应用也有些类似。它们本质上是封装在原生容器中的 Web 应用，可以通过一系列原生插件访问各种平台 API。尽管可用的插件数量庞大，但您可能仍然需要一些自定义功能，这就需要您自行实现，当然，这同样需要 Android 和 iOS 开发人员的帮助。
从这个意义上讲，PWA 要简单得多，通常只用 JavaScript 构建，并利用 React、Angular 和 Vue 等现代框架。
总而言之，PWA 与使用其他跨平台技术构建的混合应用最为相似。PWA 在开发和后续支持方面通常成本更低，因为您可能只需要一个规模较小的团队，无需任何特定或独特的技能。PWA 的缺点在于它们受限于浏览器功能，并且可能对应用所需的某些核心功能支持不足。
PWA 与 Web 应用
与纯 Web 应用相比，PWA 展现出诸多优势。这是因为 Web 应用受限于浏览器的功能。这也意味着 Web 应用无法提供 PWA 那样便捷的安装方式。虽然它们也能提供类似的功能，例如许多单页应用 (SPA) 所具备的响应式和轻量级设计，但 PWA 的关键区别在于其标准化的方法来模拟原生应用的用户体验。
PWA 还可以与 Electron 和 Flutter 等应用框架进行比较。Electron 严格来说是一个 Web 应用框架，其在应用体积和安全性方面的缺点使其通常不适合 PWA 开发。而 Flutter 与 PWA 更为相似。PWA 和 Flutter 都强调在单一代码库中开发，并具备跨平台的原生功能。然而，Flutter 仅使用新的 Dart Web 语言，而 PWA 可以使用任何语言编写，许多旧语言也提供了更好的支持。
主流平台对 PWA 的支持
评估 PWA 时，最重要的因素之一是主流平台提供的支持类型。虽然 PWA 通常允许开发出能够在任何平台上运行的应用程序，但不同平台的具体支持范围仍然存在一些限制。
数据来自caniuse.com，采用 CC-BY 4.0 许可协议
iOS 上的 PWA 支持
对于 iOS 设备而言，PWA 的支持还比较有限。尽管“渐进式 Web 应用”（Progressive Web App）这个术语是谷歌最近才提出的，但 PWA 的起源实际上可以追溯到第一代 iPhone。在苹果公司为 iOS 设备提供 SDK 之前，iPhone 上唯一可用的应用就是 Web 应用。而这正是史蒂夫·乔布斯本人坚持的决定。
当然，随着开发者对更统一工作流程的需求日益增长，苹果最终发布了SDK以及App Store。这一演变也伴随着苹果对App Store中应用的用户体验和安全性方面出了名的严格规定。不幸的是，这些规定严重限制了开发者为iOS开发PWA的能力。
然而，从 iOS 11.3 开始，苹果平台开始支持 PWA。但是，它们仍然需要封装在原生代码中，并通过 App Store 分发。这限制了 PWA 的一些优势，例如简化代码库和易于安装。
安卓上的 PWA 支持
Android 对 PWA 的支持更加完善。这主要得益于 Android 的开源模式，它赋予开发者极大的自由度和灵活性，让他们可以随心所欲地编写和分发应用。此外，Android 还允许 PWA 使用一些原生平台功能，例如推送通知，从而使开发者能够在应用中提供更加流畅的原生体验。
浏览器 PWA 支持
虽然现在大多数主流浏览器都支持 PWA，但还没有 100% 的兼容性。
数据来自caniuse.com，采用 CC-BY 4.0 许可协议
以下浏览器选择不支持 PWA：
- 桌面版 Firefox
- Internet Explorer
- Facebook 移动浏览器
此外，Safari浏览器也存在一些限制。虽然它为PWA应用提供了基本支持，但并非所有功能都包含在内。Safari不支持推送通知，因此用户需要手动安装应用才能将其添加到主屏幕。
此外，Safari 的 WebKit 引擎在 2020 年宣布将不再支持许多用于访问原生功能的 API。例如，Web Bluetooth、Web MIDI API、Magnetometer API 和 Web NFC API 等功能都已不再受支持。他们声称此举是出于隐私考虑，但这无疑阻碍了 iOS 上 PWA 的发展。
2021年PWA的现状
渐进式 Web 应用（PWA）本质上是一种不断发展的趋势。因此，主流平台的持续支持和新技术的不断涌现都在推动 PWA 的增长。虽然 PWA 的定义不够精确，难以追踪其确切的市场份额，但根据Chrome 浏览器的统计数据估计，目前类似 PWA 的页面加载量约占 19%。
一项针对电子商务决策者的调查显示，9%的电子商务公司计划在2021年投资渐进式Web应用程序（PWA）。此外，8%的电子商务公司表示他们已经在进行PWA开发，而28%的公司没有在2021年投资PWA的计划。
研究表明，到 2027 年，渐进式 Web 应用市场的财务价值将达到 107.7 亿美元，这意味着从现在到那时，年增长率将超过 30%。
目前PWA的支持情况相当不错，但仍存在一些限制。包括iOS、Mac、Android和PC在内的所有主流平台都提供一定程度的PWA支持。Android的支持最为完善，iOS和Mac的支持则最为有限。苹果对其平台上应用程序的严格控制是PWA在iOS上普及的最大障碍。
开发者和项目所有者在考虑将 PWA 应用于自身应用时，应注意这些局限性。PWA 市场及其平台支持都在稳步增长，因此早期采用者可能会领先于竞争对手。但很难准确预测这种增长需要多长时间。
有趣的是，今年早些时候，Instagram Lite 从 PWA 重构为原生 Android 应用。此次改回原生应用的原因尚不清楚，但有猜测认为Facebook 这样做是为了测试其内部框架 Bloks。
2022 年 PWA 的发展前景如何？
好消息是，PWA 市场正在取得一些显著进步。近期 PWA 领域的一个利好消息是微软和谷歌的合作。微软最近宣布，PWABuilder 将采用谷歌的 Bubblewrap 技术。PWABuilder 是微软的开发工具，旨在简化 PWA 的编写流程；而 Bubblewrap 则帮助开发者将应用打包，以便在 Google Play 应用商店发布。
此次公告同时推出了对新功能的支持，包括原生应用快捷方式和可通过 PWABuilder 获取的高级 Android 功能。谷歌和微软等科技巨头的合作努力，对 PWA 的未来发展前景十分乐观。
2022年及以后还应该使用PWA吗？
答案是肯定的，如果您的产品策略需要快速进入市场并使用单一代码库覆盖多个平台。渐进式 Web 应用 (PWA) 使初创公司能够快速轻松地开发和分发应用，并在资源有限的情况下，最大限度地减少应用发布所需的时间和成本。通过推送通知和应用内横幅广告鼓励新用户再次访问应用并提高用户参与度，PWA 成为实施营销策略的强大工具。
大型企业也可以通过为那些无法使用高性能平台或更倾向于精简、轻量级体验的用户提供价值而受益。PWA 可以作为开发与特定平台绑定的企业软件的一种选择，从而充分利用该平台原生支持的重要功能。
PWA 的其他常见用例包括：应用程序需要支持离线模式，或者需要将旧版 Web 应用程序（例如使用 React 制作的）重新制作成 PWA，与从头开始构建新应用程序（例如使用 Flutter for Web）相比，所需时间最短。
何时不应使用 PWA
虽然 PWA 存在一些缺点，但这些缺点微乎其微，而且大多被其优势所掩盖。PWA 最大的限制在于其在 iOS 上的支持有限，而 iOS 显然占据了移动应用市场相当大的份额。不过，目前 iOS 也得到了一定的支持，而且苹果过去对 PWA 的态度转变表明，他们愿意与时俱进。
另一个可能阻止您使用 PWA 的限制是您的应用无法在 App Store 中发布，但是很容易将其列入 Google Play，并且已经可以在 Microsoft Store 中上线。
在 MobiDev，我们从业务分析阶段开始一个项目，以确定关键产品需求，并帮助业务负责人了解哪些需求可能为业务带来最大价值，以及哪种技术栈适合项目目标。
MobiDev 的渐进式 Web 应用开发
MobiDev 的网络工程团队在网络应用程序开发方面积累了丰富的经验，包括渐进式网络应用程序，我们渴望分享我们遵循的最佳实践：
8项关于PWA开发的建议
- PWA 应该感觉像原生应用——在应用启动时显示启动画面是一个好做法，应用应该有一组不同大小的图标，这些图标将用作主屏幕上的应用徽标，并且应该有一个配置正确的主题。
- 某些浏览器仍然不完全支持 manifest.json，因此您必须回退到 meta 标签，例如在 Safari 或 Microsoft Edge 中指定主题或磁贴颜色。
- 务必始终推广应用安装。应用安装或“添加到主屏幕”功能以及推送通知是能够显著提高转化率和用户复购率的关键功能。
- 如果您的应用需要离线模式支持，或者您只是想使用增强的缓存策略来减少网络流量并缩短页面加载时间，我们建议您查看 Google 的官方库集，该库集专门用于解决这些问题并简化 PWA 开发。
- 每当 PWA 应用的新版本上线时，我们必须通知用户有可用更新。我们可以通过显示自定义的应用内横幅或通知来实现这一点，提示用户更新应用。请注意，ServiceWorker 只有在所有使用旧版本的应用窗口或标签页关闭后才会自动更新。如果我们不显示横幅，用户可能要过一段时间才会注意到更新。
- 正如我们所说，部分用户可能不会立即更新应用，而是会继续使用旧版本。在这种情况下，服务器端拥有向后兼容的 API 就显得至关重要。
- 务必对代码进行全面测试，尤其是应用初始化逻辑。如果应用在初始化过程中崩溃，且尚未建立对即将到来的 ServiceWorker 更新的订阅，则用户的设备可能会一直运行存在缺陷的应用版本，直到手动重新安装为止。建议始终创建一些备用方案，以便在出现未处理的应用错误时自动注销活动的 ServiceWorker——这样，您就可以快速地将修复程序交付给最终用户。
- PWA 应该运行速度很快。您可以使用Lighthouse和其他Chrome 开发者工具测试和调试性能。当然，我们也遵循所有其他适用于常规 Web 应用开发的最佳实践：
- 创建响应式和自适应的 Web 应用程序，使其能够在所有平台上正常运行，无论是移动设备、平板电脑还是台式机。
- 遵循团队中既定的代码风格，或者通过配置 pre-commit git hook 来自行建立代码风格，该 hook 将调用代码检查器和格式化器。
- 尽可能编写严格类型的代码（例如使用 TypeScript）。
- 设计基于组件的应用程序。将用户界面和业务逻辑解耦。创建简单且可重用的组件，以便轻松组合成复杂的用户界面。
- 当然，还要进行代码审查，互相帮助！