2022 年渐进式 Web 应用的终极指南——包含 50 个 PWA 示例

有兴趣构建渐进式 Web 应用程序吗？ 本指南将告诉你所有你需要知道的——以及市场上最好的 PWA 的 50 个示例！

多年来，我们一直在不停地宣扬：你需要一个原生应用程序。 这是有充分理由的，我们仍然坚持这一点。

我们的平台 News、Canvas 和 Canvas for eCommerce 已帮助我们的客户极大地改善移动用户体验、增加流量、建立更多忠诚度并增加收入。 原生应用非常适合与您的核心用户群建立更深层次的关系，并且对于任何重视忠诚度、参与度和保留率的品牌来说都是必不可少的。

然而，没有什么是完美的。 原生应用不能替代出色的 Web 体验。

本机应用程序只与那些安装了应用程序的人相关。 对于第一次在网络上查看您的新访问者、偶尔来访但还没有足够投入安装应用程序的临时用户或使用桌面的客户，它们无济于事。

这些潜在客户对于成功也绝对至关重要。 第一印象很重要，原生应用程序总是在渠道的早期阶段有所帮助。 您需要为整个旅程提供快速、流畅的体验。 如何？

输入渐进式 Web 应用程序 (PWA)。 如果你有一个网站，并且它对你或你的企业很重要——你需要一个 PWA。

在本文中，我们将定义渐进式 Web 应用程序，讨论它们最重要的好处，并分享 50 个互联网上最好的 PWA 示例。

我们将总结一些关于如何构建 PWA 的建议，以及它们如何与原生移动应用程序一起工作以创建一个成功的移动 UX 组合。 让我们开始吧。在本文结束时，您将了解开始您的渐进式 Web 应用程序项目所需了解的一切。

我们将从基本问题开始——什么是 PWA？

什么是渐进式 Web 应用程序？ 让我们定义一个 PWA

渐进式 Web 应用程序将 Web 的优点与以前只能在本机应用程序上实现的功能相结合。

PWA 像传统网站一样存在于浏览器中，并且完全连接到网络的链接和搜索引擎索引基础设施。 就像原生应用程序一样，虽然它们可以从主屏幕图标启动，向用户的设备发送推送通知，瞬间加载，并且可以离线工作。

渐进式网络应用程序与您的网站并不分离。 它们是对您网站的增强，使其与当前的最佳实践保持同步，并利用服务工作者等尖端网络技术在移动浏览器中提供类似应用程序的体验。

也许你仍然不确定它们到底是什么。

这是可以理解的，因为该术语被广泛使用，但可靠的定义却难以捉摸。 让我们看看这个词的历史来澄清事情。

渐进式 Web 应用程序的原始定义

“Progressive Web App”一词是由 Francis Berriman 和 Google 工程师 Alex Russell 在 2015 年创造的。 他们一直在观察一类新的 Web 应用程序的出现，并在晚餐时决定对它们进行定义和命名。

他们提出了以下标准：

• 响应式：适合任何外形尺寸
• 独立于连接：通过 Service Worker 逐步增强，让他们离线工作
• App-like-interactions：采用 Shell + Content 应用程序模型来创建应用程序导航和交互
• 新鲜：由于 Service Worker 更新过程，透明地始终保持最新状态
• 安全：通过 TLS（Service Worker 要求）提供服务，以防止窥探
• 可发现：由于 W3C Manifests 和 Service Worker 注册范围允许搜索引擎找到它们，因此可以识别为“应用程序”
• Re-engageable ：可以访问操作系统的重新参与 UI； 例如推送通知
• 可安装：通过浏览器提供的提示到主屏幕，允许用户“保留”他们认为最有用的应用程序，而无需使用应用程序商店的麻烦
• 可链接：意味着它们是零摩擦、零安装且易于共享的。 URL 的社会力量很重要。

您可以看到这些标准如何满足定义的“网络应用程序”部分。

多年来，像我们和其他公司这样的公司创建了允许企业使用Web 技术创建应用程序体验的平台。 直到今天，这都很有效，但需要权衡取舍。 为了创建出色的原生应用体验，您将失去 Web 的可发现性和可链接性。

像服务工作者（我们稍后会介绍）这样的新 Web 技术出现并改变了一些事情——允许开发人员构建能够充分利用原生应用 UX 的体验并将其放入浏览器中，从而保留 Web 的所有优势。

您不再需要接受平庸的移动 Web UX，同时推动人们下载您的本地应用程序以获得真正的交易。 您可以通过 App Store和网络为在线与您的品牌互动的每个人提供出色的移动体验。

这就是 Berriman 和 Russell 观察到的。 他们没有发明任何东西，他们注意到网络的变化并将其命名。

“进步”部分呢？

在这种情况下，这意味着应用程序是使用渐进增强构建的。 这是一种设计技术，专注于构建适用于所有人的“基线”体验，但在更先进的设备上进行升级和增强。 渐进式 Web 应用程序的体验不一定对所有用户都相同，它会根据他们设备的功能以及他们授予的权限进行调整。

那么Berriman 和Russell 的定义就足够了吗？ 问题是很少有 PWA 真正满足所有这些标准。 它们更像是一个愿望清单，或者一个目标，或者一个典型案例。

Google 对渐进式 Web 应用的定义

一段时间以来，微软一直对 PWA 充满热情。 Apple 取得了一些令人信服的结果，现在（大部分）加入了。不过，在大型科技公司中，谷歌从一开始就真正支持 PWA。

也就是说，谷歌自己似乎并不能 100% 确定这个定义。 早在 2015 年，他们就列出了 10 个特征，然后将其减少到 6 个，然后又添加了 3 个新特征。

目前，谷歌对渐进式网络应用的定义包括三个支柱。 在他们的介绍页面中，他们声明 PWA 是：

“经过精心设计的 Web 应用程序功能强大、可靠且可安装。 这三个支柱将它们转变为一种感觉就像是特定于平台的应用程序的体验”

这更有帮助，但没有那么有用，因为它是如此广泛。 不过，它暗示了关键点，即 PWA 正在将传统上仅与原生平台相关联的体验带入网络。

渐进式 Web 应用程序的技术定义

我们可以定义 PWA 的第三种方法是指定纯技术标准，而不是 UX 标准。

这就是 Web 开发人员和作家 Jeremy Keith 在他 2017 年的博客文章什么是渐进式 Web 应用程序中所尝试的。 .

Keith 认为 PWA 定义的混淆是没有根据的，基本上必须满足三个标准：

1. HTTPS—— PWA 必须在使用 HTTPS 的安全服务器上运行。 Service Worker 对他们的潜力至关重要，只有在你有 HTTPS 的情况下才能使用它们。
2. Service Worker——本质上是一个与主浏览器“线程”分开运行的 JavaScript 文件，允许开发人员控制应用程序如何处理网络请求和缓存。 这有助于推动 PWA 令人印象深刻的速度和离线功能。
3. Web App Manifest –向浏览器提供应用程序描述的 JSON 文件，包括名称、作者、图标、描述和运行资源等详细信息。 这确保了应用程序是可发现的。

Keith 继续指出，这是一个最小的、基本的定义。 PWA 的能力远不止于此，但它们必须满足这三个技术标准才能晋级。

因此，我们已经看到了最初的观察/渴望定义、Google 的 UX 驱动定义和极简技术定义。 我们可以推测什么？ 尽管可能仍然存在一些歧义，但我们现在对渐进式 Web 应用程序是什么有了一个很好的了解。

PWA 是一个现代、安全、快速加载的网站，它使用尖端的 Web 技术来实现这些特征。 与传统网站不同，它的性能和用户感觉就像一个原生应用程序——并在此过程中“避开”浏览器选项卡。

