探索渐进式 Web 应用程序 (PWA) 的来龙去脉

已发表: 2020-06-17

不要被愚弄——渐进式 Web 应用程序并不是一些疯狂的新技术,在快速阅读完文章后,您将无法与您的朋友进行有教育意义的对话。

它们本质上是现代化的 Web 应用程序,具有一个花哨的名称(感谢 Google Chrome)。

但是,请注意为什么许多组织认为 PWA 更适合他们的需求。 与原生应用程序相比,构建、营销和维护 PWA 不仅更便宜,而且它也可以是客户喜欢的。

您是否询问过您的客户是否希望被重定向到应用商店只是为了预订下一次酒店预订或预订租车? 也许那是另一天的对话......

什么是渐进式网络应用程序?

在我们开始了解构建渐进式 Web 应用程序与原生应用程序或传统 Web 应用程序的用例之前,让我们确保我们涵盖了基础知识。

首先,您需要了解渐进式 Web 应用程序,因为它们是未来的发展方向。 根据 JAX Enter 对 800 多名技术人员进行的读者调查,46% 的受访者表示他们认为 PWA 是未来,而不是原生或混合应用程序。

渐进式 Web 应用程序、非渐进式 Web 应用程序和本机应用程序之间的区别

即使是高级开发人员也倾向于将渐进式与非渐进式或非渐进式与原生应用程序混淆。 尽管如此,这些应用程序类型之间仍存在明显差异。

本机、渐进式和非渐进式 Web 应用程序

资源

机应用程序是以特定语言为特定设备(智能手机、平板电脑等)构建的应用程序,必须从应用程序商店下载。 在上面的示例中,Dish 的 MyPay 应用程序是一个原生应用程序,因为它可以从 Apple App Store 下载并且是为 iOS 设备构建的。 尽管您也可以在 Google Play 上下载 Dish 的 MyPay 应用程序,但 Dish 实际上必须开发第二个本机应用程序才能实现。

由于必须为其客户设计和开发两个不同的移动应用程序,您可以开始看到原生应用程序开发的一个主要缺点。

更注重预算的应用程序类型? 非渐进式 Web 应用程序。 Web 应用程序的最早形式,即非渐进式 Web 应用程序,是一种不需要从应用商店下载的应用程序; 相反,它只能通过网络访问。

它看起来和感觉就像一个应用程序,但它实际上只是一个具有增强功能的网站。 请注意上图中的非渐进式 Web 应用程序示例,Evolve Vacation Rentals,安全、响应迅速且时尚——但它不被视为 PWA。

事实上,为了将基于 Web 的应用程序视为渐进式 Web 应用程序,Google 表示该应用程序必须满足以下条件:

  • 渐进式。 它必须适用于所有浏览器类型,而不仅仅是 IE 或 Chrome。
  • 反应灵敏。 该应用程序必须适合所有现代手机、平板电脑和未来的科技产品。
  • 独立。 它必须具有离线工作或在低强度网络连接上工作的能力。
  • 应用式. 应用程序使用应用程序样式的导航和样式。
  • 新鲜的。 始终保持最新。
  • 安全的。 通过传输层安全性提供给用户,或更通常称为 HTTPS url。
  • 可发现的。 可使用搜索引擎查找。
  • 可重新接合。 能够通过平台重新吸引应用程序用户(即推送通知)。
  • 可安装。 用户可以通过应用商店将应用安装到他们的主屏幕,以便轻松方便地访问。
  • 可链接。 应用程序可能会使用 URL 与他人共享。

渐进式 Web 应用程序的功能

Google 对使 Web 应用程序成为渐进式Web 应用程序的原因进行了分类,但您可能想知道一个人如何在不保留清单的情况下确定 Web 应用程序是否是渐进式的? 为了能够做到这一点,让我们回顾一下 PWA 的关键特性。

安全上下文 (HTTPS)

如果一个应用程序不符合最新最好的数据安全标准,就很难称其为进步的。 安全上下文是一种安全标准,可为网站用户提供一定程度的信心,表明他们正在使用的 Web 应用程序正在以安全的方式交付内容。

作为 2020 年任何网站的最佳实践,PWA 的一个关键特性是它们是 TSL/SSL 加密的,以确保安全的上下文。 要快速确定 Web 应用程序是否安全,只需在页面 url 中查找 HTTPS。

如果您使用的 Web 应用程序没有 HTTPS 连接,则不能将其视为 PWA。

用户站点工作人员当前站点

资源

服务人员

用技术术语来说,服务人员不是给你外卖食物的人——但让我们坚持这个类比!

假设你在一家餐馆,停电了。 如果你像以前一样饿,你会被困在吃沙拉或冷汤的时候。 但是服务工作者所做的是它使用缓存来确保您的体验永远不会受到影响。 或者更确切地说,服务人员会确保您仍然可以吃到热腾腾的饭菜。

从 PWA 用户体验的角度来看,这意味着如果您正在浏览应用程序并且您失去了互联网连接,您将不会注意到。 或者,如果你之前已经去过那个 PWA,你的体验会加载得非常快——就像你提前点了晚餐一样。

这怎么可能? 只需一点 JavaScript 文件,就可以了。 更高级的服务工作者甚至可以与推送 API 连接,允许 PWA 向用户发送推送通知以保持他们的参与度。

清单文件

为了创建更加定制化的用户体验,PWA 通常会利用清单文件。 简而言之,清单文件是包含作为单个单元一部分的一组文件的元数据的文件。

