适合初学者的渐进式 Web 应用程序：简单的示例和优化

如果您曾经在手机上打开过一个看起来像应用程序的网站，加载速度快，即使在互联网较差的情况下也能工作，甚至可以将其“安装”在主屏幕上，那么您可能在不知情的情况下使用了渐进式网络应用程序。

PWA 是一个首字母缩略词，乍一看很吓人，但其背后的想法简单而强大：将以前仅存在于本机应用程序中的体验带到网络上，而不需要用户从商店下载任何内容。这是网站和应用程序之间的优雅折衷。

本文适合那些刚开始学习的人。我不会让您淹没在 API 和配置中。我将解释它是什么，展示示例并指出当您迈出第一步时真正重要的第一个优化。

用人类语言来说什么是 PWA

本质上，渐进式 Web 应用程序是一个行为类似于应用程序的网站。它像任何页面一样在浏览器中运行，但使用现代功能来提供常规网站所不具备的功能。

三个特征定义了体验。它可以安装在手机主屏幕上，无需通过应用商店。它可以在离线或连接不良的情况下工作，即使在互联网出现故障时也能显示有用的内容。而且它加载速度很快，因为它将自身的一部分存储在设备上，这样您就不必在每次访问时再次下载所有内容。

对于那些刚开始的人来说，他们的论点是：你不需要了解其背后的所有工程来利用这个概念。您需要了解 PWA 为用户提供什么，首先也是最重要的是速度和可靠性。

理解 [PWA2] 的最佳方法是识别示例。一些大型服务正是采用了这种方法来接触设备简陋且互联网不稳定的用户。

新闻、社交媒体和电子商务应用程序使用 [PWA3TM]，因此首次访问变得轻松快捷，无需下载繁重的应用程序。在手机简单且数据昂贵的市场中，这会产生巨大的差异，人们通过浏览器访问它并获得接近本机应用程序的体验。

在巴西，这一点尤其重要。很大一部分人仅通过手机访问互联网，通常数据计划和入门级设备有限。精心制作的 [PWA4 尊重这一现实：更少的下载、更少的数据消耗、更多的访问。对于数字公共服务来说，这可能意味着包含和排除公民之间的区别。

当您开始时，很容易想要优化一切。不要那样做。专注于以最少的努力为您带来最大回报的事情。

请注意，这些优化都不需要高级知识。这些是基础知识。无论谁开始并正确掌握这四点，都已经提供了比大多数网站更好的 [PWA6]。

初学者最常见的错误不是技术性的，而是优先级的。人们对高级功能（通知、复杂的同步、缓存技巧）感到兴奋，却忘记了基础知识：网站需要快速加载并运行良好。

如果需要五秒钟才能打开，那么充满复杂功能的 [PWA7] 就没有意义了。用户在发现精彩功能之前就已经离开了。为初学者进行优化从基本要素开始，而不是令人印象深刻的东西。

另一个常见的错误是认为 [PWA8] 可以解决任何问题。它对于很多情况都很好，但并不适合所有情况。需要深入访问手机硬件的应用程序仍然可以从本机应用程序中受益。了解限制是了解如何使用该工具的一部分。

对于那些刚开始的人来说，在没有测量的情况下进行优化是在黑暗中进行的。有一些简单且免费的方法可以了解您的 [PWA9] 是否走在正确的轨道上，而无需成为指标专家。

第一个问题是关于速度：用户需要等待多长时间才能在屏幕上看到有用的内容？有一些免费工具可以分析页面并给出分数，指出是什么拖累了页面。对于初学者来说，这份报告是一张藏宝图，它用易于理解的语言告诉您首先要解决什么问题。

二是关于实际行为。仅让应用程序在网络良好的新手机上快速加载是不够的。重要的是它在连接不稳定的真实用户的普通设备上的表现如何。对于任何刚刚起步的人来说，在最坏的情况下进行测试，而不是在理想的环境中进行测试，是最有价值的教训之一。

第三是看人是否回来。好的 [PWA10 并不是在第一次访问时给人留下深刻的印象，而是让用户再次访问的原因。即使没有复杂的工具，您也可以监控再次使用它的人数是否在增长。这是最诚实的迹象，表明您正在优化重要的内容，而不仅仅是可见的内容。无法转化为用户回报的速度是浪费的优化。

即使对于初学者来说，也存在将事情复杂化以显得有能力的诱惑。抵抗。一个精心制作的[PWA11]的最大优点是技术的隐形性，用户不会认为“多么精心制作的PWA”，他只是毫无摩擦地使用它。

仅当问题真正需要时才应考虑复杂性。从简单开始并不是业余行为；而是从简单开始。这是成熟。许多项目的失败并不是因为缺乏资源，而是因为在掌握基础知识之前有太多的技术野心。

对于领导或雇用的人来说，同样的原则也适用。警惕任何想从最复杂的开始的人。一个好的开始是以最小的复杂性快速提供价值，并从真实用户那里学到的东西中成长。

渐进式 Web 应用程序是 Web 的简单性和应用程序体验之间的桥梁。对于初学者来说，路径不是掌握每个高级功能，而是理解概念并掌握正确的基础知识：速度、可靠性以及对用户及其设备的尊重。

从简单开始，衡量实际使用情况，仅在必要时增加复杂性。这是可持续的学习和建设方式。

如果您刚刚开始使用 PWA，这里还有其他关于 Web 性能和开发的文章，当您准备好时，它们会更深入地探讨每一点。