正如亚历克斯·罗素所说：

“这些应用程序不是通过商店打包和部署的，它们只是吸收了所有正确维生素的网站”

这是一个很好的表达方式。 PWA 是最新一代的网络。 它们是能够利用现代浏览器技术潜力的网络应用程序。 通过将您自己的网站变成 PWA，您可以为其提供最佳运行所需的“维生素”。

现在，我们将继续讨论构建渐进式 Web 应用程序的好处，然后再查看 50 个 PWA 示例来激发您的项目。

渐进式 Web 应用程序的好处

我们之前说过，如果你有一个网站，并且它以任何方式与你的业务成功相关——你需要建立一个 PWA。

这似乎是一个大胆的声明，但这是事实。 为什么？

简而言之，如果不构建 PWA，您可能会将客户、收入和增长留在桌面上。 正如 Google 网络团队的 Pete LePage 和 Sam Richard 所说：

“数字不会说谎！ 推出 Progressive Web Apps 的公司取得了令人瞩目的成果。 例如，Twitter 的每个会话页面增加了 65%，推​​文增加了 75%，跳出率降低了 20%，同时将其应用程序的大小减少了 97% 以上。 改用 PWA 后，Nikkei 的自然流量增加了 2.3 倍，订阅量增加了 58%，每日活跃用户增加了 49%。 Hulu 用 Progressive Web App 取代了他们特定平台的桌面体验，回访次数增加了 27%”

这只是表面问题。

让我们来看看其他知名品牌作为推出 PWA 的直接后果所取得的成果。

• 阿里巴巴将移动网络转化率提高了 76%，iOS 上的活跃用户增加了 14%，Android 上的活跃用户增加了 30%
• Debenhams的移动收入增长了 40%，转化率增长了 20%，在线增长高于市场
• Pinterest的总花费时间增加了 40%，用户产生的广告收入增加了 44%，核心参与度增加了 60%
• 福布斯的每位用户会话增加了 43%，广告可见度提高了 20%，参与度提高了 100%
• BMW销售网站的点击率提高了 30%，加载时间提高了 4 倍，移动用户增长了 50%，自然流量增加了 49%
• MakeMyTrip将页面速度提高了 38%，转化率提高了两倍，购物者会话增加了 160%
• AliExpress将新用户的转化率提高了 104%（iOS 上增加了 82%），每次会话花费的时间增加了 74%，每次会话访问的页面增加了 2 倍
• Housing.com的转化率提高了 38%，平均会话时间延长了 10%，跳出率降低了 40%，页面加载时间总体加快了 30%
• Wego的广告点击率增加了两倍，访问者增加了 26%，总体转化次数增加了 95%。 在 iOS 上，他们获得了令人印象深刻的 50% 的转化率提升和 35% 的会话持续时间
• Treebo的转化率同比增长了 4 倍。 重复用户的转化率提高了 3 倍。
• Tinder将加载时间从 11.91 秒减半至 4.69 秒，并且 PWA 比其原生应用程序小 90%，从而全面提升了参与度

所有这些惊人的结果是怎么可能的？ 很多原因归结为 PWA 提供了更好的用户体验，并由此产生了巨大的业务成果。

不仅如此。 让我们更详细地了解一些渐进式 Web 应用程序的主要优势，从最重要的优势开始——速度。

PWA 快如闪电

现代消费者期望即时加载。 如果某些东西没有立即加载，许多人会失去兴趣，也许是永久性的。 这既不言自明，又得到大量数据的支持：

• 近 50% 的用户表示，他们在移动设备上的最大挫败感是等待缓慢的页面加载（来源）
• 在 2 秒内加载的页面有 9% 的跳出率，需要 5 秒的页面有 38% 的跳出率（来源）
• “转化率急剧下降”与平均加载时间从 1 秒增加到 4 秒有关（来源）
• 加载时间每改进 1 秒，转化率就会提高 2%，而 100 毫秒的改进会产生高达 1% 的增量收入（来源）

本质上，您的网站加载速度越快越好。 如果你让你的客户/读者/用户等待，那么他们中的相当一部分会反弹而不给你他们的钱。

提高站点速度可以全面推动更好的结果。 这里的所有都是它的。

那么 PWA 如何帮助您实现这一目标呢？ 渐进式网络应用程序很快。 真的很快。

例如，Pinterest 设法将他们的“交互时间”加载时间从缓慢的 23 秒缩短到 5.6 秒。 这平均是通过慢速 3G 连接的 Android 硬件。 这对关键指标产生了可喜的连锁反应。

一点也不差。 不过，Pinterest 的结果并不罕见。

流媒体平台 ZEE5 通过构建 PWA 将站点速度提高了两倍并将缓冲时间减半。 Uber 的 PWA 在2G 网络上加载时间不到 3 秒。 福布斯通过其 PWA 将移动加载时间从之前的移动网站上的 6.5 秒缩短到仅 2.5 秒。

当您构建一个良好的、设计良好的渐进式 Web 应用程序时，速度的提高是有保证的。

为什么渐进式 Web 应用程序如此之快？

多亏了最重要的服务人员，PWA 如此之快。 正如 Jason Grigsby 在他的优秀著作 Progressive Web Apps 中所说：

“渐进式 Web 应用程序使用服务人员来提供异常快速的体验。 Service Worker 允许开发人员明确定义浏览器应该在本地缓存中存储哪些文件，以及在什么情况下浏览器应该检查缓存文件的更新。 存储在本地缓存中的文件可以比从网络中检索的文件更快地访问”

格里格斯比继续解释说：

“当有人从渐进式 Web 应用程序请求新页面时，呈现该页面所需的大部分文件已经存储在本地设备上。 这意味着页面几乎可以立即加载，因为浏览器需要下载的只是该页面所需的增量信息”

本机应用程序的传统优势之一是它们可以快如闪电。 他们以类似的方式实现这一点——运行应用程序所需的所有文件都在安装时下载，它只需要检索新数据。 服务工作者允许渐进式网络应用程序为网络带来类似的令人印象深刻的性能！

PWA 在 Web 上提供类似应用程序的 UX

我们已经讨论过的速度显然是用户体验的重要组成部分。 不过，还有其他重要因素，PWA 在这里也有帮助。

原生移动应用长期以来一直是移动 UX 的黄金标准。 它们仍然是（至少在某些方面），但 PWA 现在可以直接从浏览器匹配它们的大部分感觉和功能。

例如，PWA 可以：

• 离线工作或在网络条件差的情况下工作（下一个更多内容）
• 安装在用户的设备上并通过主屏幕图标访问，如原生应用程序
• 将推送通知发送到设备的锁定屏幕（不幸的是仅在 Android 上）
• 旨在通过模仿原生应用程序的导航结构提供全屏、“身临其境”的体验
• 像原生应用一样使用动画
• 开发用于访问设备的硬件，如相机和 GPS

早期的移动网络相当粗糙。 桌面浏览器的旧范式被“固定在”智能手机上，它并不真正适合。 响应式设计时代显着改善了这一点，但总是缺少一些东西。

原生应用程序明确地是为智能手机构建的。 他们总是更好地适应设备的体验。 虽然 PWA 模糊了这条线，但在经验方面的区别可能很难确定。

例如——您是否使用过 Instagram Lite、Google Maps Go 或 Twitter Lite？

您可以在 Google Play 商店下载它们并查看它们 - 看看它们与任何其他本地应用程序的感觉如何。