本质上,元文件通常用于告诉 Web 浏览器 PWA 应用程序在特定设备上打开时的行为方式。 通过为 PWA 创建清单文件,开发人员可以设置默认的应用程序图标或初始屏幕颜色。 开发人员还可以确保应用程序在全屏浏览器窗口中打开,以在特定设备上创建更“类似应用程序”的体验。

网络应用

资源

PWA 的优势

当然,所有类型的应用程序都有优势。 Spire Digital 敏捷产品开发总监 Bart Deferme 说:

“不同类型的应用程序在不同组织的不同用例中具有优势。原生应用程序非常适合那些知道其用户更喜欢原生应用程序而不是 PWA 或非渐进式 Web 应用程序的组织。但对于试图获得概念证明的企业家来说通过推出精益 MVP,非渐进式 Web 应用程序或 PWA 是更经济实惠的路线。”

请记住,始终存在不同类型的应用程序是最佳解决方案的用例,以下是渐进式 Web 应用程序优于另一种类型的应用程序的一般优势:

可发现的

谷歌每天获得 35 亿次搜索,使其成为世界上最大的搜索引擎。 可以肯定地说,当人们遇到问题或疑问时,他们会询问 Google。 这为部署 PWA 的组织提供了一个很好的机会,因为除了应用商店之外,它们还可以存在于网络上。 与其他应用程序相比,这使人们更容易找到 PWA。

PWA 的可发现性是一个很大的优势,因为它允许用户在一个地方搜索他们搜索最多的地方、获得答案和完成操作。 使用 PWA,他们不必跳过下载整个应用程序的麻烦,然后看着应用商店下载轮慢慢滚动到“100%,下载完成”。

可安装

如果用户真的喜欢使用 PWA 或者他们只是经常使用它,那么他们不必像使用非渐进式 Web 应用程序那样在他们的计算机和手机浏览器上添加书签。 对应用商店和用户进行一次简单的访问,就可以让用户在与典型的原生应用程序相同的时间内访问他们最喜欢的 PWA。

可链接

与朋友分享指向您最喜欢的应用程序的链接比告诉您的朋友“去应用商店搜索那个应用程序”要容易得多。 链接可以通过电子邮件、社交媒体 dms 等轻松共享。可链接性和可发现性是同步工作的两个 PWA 优势,减少了首次用户访问应用程序所需的时间,也减少了数量超级用户与朋友或潜在用户共享应用程序所需的时间。

网络独立

网络网络。 我们将永远无法在世界各地获得完整的酒吧。 但是话又说回来,我们不需要完整的条来操作 PWA,对吗?

渐进式网络应用程序使用户能够在穿过隧道的途中继续收听他们最喜欢的音乐,并允许电信工作人员在全市停电期间收到电力线故障通知。 PWA 无需始终保持强大的网络连接,可为所有用户组提供更可靠的用户体验。

响应式

曾经想在尝试对 Zoom 通话感兴趣的同时与朋友玩 Words 吗? 如果 Words with Friends 是 PWA 而不是本机应用程序,您可以(顺便说一句,这是一个好主意,请有人做到这一点)。 无论设备或浏览器类型如何,PWA 都可以提供无缝的用户体验。 这意味着您不必总是随身携带手机或笔记本电脑来使用您最喜欢的本机或非渐进式应用程序。

响应性的另一个优点是它还可以使组织不必为多个用户组生成多个应用程序。 您的笔记本电脑用户和手机用户都可以对单个应用程序(PWA)的部署感到满意。 这种优势往往是 PWA 的最大卖点之一,因为它可以为组织节省 IT 和营销支出。

安全的

尤其是在使用金融、健康或保险应用程序时,用户想知道他们的个人数据没有被开曼群岛的某些人访问。 更简单地说:安全性与用户建立信任。 安全上下文和 url 加密使 PWA 能够为您的用户和 Google 搜索机器人提供保证。

如前所述,最佳做法是对组织的所有 url 使用 SSL 加密 - 包括 Web 应用程序。 如果您不保护您的 Web 应用程序,Google 一直表示您的 Web 应用程序在搜索结果页面中的性能将受到负面影响。

对 pwa 与响应式 Web 的影响

资源

结论

想一想:世界正在走向银翼杀手的现实,人类很快就会一天 24 小时连接到软件(如果你还没有的话)。 领先于技术曲线并获得最大的投资回报率意味着投资于具有最长期价值的软件。

本机应用程序是为特定设备使用特定语言构建的,这使得应用程序体验无响应并且代码库的可重用性降低。 来自非渐进式 Web 应用程序的代码可以重用于创建其他应用程序,但非渐进式 Web 应用程序仅针对特定浏览器构建。 它们也不能从应用商店下载。

PWA 是最面向未来的应用程序类型,因为它们是:

  • 可通过网络或应用商店发现
  • 响应迅速,适用于任何浏览器
  • 网络连接独立
  • 安全和加密
  • 和更多

现在您对 PWA 有了更好的了解,您可以更好地检查您的应用程序用例并确定哪种类型的应用程序适合您的组织的需求。 如果您还没有,请与您的客户交谈以了解他们的需求,然后选择一个应用程序来构建,该应用程序将为您的组织提供最长期的价值。

PWA 是否适合您的组织? 谁知道。 但是,更好地了解您的所有应用程序选项绝不是一个坏主意。

在 G2 的应用开发信息中心更全面地了解其他应用开发见解。