假设这些是其主要原生应用程序的更轻、更精简的版本，你会被原谅。 正如您可能已经猜到的那样——它们是渐进式网络应用程序。

这显示了 PWA 在重建我们都知道和喜爱的原生应用程序体验方面的潜力。 当我们稍后进入示例时，您会明白我们的意思！

注意：您可能已经注意到这些 PWA 已在 Google Play 商店中上线。 Google 在 2019 年初向 PWA 开放了 Play 商店！ 这表明他们对 PWA 作为真正的跨平台应用程序的未来充满信心。 你必须跳过几个圈才能让你的 PWA 在那里，但这当然是可能的。 截至目前，Apple 没有关于这是否会在 iOS App Store 上实现的信息。

PWA 是可靠的

我们都曾尝试在不稳定的移动连接上使用网站或 Web 应用程序。 这不好玩。

再次感谢服务人员，他们专门定义了浏览器应该在本地缓存的内容——即使用户连接不佳，也可以构建 PWA 以提供快速、完整的体验。

这也可以更进一步。 通过“预缓存”，即在第一次访问时下载并存储整个应用程序，PWA 也可以完全离线运行！

这一点非常重要，考虑到有多少人仍然生活在农村和服务差的地区，以及未来几年首次上网的大约十亿人——其中许多人将无法享受完美的连接。

PWA 安全、高效且适应性强

为了让服务人员做他们的事情，您的网站必须使用 HTTPS 完全安全。

希望它已经做到了，但如果不构建 PWA 将迫使您完成所有必要的工作，以使您的网站 100% 安全。

PWA 也非常有效。 阻止人们下载本地移动应用程序的一个关键因素是他们设备上的可用存储空间。 正如 The PWA Book 的作者所说：

“他们将他们的移动设备，如相机、电脑、记事本、助手，以及——最重要的——视为记忆的宝库。 如果下载一个应用程序意味着他们必须牺牲珍贵的照片或信息，他们会三思而后行，然后点击是。”

PWA 不会强迫人们做出如此艰难的决定。 它们比原生应用程序轻得多，安装过程中的摩擦更小（只需轻按一个按钮，就会在主屏幕上创建一个快捷方式）。 PWA 确实在设备上占用了一点空间，但相比之下可以忽略不计。

推动这种效率的服务工作者还负责减少服务器负载，并将在紧张时期性能低迷和崩溃的风险降至最低。

渐进式 Web 应用程序的适应性也很强。 由于它们基于 Web，因此它们可以比原生移动应用程序更容易地维护和更新。

当您想要更改或更新某些内容时，您可以快速移动，无需与 App Store 看门人打交道，无需用户手动更新，或与专业的原生应用程序开发人员签约。

就像今天更新您的网站一样简单 - 更新（部署到服务器）几乎可以立即提供给用户。

PWA 让您通过推送通知吸引用户

多年来，我们一直在谈论推送通知的强大功能。 它们是在移动设备上与观众互动和交流的最佳方式——没有之一。 您可以使用它们来更新用户，将他们推回应用程序，宣传优惠和产品，并且通常在他们忙碌的生活中保持首要地位。

以下是不同企业如何使用推送通知的一些示例：

• 新闻出版商

“突发新闻，X 和 Y 刚刚发生！”

推送通知非常适合数字出版商，让他们能够将流量吸引回他们的头条新闻，并通过时间敏感的突发新闻提醒用户。

• 电子商务商店

“特价/您放弃购物车/您的物品已发货”

Push 非常适合电子商务。 购物应用程序会定期发送通知以提醒用户注意优惠和新产品，让他们及时了解交付流程，并提供特殊的仅限应用程序的优惠券代码。

• 社交平台和社区

“你的朋友刚刚给你发了一条消息/好友请求/回复了你”

我们之前可能都经历过来自社交平台的推送消息。 它们是社交应用程序用来让您回到他们的平台、与其他用户互动和互动的秘密成分。

这些是一些用例。 但真正的推送通知对于任何企业来说都是一个巨大的推动力。 它们曾经是（现在仍然是）构建原生应用程序的最强有力的理由之一。

再次感谢我们的服务人员朋友——您不再需要本机应用程序来发送推送通知。 你可以从你的网站发送它们（如果你把它变成 PWA）。

推送通知需要正确使用而不是滥用，但它们可以带来很多好处，是构建 PWA 的一大好处。

例如，在构建 PWA 后，兰蔻发现 8% 的消费者点击推送通知进行购买，并通过推送通知将回收的购物车的转化率提高了 12%。

另一家是沙特阿拉伯领先的电子产品零售商 eXtra Electronics。 eXtra 从通过网络推送到达的用户那里获得的销售额增加了 100%，并注意到选择推送通知的用户返回的频率增加了 4 倍，并且在网站上花费的时间增加了 2 倍。 首席业务发展官 Mujeed Hazzaa 表示：

“推送通知是我们移动参与策略的重要组成部分。 这是与我们的客户沟通的一种更加个性化的方式。 这对我们的底线非常有价值。”

当您将您的网站变成一个渐进式网络应用程序时，您也可以获得强大的业务成果。 有一个很大的警告 - 您只能在 Android 上使用它们。 iOS 不支持它们，任何人都可以猜测它是否会支持。 如果推送通知对您很重要并且您想将它们发送给所有用户，那么您将必须构建本地移动应用程序。

渐进式 Web 应用程序将发展您的业务

我们已经了解了将您的网站转变为渐进式网络应用程序的一些最重要的好处。

最重要的是，它们对任何有网站的企业都是有意义的。 它们允许您升级整个 Web UX，并提供快速、现代的体验，几乎可以保证改善关键指标。

构建 PWA 的缺点是什么？

真的没有，除了你需要投入的时间和金钱来建造一个。 即便如此，PWA 还是相对负担得起的，并且很可能（超过）随着时间的推移为自己付出代价——特别是如果您的网站通过广告、电子商务或会员资格与任何类型的收入挂钩。

还需要说服力吗？

让我们通过一些示例将所有内容联系在一起。 我们将重点介绍互联网上 50 个最好的渐进式 Web 应用程序示例，并直接向您展示我们迄今为止一直在讨论的内容。

Progressive Web App 示例：2020 年互联网上 50 个最佳 PWA

如果你想开发一个令人印象深刻的 PWA，第一步是查看成功的渐进式 Web 应用程序示例以获取灵感。

作为我们激励您的使命的一部分，我们现在收集了 50 个最佳 PWA 的模型示例。 您可以跳到与您自己的业务最相关的部分，浏览列表直到有东西引起您的注意，或者通读所有渐进式 Web 应用程序示例以获得良好的概览！

让我们进入我们的 50 个最佳 PWA 示例。

电子商务和零售

星巴克

作为世界上最受欢迎的咖啡连锁店之一，星巴克开发了 PWA，通过提供忠诚度计划和更简单的订购流程来提高客户参与度。

该应用程序旨在取代其旧的移动应用程序，以更好地保持其参与度，无论使用何种设备。

用户可以首先查看其奖励部分，客户可以在通过智能手机订购时兑换他们的免费食物和饮料、生日礼物、补充和支付选项。

应用程序页面的其余部分提供自定义订单、商店可用性、交付详细信息和应用程序菜单。

就像从咖啡师那里订购一样，订购您最喜欢的饮料可以让您自定义其大小、加载项和拍摄选项。 星巴克还为那些监测饮食的人增加了营养信息、成分和过敏原部分。

我们喜欢这个电子商务 PWA 的地方：

• 即使在网络连接较弱的情况下也能正常工作
• 与 Spotify、Lyft 和 Ford 等其他品牌的其他平台和服务完全集成
• 无缝的移动支付和结账流程
• 极其人性化的设计

朱米亚

阿里巴巴之于中国，Jumia 之于非洲。 这个成功的在线市场于 2012 年在尼日利亚首次推出，然后迅速接管了非洲的电子商务行业。

2016 年，它推出了 PWA，以应对撒哈拉以南地区不稳定的互联网连接。 借助 PWA，它能够依靠具有数据上限的 2G 网络占据很大一部分市场。

引入 PWA 是在不消耗大量数据带宽的情况下提供类似应用程序的用户体验的完美解决方案。

结果？ 据谷歌称，该公司的转化率提高了 33%，用户增长了 12 倍（与原生应用相比）。 此外，它还大大降低了跳出率和用户设备存储需求。

我们喜欢这个电子商务 PWA 的地方：

• 可靠的离线访问
• 快速搜索能力
• 快速加载过程
• 简易安装

OLX.in

对于在线市场的 PWA，请相信印度分类广告公司 OLX.in。 凭借其从房地产到时尚的强大类别，卖家和买家与公司的 PWA 更匹配。

用户在搜索特定产品或从卖家那里获得超值优惠时，可以很容易地注意到该应用程序的易用性。

OLX 透露，自 Google 报告的过渡到 PWA 以来，它的广告点击率更高，跳出率大幅下降了 80%。

我们喜欢这个电子商务 PWA 的地方：

• 即使在离线模式下也可以推送通知
• 为卖家打造的简易相机集成功能
• 搜索历史功能

Flipkart

印度电子商务领域的另一个竞争对手是 Flipkart 继续通过其 PWA 重新定义在线购物体验。

当用户向下滚动浏览应用程序时，会显示产品类别、有限优惠、畅销书和折扣，目的是吸引客户浏览并在应用程序上花费更多时间。

Flipkart 的 PWA 于 2015 年通过 Flipkart Lite 开始。 即使大多数地区的互联网连接断断续续，该公司也希望让印度人更容易购物。

我们喜欢这个电子商务 PWA 的地方：

• 最新消息和更新的推送通知是一致的
• 简化在线购买流程
• 搜索能力准确

纯公式

意识到保健品市场比以往任何时候都更具竞争力，美国的 Pure Formulas 在推出自己的 PWA 时被认为是该行业的先驱。

在发现其网站和移动应用程序由于结帐过程缓慢而遭受非常高的跳出率后，该公司开发了一个 PWA，使他们彻底扭转了局面。

它报告了更高的转化率和平均订单价值（AOV）的增加。

我们喜欢这个电子商务 PWA 的地方：

• 非常方便的结帐流程
• 极简设计
• 非常轻的设备存储要求
• 高度安全的交易

速卖通

凭借高度响应的 PWA，速卖通被认为是当今 B2C 交易中最受欢迎的应用程序之一。

由于公司产品类别的广泛覆盖，用户可以浏览数以千计的选项，而不会使用 PWA 减慢页面加载速度。

自推出以来，全球速卖通宣布，由于其 PWA，它经历了更好的重新参与和转换统计。

我们喜欢这个电子商务 PWA 的地方：

• 轻松的产品导航
• 更快的加载时间
• 用户友好的布局

阿里巴巴

谈到阿里巴巴 PWA 的成功，马云的阿里巴巴集团无需再多介绍。 B2B 电子商务应用程序是任何 PWA 的理想模型：快速、响应迅速、轻巧且非常吸引人。

阿里巴巴在其移动网络和移动应用程序发布方面取得了成功。 然而，它需要通过提高参与度来垄断很大一部分市场。 该公司的 PWA 是解决此问题的完美解决方案。

据谷歌称，它报告的总转化次数增加了 76%。

我们喜欢这个电子商务 PWA 的地方：

• 轻松的产品导航
• 与网站的工具（如 Feed、Messenger 和我的阿里巴巴帐户）集成
• 更快的加载时间

目标

为了不被竞争对手超越，美国第八大零售连锁店 Target 迅速对其客户分析研究采取了行动。 2015 年，它发现其客户在他们的移动设备上开始他们的旅程，然后使用他们的计算机进行购买。

管理层考虑引入 PWA，从那时起，其应用程序用户数量大幅增加，在线交易显着改善，而不会疏远不同设备上的用户。

我们喜欢这个电子商务 PWA 的地方：

• 轻松添加到购物车选项
• 快速加载图像，无论大小

沃尔玛

对于无缝的应用体验，沃尔玛的 PWA 正好满足了应用开发者的长长清单。 凭借数千种产品，这家零售巨头能够为每笔交易整合在线购买和取货/送货选择。

它的地理跟踪功能可以监控用户所在区域的畅销商品，这使该应用程序能够根据此类列表提供推荐。

最后，它对推送通知的有效使用使公司能够让其忠实的粉丝群了解超值优惠和新发现。

我们喜欢这个电子商务 PWA 的地方：

• 反馈部分
• 地理追踪功能
• 反应灵敏的界面
• 不稳定网络上的无缝性能

梅西百货

高端零售品牌 Macy's 在推出 PWA 时有一个目标：为每月数百万的访客提供最佳体验。

认识到其应用程序用户的增长，该公司的 PWA 是对其消费者工具的一个受欢迎的补充，可以让其购物者随时了解商店货架上的新产品。

我们喜欢这个电子商务 PWA 的地方：

• 可靠的商店查找工具
• 有组织的产品布局

兰蔻

法国奢侈化妆品品牌兰蔻在其在线销售中遇到了障碍：移动用户增加，但转化率下滑。

为了理解这个问题，该公司调查了客户的行为，发现他们在移动应用上的用户体验很糟糕。

该品牌改用 PWA 以减少加载时间并使应用程序易于访问。 据谷歌称，推送通知贡献了 12% 的转化率，移动会话数飙升至 51%。

我们喜欢这个电子商务 PWA 的地方：

• 快速搜索结果
• 轻松导航

消息

金融时报

The Financial Times PWA is considered as one of the best PWAs in the news industry. Covering business and global markets, the app takes a similar look and feel of the paper with its traditional salmon-colored background.

The publication is one of the first news sites to abandon its native app and transition to a PWA. It works well even on slow networks, making news easily accessible for business people on the go.

What we like about this News Publisher PWA:

• Reliable offline
• Very fast loading time
• Real-time updates on content
• Seamless video content experience

Infobae

This Buenos Aires-based news website has proven to be successful in the PWA scene thanks to its Spanish readers. According to Google, the Latin American audience contributed to three times more page views compared to its old mobile site, and spent more sessions on the app as well.

Infobae switched from its mobile site to PWA in 2017 to improve the speed of access among its mobile users. This was influenced by the huge drop in session duration (3 minutes on mobile compared to 27 minutes on desktop).

What we like about this news publisher PWA:

• Very fast loading time
• High-quality visuals loading seamlessly
• 轻松导航

Nau.ch

One of Switzerland's leading news websites became extremely popular when it began flashing content in public areas such as terminals and petrol stations.

Nau (an abbreviation for “new”) was founded in 2007 with the goal of prominently displaying news in public transport to reach millions of commuters on their daily route.

To improve its reach, the company launched its PWA and has achieved 400 times more installations than its old mobile site in the first two days.

What we like about this news publisher PWA:

• Impressive user interface
• 轻松导航
• Content loads much faster relative to other news-related PWAs

Nikkei

Regarded as the world's largest financial newspaper (more than 3 million in daily circulation), Nikkei launched its PWA in 2017 with the goal of reducing load time, improve reader interaction and boost engagement.

Realizing that their website was not mobile-friendly (even taking more than 20 seconds to be fully interactive), the company assembled a team of five front-end engineers who worked on launching a PWA.

The result was truly impressive: improved loading speed, higher interactivity as well as better user experience with offline support according to Google.

What we like about this news publisher PWA:

• Prefetch feature (instant page navigation)
• Preloaded key requests
• Optimized JavaScript bundles
• 优化图像
• Enabled HTTP caching

The Washington Post

As a global authoritative news organization, The Washington Post has released one of the most responsive PWAs to reach out to a wider audience on mobile.

Launched in March 2016, the paper's goal is to provide “frictionless, uninterrupted reading.” This comes after its readers expressed their concerns over slow load times on its old mobile app.

With more than 1,000 articles published daily, they have announced that an 88% improvement in load times was initially observed. This has contributed to an increase in retention rate and longer readership according to Google.

What we like about this news publisher PWA:

• 快速加载时间
• Real-time live updates
• Same look and feel as the website

中等的

With social journalism becoming a necessity for readers and publishers alike, Medium has made a mark in the online publishing industry with its 120 million readers.

Medium's initial goal in 2012 was to reinvent the blogging platform through small stories that matter to any type of audience.

Now that it has grown into subscription-based service, its loyal users can follow exclusive content and audio narrations through its PWA even when working offline.

What we like about this news publisher PWA:

• 响应式
• Seamless functionality even on an unstable connection

Wired

When tech publisher Wired launched its PWA in 2017, its main objective was to increase its app's page speed and reach out to its 11 million users.

And true enough, it did. Not only did it result in higher readership but also more impressions per session, leading other Conde Nast publications to follow suit through what its chief of technology refers to as Alien Web Apps (AWA).

What we like about this news publisher PWA:

• 快速加载时间
• Highly responsive
• Reliable background caching

Forbes

With almost a 50% lift in sessions, triple the rise in scroll depth and 100% boost in engagements according to Google, Forbes has definitely reaped the benefits of launching its fully functional PWA in 2017.

Its Chief Product Officer, Lewis Dvorkin, wanted a no-friction experience for its users to have content served to their devices the way they want.

In addition, Dvorkin states that the more people stay longer on their app, the more they view ads, thanks to increased personalization that yields better engagement.

What we like about this news publisher PWA:

• Stunning visual content
• Fast loading times
• Unique number of readers infographic

The Guardian

To make its online content more accessible, UK's leading news and media outlet, The Guardian, launched its PWA in 2017.

The app features high-quality images, interactive multimedia, and thousands of new content without compromising loading time and user experience.

The company also created a US-based innovation team called The Guardian Mobile Innovation Lab, which operated from 2015 to 2018, which explored mobile tools and chat apps to improve user experience.

What we like about this news publisher PWA:

• Customizable sections
• News alert feature
• 离线访问

Sports Mole

Sports fans – football, F1, tennis, rugby, cricket, golf and even snooker – are able to enjoy Sports Mole's website features right in their own devices through the site's PWA.

Video clips, real-time scores and game schedules are just some of the exciting features in the PWA.

The result of this move led to higher readership rate and increased session time on the app.

What we like about this news publisher PWA:

• 搜索功能
• Seamless video playback
• 实时更新
• No lag on page transitions

The Weather Channel

Since the 1980s, The Weather Channel has been a trusted companion by travelers and households when it comes to providing an average of 40 billion daily weather forecasts.

While its previous native app was used by half of its total users through mobile web, the company found out that there are still users who don't enjoy reliable connections or are not equipped with advanced smartphones.

Through its PWA, The Weather Channel is able to cater to millions of its global users in 62 languages. Google reports that it has improved its page load time by 80% through the app.

What we like about this news publisher PWA:

• 搜索功能
• Multiple language availability
• 推送通知

MyNet

Offering a wide range of content from news to sports, travel to education, and weather to finance, MyNet is one of Turkey's largest web portals.

Its old mobile site was plagued with complaints, most especially very slow loading speed. This led the company to develop a PWA to deliver fast and a highly engaging website.

Google reports that introducing PWA to MyNet's readers influenced a 15% rise in average views per session and a 23% drop in bounce rate.

What we like about this news publisher PWA:

• 实时更新
• 搜索功能

目录

科帕

Kopa 以前称为 PadPiper，是一个提供家具齐全的公寓和租房者的市场。 它为租房者和出租房东提供验证，因此匹配他们更加安全。

PadPiper 最初推出 PWA 是为了帮助学生在学年或开始实习后找到合适的住房。 它还考虑利用这个机会联系学生并找出谁在他们附近工作，以便更轻松地匹配室友。

我们喜欢这个目录 PWA 的地方：

• 快速搜索结果
• 出租托管功能
• 极简设计

伦蒂奥

这个相机和家用电器租赁市场是临时需要此类物品的人的解决方案。

用户在线下订单并等待商品在同一天发货。 租期结束后，用户要么必须退回物品，要么选择购买。

Rentio 的 PWA（日语或英语）提供易于导航的界面、快速的搜索结果、大量的类别和快速的响应时间。

我们喜欢这个目录 PWA 的地方：

• 搜索功能
• 快速交易流程
• 方便的导航

乔皮

作为一个开发者招聘平台，Joppy 迎合了寻找人才的公司和一些技术工作机会的最佳申请人。

该平台专注于将申请人的偏好与招聘人员设定的要求相匹配。 但与其他在线工作委员会不同，求职者可以将他们的个人资料设置为匿名，这样就没有人可以用不请自来的建议来打扰他们。

Joppy 的 PWA 显然是为招聘人员和申请人（主要在巴塞罗那）设计的，以使申请过程更加简化。

我们喜欢这个目录 PWA 的地方：

• 快速响应时间
• 快速匹配过程

OpenRent

如果没有合适的在线工具，寻找英国租赁房地产市场可能会令人头疼。 借助 OpenRent 的 PWA，租户和房东可以方便地搜索合适的房产。

PWA 提供快速响应和实时更新。 这对于该网站至关重要，因为 OpenRent 会在列表被允许后立即删除它们，以避免让潜在租户感到沮丧的幽灵广告。

我们喜欢这个目录 PWA 的地方：

• 结果过滤功能
• 轻松添加属性
• 快速响应时间

汽车销售

对于 PWA 上的在线汽车市场，Carsales 是澳大利亚购车者最受欢迎的目的地之一，为其用户提供了很多便利。

买家可以根据车身类型、品牌、价格、特价搜索汽车。 另一方面，卖家可以要求对他们的汽车进行评估，其余的由 Carsales 负责。

PWA 还通过有关汽车保养的评论、建议和建议提供专家提示。

我们喜欢这个目录 PWA 的地方：

• 出色的移动优先体验
• 响应任何屏幕尺寸
• 轻松的离线体验

卡里加米

Carigami 是一家连接供应商和租车人的法国汽车零售经纪人。 PWA 根据用户对城市、驾驶员年龄、日期和时间的搜索偏好，提供可靠的汽车价格比较。

该应用程序会在几秒钟内返回搜索结果，其中包含每辆汽车租赁的所有详细信息。

我们喜欢这个目录 PWA 的地方：

• 快速加载时间
• 准确的搜索结果
• 搜索过滤器

闪耀

Shine 是印度第二大求职门户网站，成立于 2008 年。它为各行各业的 15,000 多家公司匹配候选人。

它的 PWA 是最好的工作匹配网站之一。 例如，可以根据技能、职务、部门、行业、位置和教育轻松过滤搜索特定工作。

工作提醒也可以无缝传送到用户的设备。

我们喜欢这个目录 PWA 的地方：

• 推送通知
• 完全无障碍
• 自定义离线页面

社会或社区

火种

当 Tinder 扰乱约会场景市场时，许多用户开始爱上这款应用程序，因为它采用了创新的婚介方式。

2017年，公司经过三个月的开发，投资了自己的PWA。 立即观察到好处。 首先，它能够将其数据投资从其原生应用程序上的 30 MB 减少到 PWA 上的仅 2.8 MB。

它还报告了更快的页面加载和用户更好的参与度（在刷卡、消息传递、购买和消费会话方面）。

我们喜欢这个社交 PWA 的地方：

• 推送通知
• 便于使用
• 优化的性能（基于路由的代码拆分）

Pinterest

三个月来，流行的图像共享和社交媒体平台 Pinterest 建立了 PWA，以扩大其国际用户群。 根据 Google 的说法，与它的 650 KB 的旧移动网站相比，PWA 的 150 KB 大小足以给用户留下深刻印象。

Pinterest 订阅者现在只需等待 5.6 秒即可使用 UI，而之前的移动应用需要 23 秒。

过渡到 PWA 的早期结果很有希望：在应用上花费的时间增加了 40% 以上，用户生成的广告增加了 44%，广告点击量增加了 50%，核心参与度增加了 60%。

我们喜欢这个社交 PWA 的地方：

• 推送通知
• 低带宽使用
• 令人印象深刻的离线支持

电报

Telegram 在 2013 年通过提供与不同设备兼容的基于云的工具，颠覆了即时通讯服务。

在撰写本文时，每月有超过 4 亿活跃用户依靠这种跨平台的安全服务来交换短信、照片、视频和音频文件。

当其 PWA 推出以提供与其原生移动应用程序相同的功能（但尺寸更小）时，该公司报告称每位用户的会话数和保留时间增加了 50%。

我们喜欢这个社交 PWA 的地方：

• 可在 iOS 和 Android 上安装
• 离线支持
• 显现

推特

最早推出的 PWA 之一是 Twitter 早在 2017 年推出的 Twitter Lite PWA。应用程序开发人员后来将其用作将 Web 和原生应用程序功能集成到更理想的移动应用程序中的模型。

据谷歌称，PWA 的目标是提高其 250,000 名日常用户的重新参与度，这些用户平均每天检查四次帐户。

通过降低数据消耗、改善即时加载（在 3G 网络上 5 秒）和提高用户参与度，该公司报告称每个会话的页面浏览量增加了 65%，发送的推文增加了 75%，跳出率下降了 20% .

我们喜欢这个社交 PWA 的地方：

• 浏览器优化（基于路由的代码拆分）
• 更少的带宽使用
• 快速更新

Instagram

Instagram 遵循 Twitter 的策略，即在后者的应用程序发布后立即提供 PWA。 2020 年初，Instagram 还更新了其 Windows 10 应用程序，使其成为带有直接消息传递功能的 PWA。

虽然其原生应用程序仍在销售，但设备移动浏览器上的网站呈现相同的功能和用户体验。 用户可以从桌面和移动应用程序中获得他们长期以来喜欢的相同功能。

我们喜欢这个社交 PWA 的地方：

• 推送通知
• 即时加载时间
• 反应快

旅行和预订

爱彼迎

Airbnb 是一个在线平台，为世界各地的租房和旅游体验提供便捷的安排。 2008 年，该公司开始将希望租用额外房间的房主与寻找负担得起的住宿的旅行者联系起来。

十年后，PWA 升级为在 Windows 10 移动版上与 Edge 配合使用。 结果是为客户提供了更加无缝的即时页面转换。 迄今为止，Airbnb 每月有超过 8000 万访问者，其中大部分访问者在其应用程序上。

我们喜欢这个 PWA 的地方：

• 推送通知
• 反应快
• 几秒钟内加载的高质量图像

特雷布

在线预订行业的另一个领导者是酒店预订平台Treebo。 在印度超过 165 个城市提供住宿选择，用户可以比较最优惠的选择。

据谷歌称，其 PWA 在 3G 网络上只需四秒钟即可加载。 该网站还报告说，它的点击次数增加了五倍，转化率提高了三倍。

我们喜欢这个 PWA 的地方：

• 服务器端渲染
• 快速互动
• 渐进式渲染（HTML 流）

我们去

作为亚太地区和中东地区最大的旅游相关网站，Wego 在设计 PWA 时考虑了消费者的行为。

由于大多数旅行者依靠手机保存照片，存储空间很容易用完。 此外，到不同的地方旅行可能会因互联网连接缓慢和不稳定而令人沮丧。

为了让用户能够方便地预订酒店房间和航班，建立了 PWA。 据谷歌称，Wego 宣布已将其页面加载时间从 12 秒减少到不到 3 秒。

我们喜欢这个 PWA 的地方：

• 极快的响应
• 极简设计
• 准确的搜索结果
• 轻的

MakeMyTrip

作为印度领先的在线旅行社之一，MakeMyTrip 加入了 PWA 的行列，以更好地迎合其每月 800 万访问者的需求。

在其原生应用程序取得成功后，该公司发现该国有限的连接以及劣质智能手机的数据上限可能会使用户访问非常沮丧。

此外，它注意到访问者在他们的网站上花费的时间比在他们的本地应用程序上花费的时间更多。 因此，复制相同的体验对于手机用户来说至关重要。

根据谷歌的数据，结果是客户会话增加了 160%，跳出率下降了 20%。 此外，首次购物者的转化率可能是之前使用原生应用的消费者的三倍。

我们喜欢这个 PWA 的地方：

• 轻松导航
• 可安装在任何操作系统上
• 快速加载时间

Travelstart

利用其在线市场的成功，Jumia 通过 Jumia Travel 进军旅游行业。 据谷歌称，其 PWA 有助于将流量增加 12 倍，将转化率提高 33%。

随后，Jumia Travel 于 2019 年被 Travelstart 收购，以创建旅游业最大的平台之一。 Jumia Travel 的移动用户即使在 PWA 上也被重定向到 Travelstart，他们可以在其中预订航班、酒店住宿和汽车租赁。

我们喜欢这个 PWA 的地方：

• 快速加载时间
• 简单的界面

特里瓦戈

为了每月接待 1.2 亿游客，德国科技公司 Trivago 推出了 PWA，以帮助更多用户在旅行前搜索和比较酒店价格。

该应用程序覆盖近 200 个预订网站，在生成价格比较方面运行迅速。 用户还可以方便地使用 Trivago 地图、真实的酒店评论和参考以前的搜索，以节省时间和带宽。

根据 Google 的报告，来自 55 个国家/地区的超过 50 万用户将 PWA 添加到他们的主屏幕，这导致酒店交易的参与度增加了 150%，点击率增加了 97%。

我们喜欢这个 PWA 的地方：

• 可安装在 Android 和 iOS 上
• 出色的离线支持
• 反应快
• 搜索过滤器
• 多语言支持

优步

Uber 的 PWA 是当今设计最独特的应用程序之一。 这家叫车公司于 2018 年将其 Window 10 应用程序置于幕后，以支持于 2019 年 7 月首次推出的 PWA。

与其原生移动应用相比，Uber 的 PWA 仅占用 50 KB 的存储空间。 它加载速度非常快，当您被困在网络较弱的区域时，它非常方便。

根据一个人的位置，优步提供叫车服务、送餐、自行车和踏板车租赁，以及在一个人的移动设备上点击的空中拼车服务。

我们喜欢这个 PWA 的地方：

• 快速加载时间
• 离线支持
• 轻的
• 极快的预订流程

来福车

优步的竞争对手 Lyft 成立于 2012 年，已扩大其在美国和加拿大的乘客和司机基础。

该公司提供更便宜的价格（就常客的订阅计划而言），占据了曾经由优步主导的巨大市场份额。 它于 2016 年推出了 PWA

对于新用户，PWA 提供了一个简单的注册流程以及预订服务，这是其原生应用程序的知名之处。

我们喜欢这个 PWA 的地方：

• 快速响应时间
• 可靠的实时更新

塔贾瓦尔

作为阿联酋非常受欢迎的航班和酒店预订应用程序，Tajawal 提供完整的解决方案，为旅客访问 450 多家航空公司和数千家酒店。

PWA 运行速度非常快，并通过简化的流程提供简单的预订解决方案。 界面简单明了，主要关注预订。

我们喜欢这个 PWA 的地方：

• 页面加载速度非常快
• 担保交易

飞行周末

这家独特的旅行预订公司于 2017 年在阿姆斯特丹成立。 目标是为用户提供仅限周末的旅行路线，以便他们可以搭乘飞机并根据系统的推荐体验两天的静修。

FlyWeeked 用户只需输入他们当前的位置并选择他们想要休息的周末。 然后，系统会提供一个可点击城市列表，如果用户不感兴趣，可以选择“滑动”或预订行程。

PWA 易于使用，独特的概念保证了更高的参与度。

我们喜欢这个 PWA 的地方：

• 快速响应时间
• 快速页面加载

酷表弟

当与您有共同兴趣的当地人可以在您的旅行中指导您时，访问外国会变得更加令人兴奋。 借助 Cool Cousin，游客可以在其易于使用的平台上选择值得信赖的当地城市指南。

所谓的“堂兄弟”从外科医生到音乐家，但都对接待家乡的游客有着相同的热情。

其 PWA 于 2018 年推出，旨在为用户提供更快、更流畅的访问体验。 在官方更新中，该公司宣布该应用程序已将加载时间减少了 25%，并减少了用户对其他在线资源的访问。

我们喜欢这个 PWA 的地方：

• 快速响应时间
• 轻松导航

娱乐

音片

Soundslice 是一款将乐谱与真实音频同步的应用程序，现在学习如何弹奏吉他、钢琴、萨克斯或班卓琴变得更加容易。

Soundslice 的 PWA 非常适合使用移动设备进行自学课程。 它允许用户更改音高、循环部分和标记音乐。 另一方面，音乐教师可以使用该工具开发互动课程。

样本“片段”让用户可以在乐谱上播放带有移动垂直线引导的音频。

我们喜欢这个 PWA 的地方：

• 交互设计
• 快速加载时间

Spotify

对于数字音乐流媒体服务 Spotify 来说，通过 PWA 来利用轻量级应用是追求更多订阅者的必要条件。

Spotify 的桌面和移动应用程序在 PWA 中进行了复制，即使在离线收听时也为听众提供同样的便利。 PWA 加载速度要快得多，而且背景颜色会适应专辑流派，以获得更个性化的触感。

我们喜欢这个 PWA 的地方：

• 自适应用户界面
• 离线支持
• 交互设计

1调谐器

与流行的看法相反，广播并没有死。 使用 1Tuner，任何用户都可以收听广播电台（世界任何地方）和播客。

他们甚至可以创建播放列表，这样他们就不会错过收听来自巴西的广播或伦敦当地电台播放的热门曲目。

PWA 也可以完美运行。 选择特定广播电台可让您实时收听广播。 另一方面，播客以卓越的音频质量提供。

我们喜欢这个 PWA 的地方：

• 可定制的主题
• 海量内容推荐

9GAG

自 9GAG 推出以来，在线幽默从未如此。 随着世界各地用户共享的互联网模因、视频和图像，该网站已成为娱乐来源。

然而，它很快意识到其旧的原生应用需要更长的时间来加载，尤其是当热门内容涉及大量视频时。

9GAG 切换到 PWA 以降低页面加载速度并鼓励更好的用户参与度。 该网站透露，其用户在该应用上停留的时间比其原生应用多 25%。

我们喜欢这个 PWA 的地方：

• 可安装在 Android 和 iOS 上
• 离线支持
• 快速加载时间

乐透.de

此 PWA 上最新欧洲乐透结果的整理实时信息为玩家提供了方便的资源。

PWA 加载速度非常快，并且在低端设备和互联网连接不佳的情况下运行良好。 对于任何迫不及待想知道最新结果的乐透玩家来说，这个 PWA 是一个方便的伴侣。

我们喜欢这个 PWA 的地方：

• 流畅的用户体验
• 德语和英语的可用性

总结 50 个最佳 PWA 示例

希望这些渐进式 Web 应用程序示例突出了我们在本指南中提出的一些要点。

这些品牌投资于他们的移动用户体验，并从中获益。 您可以而且应该追随他们的脚步，为您自己的业务使用令人印象深刻的渐进式网络应用程序“移动优先”。 我们会告诉你怎么做，但首先我们要回答一个关键问题——“原生应用呢？”

也许您正在玩弄自己构建 iOS 和 Android 应用程序的想法，而您却偏心于查看 PWA。 也许您对在 App Store 上发布并不那么大惊小怪，只是想要一个更好的网站。

无论哪种方式——我们将简要介绍“原生 vs PWA”的争论，并解释为什么我们认为 PWA 是最低限度的，而 PWA + 原生应用程序是最优的。

您应该构建什么样的应用程序？ 渐进式 Web 应用程序与原生应用程序

有一种想法是渐进式网络应用程序和原生应用程序是竞争对手。 PWA 将使原生应用程序变得无关紧要和不必要。 企业将在构建 PWA 和原生应用程序之间做出选择，并始终选择后者。

这种叙述是错误的，并将原生应用程序与 PWA 呈现为非此即彼的选择，这是一种错误的二分法。 事实上，PWA 和原生应用程序是一个绝妙的组合，并且可以协同工作。 它们覆盖彼此的基础，并确保您为每个人提供最佳的用户体验，无论渠道如何。

PWA 受益于网络的覆盖范围、可发现性和无处不在。 他们吸引自然流量，并以快速流畅的体验给首次访问者留下深刻印象，说服他们在您的网站上花费更多时间（和金钱）。 它们提供了一个简单的安装选项，可以减少摩擦和看门人，甚至可以吸引那些担心设备存储空间有限的人。

它们提供了与新访问者建立联系的完美方式，以及那些参与度足以返回但不足以下载您的本地应用程序的人，无论出于何种原因。 PWA 是通过您的渠道培养人才的完美方式。

另一方面，与 PWA 相比，原生应用的覆盖范围和可见性较差。 它们位于 App Store 的“围墙花园”后面，需要用户做出更高级别的承诺才能安装和下载它们。 另一方面，它们更符合现有的用户习惯，允许您向 iOS 用户发送推送通知，并且可以让您在 App Store 上提升品牌知名度/影响力。

原生应用非常适合您的核心读者/客户/用户。 应该鼓励您最忠实的用户下载您的本地应用程序并访问它们——甚至在登录屏幕或付费墙之后——这样您就可以将它们聚集在一个地方，并真正专注于理解和吸引它们，尽可能地提高 LTV 和保留率。

原生应用程序是您最大粉丝的绝佳“家”。

谷歌是这样说的：

“PWA 不必替换原生应用； 他们可以与他们一起工作。 例如，零售商可以使用原生应用吸引更有可能安装应用的忠实用户，但使用 PWA 轻松接触新用户。 然后可以提示与 PWA 交互的用户在未来下载移动应用程序”

我们的建议——两者都建！

如果您的预算有限，请选择 PWA。 如果您有本机应用程序但没有 PWA，那么您绝对应该尽快构建一个。 如果您完全致力于构建最佳的移动优先 UX 并能够投资实现这一目标，那么构建两者并让它们互补彼此的优势和劣势。

您可以使用 MobiLoud 获得出色的原生应用程序，您所需要的只是一个网站或 Web 应用程序。 与我们的团队联系以了解更多信息！

如何构建渐进式 Web 应用程序

本指南的目的是为您提供 PWA 的完整高级概述。 他们开发的复杂性不是我们要讨论的内容，但我们将列出您的选择，以便您自己做出选择。

网上有很多关于如何在“10 分钟”内构建 PWA 的内容。 承诺在不到一个小时的时间内将原生应用程序的感觉带到传统的 Web 应用程序中，很容易被这些教程所吸引。

它是合法的吗？

是和不是。 这些 PWA “黑客”也用于满足绝对最低标准a——HTTPS、Web 清单和服务工作者。 如果您有兴趣创建一个非常基本的、功能强大的渐进式 Web 应用程序 - 您可以尝试 Microsoft 的 PWABuilder。 有了一些修修补补和技术知识，你就可以得到一些体面的东西并运行起来。

为了构建一个独特、优化且功能丰富的渐进式网络应用程序——真正发挥其潜力——您需要进行更多投资。 要了解原因，让我们分解基本步骤。

1. 购买 SSL 证书以通过您的托管服务进行配置
2. 开发应用程序外壳
3. 验证浏览器是否支持服务工作者
4. 注册服务工作文件
5. 添加推送通知和网络应用清单
6. 设置安装提示
7. 测试应用程序的功能
8. 审核基于应用程序的 Lighthouse 清单
9. 修复错误
10. 启动应用程序

听起来很容易，对吧？

实际上，要做好这一点并构建良好的自定义渐进式 Web 应用程序，需要具有构建复杂 Web 应用程序经验的前端开发人员。

设置服务工作者和缓存以获得最佳性能的重要工作很复杂，需要真正的技能。 然后，根据您的要求，您可能还需要了解原生应用程序用户体验以及如何在网络上有效应用的设计师。

除非你是一家相当大的公司，否则你可能不会有一大堆才华横溢的前端开发人员坐在那里等你告诉他们该做什么。 你需要找到他们，雇佣他们，组建一个团队并管理他们——如果你没有这些事情的经验，这是一项艰巨的任务。 优秀的前端开发人员也总是很受欢迎，他们的合同费率反映了这一点。

构建渐进式 Web 应用程序的成本和时间范围

那么这要花多少钱呢？ 嗯，这有点像经典的“一根绳子有多长？”

这完全取决于您要构建的应用程序的复杂性。 根据 PWA Book 的作者：

从头开始构建 PWA 需要 3400 wh（对于小型应用程序）到 9000 wh（我们已经完成的专门项目）。 这意味着成本在 40 万美元到 100 万美元之间。 使用云平台将至少便宜 75%，上市时间也将缩短 75%（2-3 个月而不是 8-12 个月）。

–第 10 章，PWA 手册

这似乎很昂贵，但它让您了解像我们上面看到的那些主要品牌如何投资他们的体验。

当然，如果您将网站转换为 PWA，而不是从头开始构建，那么在大多数情况下，它会更便宜、更容易。 作为粗略的估计，您正在考虑投资至少 3 个月，以及 20,000 到 50,000 美元以获得良好的结果。

开发人员遵循不同的项目阶段，但在大多数情况下，它涉及七个阶段：发现、设计、修订、初步开发、测试、错误修复和最终发布。

如果你的 PWA 更复杂，那么考虑到必须集成的高级功能，例如 GPS、社交媒体支持和相机访问，预计它的完成时间会更长。

话虽如此，简单的 PWA可能需要不到三个月的时间（如果是简单的，甚至只需要几周的时间）。 如果您想拥有更高级的功能，例如后端管理面板、可视化模式和其他集成，那么您仍然可以在不到六个月的时间内拥有您的 PWA。

这似乎是一个相当大的数量，但如果你把它放在上下文中，它就值得了。 它们不仅比原生应用程序更实惠且构建速度更快，而且从长远来看，速度和改进的用户体验可能会超过其自身的回报。

如果您使用 WordPress，有一些更直接的方法可以将您的 WordPress 网站变成 PWA，并且您可以尝试一些 WordPress PWA 插件。

我们可以帮助您就您的选择提供建议，如果您的网站适合 - 使用我们的自定义平台在短短 2 周内将其转换为 PWA，只需标准成本的一小部分。 我们还可以在类似的时间范围内从您的网站构建原生 iOS 和 Android 应用程序，这样您就可以覆盖 2021 年及以后的所有移动基础！

联系我们的一位移动专家进行咨询以了解更多信息。

它在您的手中 – 立即开始构建渐进式 Web 应用程序！

到目前为止，您应该对渐进式 Web 应用程序的特征和功能有一个很好的了解。

要了解更多信息，请查看以下资源：

• PWA 书
• Google 在 web.dev 和 Google Developers 上的资源
• PWA Stats（有趣的指标和案例研究）
• Google 的 PWA 路演（精彩视频系列）
• Mozilla 优秀的 PWA 指南
• Jason Grigsby 的书 Progressive Web Apps
• 今天的网络可以做什么？ （展示了网络技术是如何发展的）
• 是的，那个 web 项目应该是一个 PWA（优秀的指南/文章）
• 我们关于原生、Web 和混合应用程序之间区别的指南

现在轮到你了。 这似乎是一项艰巨的任务——但您需要将您的网站变成一个进步的网络应用程序，才能真正拥有令人印象深刻、现代、最佳的网络形象。

我们保证，当它准备好发布时，您会很高兴。 您的客户将通过花费更多时间、注意力和金钱与您的业务互动来奖励您。

正如我们所提到的——PWA 不是原生应用程序的替代品。 PWA 主要是一个更好的网站。 让用户在他们的设备上安装它们可能很困难，因为他们还不习惯，而且你错过了向 iOS 用户发送推送通知和在 App Store 上展示品牌的机会。

你也应该构建原生应用程序吗？

PWA 是必须的，但原生应用程序仍然是终极的移动用户体验。 有些人对原生应用的前景持谨慎或消极态度的唯一原因是巨额费用（50,000 美元以上），以及传统上伴随它们而来的漫长而费力的开发过程。

如果您也有这些担忧，但有兴趣为您的品牌构建 iOS 和 Android 应用程序，您应该查看我们的平台 News、Canvas for eCommerce 或 Canvas。 无论哪一个最适合您——您可以在短短几周内将您的网站或 Web 应用程序转换为高质量的本地应用程序，成本低至 100 美元/平方米。

我们的平台可用于将任何网站转换为移动应用程序。 您的网站是用什么构建的并不重要。 MobiLoud 非常适合构建：

• WordPress 应用程序
• 泡泡应用
• Squarespace 应用程序
• 蜡应用
• WooCommerce 应用程序
• 网络流应用

以及介于两者之间的任何东西！ 您将在 Android和 iOS 上设置无限制的推送通知，并且您将拥有在网络和 App Store 上建立成功的跨平台存在所需的所有功能。

我们还可以通过 PWA 帮助您，因此您将拥有理想的移动组合。 如果这听起来不错 - 请立即联系并预订演示。 如果您决定采取另一条路线，那么祝您旅途愉快。 我们希望您喜欢 PWA 示例并获得一些灵感来帮助您在移动设备上茁壮成长！