渐进式 Web 应用

渐进式 Web 应用 (PWA) 是一种 Web 应用,它使用渐进增强来为用户提供更可靠的体验,使用新功能来提供更集成的体验,并且可以安装。而且,因为它是一个 Web 应用,所以它可以覆盖任何地方、任何设备上的任何人,所有这些都只需一个代码库。安装后,PWA 看起来像任何其他应用,具体来说

  • 它在主屏幕、应用启动器、启动面板或开始菜单上有一个图标。
  • 当您在设备上搜索应用时,它会显示出来。
  • 它在独立窗口中打开,与浏览器的用户界面完全分离。
  • 它可以更高程度地与操作系统集成,例如,URL 处理或标题栏自定义。
  • 它可以离线工作。

Web 平台

Web 是一个令人难以置信的平台。它在设备和操作系统之间的通用性、以用户为中心的安全模型,以及没有一家公司控制其规范或实施的事实,使其成为交付软件的强大平台。

结合 Web 固有的可链接性,可以跨 Web 搜索,并将您找到的内容与任何地方的任何人共享。每当您访问网站时,它都是发布商部署的最新版本,您对该站点的体验可以是临时的,也可以是永久的,这取决于您的意愿。

Web 应用程序可以使用单个代码库覆盖任何地方、任何设备上的任何人。对于开发者来说,Web 还提供了透明且直接的部署机制。无需打包,无需额外的审核内容,也无需延迟更新。用户在访问您的应用时始终获得最新版本。借助新的功能和技术,Web 应用现在可以让您即使在离线时也能互动或查看内容,这在几年前是无法克服的障碍。

平台专属应用

平台专属应用,在移动设备和桌面设备上,都以其丰富性和可靠性而闻名。它们无处不在,在主屏幕、程序坞和任务栏上。它们的工作不受网络连接的影响,并在其自身的独立体验中启动。它们可以从本地文件系统读取和写入文件,访问通过 USB、串行或蓝牙连接的硬件,并与存储在您设备上的数据(如联系人和日历事件)进行交互。在平台专属应用程序中,您可以拍照、播放主屏幕上列出的歌曲,或在另一个应用中控制媒体播放。这些应用程序感觉像是它们运行的设备的一部分。

平台专属应用面临的一个挑战是它们与多个平台和设备不兼容,因此将 Android 应用移动到 iOS 或将 iOS 移动到 Windows 或 ChromeOS 并不容易,甚至不可能,除非从头开始创建一个新应用。

兼具两全其美

如果您从功能和覆盖范围的角度来考虑平台应用和 Web 应用,平台应用代表了最佳的功能,而 Web 应用代表了最佳的覆盖范围。渐进式 Web 应用位于平台应用的功能和 Web 应用的覆盖范围的交汇处。渐进式 Web 应用包含来自两个世界的特性。

Web

  • 可链接性
  • 默认情况下可访问
  • 无处不在
  • 易于部署
  • 易于更新
  • 人人都可以发布

平台应用

  • 支持离线
  • 高性能
  • 设备集成
  • 独立体验
  • 已安装图标
  • 丰富且可靠

采用具有优势

美国的视频流媒体服务 Hulu 创建了渐进式 Web 应用版本的体验,以取代其桌面应用,这些桌面应用的用户评价和使用率都很差。正如在 Google I/O 2019 上分享的那样,一位开发者可以在两周内从他们现有的 Web 应用程序研究和实施这种体验。

在五个月内,他们旧版应用的 96% 的用户采用了 PWA,回访率增加了 27%,参与度增加了 5.5%。由于 PWA 位于启动器和任务栏中,因此比仅存在于选项卡中更容易返回。

JD.ID 是印度尼西亚的一个电子商务平台,为许多产品提供送货服务,希望通过专注于性能和与其 PWA 的网络无关的可靠体验来扩展其在线业务。通过这种增强的体验,他们的整体移动转化率提高了 53%,安装用户提高了 200%,每日活跃用户增加了 26%。

Clipchamp 是一款基于浏览器的桌面级在线视频编辑器,它使任何人都可以通过视频讲述值得分享的故事。与标准桌面应用用户相比,他们的 PWA 用户的用户留存率高出 9%,并且在推出的前五个月中,他们的 PWA 安装量每月以 97% 的速度增长。

Corel Corporation 的 Gravit Designer 是一款功能强大的桌面级矢量设计工具,为成千上万的日常活跃用户提供服务,这些用户需要丰富、经济实惠、易于访问的矢量插图软件。自从添加 PWA 作为用户的安装选项以来,他们发现 PWA 用户的活跃度提高了 24%,PWA 占回头客的比例提高了 31%,并且与其他平台和安装选项相比,PWA 用户购买 Gravit Designer PRO 的可能性高出 2.5 倍。

流媒体游戏规则改变者

渐进式 Web 应用强大功能的一个很好的例子是流媒体平台行业,包括云游戏和远程计算。自 2021 年以来,大多数云游戏提供商都推出了渐进式 Web 应用,让您可以通过任何设备和浏览器或 PWA 安装来玩主机游戏:iPhone、Android、iPad、笔记本电脑、Mac 或 PC。Amazon Luna、Microsoft Xbox Cloud Gaming、Facebook Gaming、Google Stadia、Nvidia GeForce Now 和 BlueStacks X 通过浏览器作为 PWA 提供云游戏解决方案。借助 WebRTC、WebAssembly 和 GamePad API 等 Web 技术,它们都在所有平台上提供了接近原生性能的出色体验。

挑战

在介绍了使用 Web 平台发布 PWA 的优势之后,了解您可能面临的挑战也很重要。

跨浏览器兼容性

Apple 是多设备世界中的一家至关重要的公司,拥有 iOS、iPadOS、macOS 和 Safari。虽然 Apple 从未公开使用过 PWA 这个术语,但自 2018 年以来,他们一直在 Safari for iPhone 和 iPad 上支持使 PWA 可安装且支持离线的技术。

但是,Apple 对 PWA 规范的实现缺少其他浏览器拥有的许多功能,特别是 Chromium 引擎驱动的浏览器。

中间,我们还有 Firefox 及其 Gecko 引擎,其实现包括 Android 上更多的 PWA 规范,以及桌面设备上更少的安装功能。

限制包括缺少推送通知、集成 API(例如 Web Bluetooth 或 WebNFC)以及帮助用户了解他们可以安装当前网站以获得应用体验的安装推广技术。此外,已实现的功能还存在一些错误。

与所有 Web 开发一样,在发布 PWA 以及发布主要新浏览器或操作系统版本时,在每个平台上测试您的体验是强制性的。当某项功能不可用时,您应始终提供回退解决方案或替代体验。

对 PWA 的认知

作为 PWA 开发者,您可能会遇到认知问题,无论是在业务方面还是用户方面。一些企业主不了解 PWA,或者对渐进式 Web 应用的功能和挑战存在误解。

当您发布 PWA 时,您的下一个挑战是确保用户了解该网站是可安装的,从而带来已安装的应用体验。

在某些平台(如 iOS 和 iPadOS)上,安装挑战更为重要,有时 UX 设计师会包含一些屏幕,向用户解释如何安装应用。

兼容性

您需要记住,渐进式 Web 应用只是一个 Web 应用,因此内容和服务在标准规范和协议之上运行。因此,从技术上讲,PWA 在 Web 运行的任何地方都可以运行;您不需要平台与任何“PWA 规范”兼容。

但是,当我们谈论 PWA 和兼容性时,通常,我们考虑的是跨越浏览器和仅在线上下文边界的功能:图标安装和离线支持。

除了经典 Web 平台支持之外,让我们检查一下对基本应用功能(如图标安装和离线功能)的支持。

    97 %

    支持离线的浏览器

    88 %

    Web 用户可以安装 PWA

数据来源:StatCounter 和 Can I Use。

台式机和笔记本电脑

在多因素设备的世界中,很难知道什么是台式设备。但是,至少从操作系统的角度来看,这些浏览器和商店与 PWA 安装和离线功能兼容

Windows 10 和 11
Google Chrome(73 版本起)、Microsoft Edge(79 版本起)、Microsoft Store
ChromeOS
内置 Chrome 浏览器(72 版本起)、Play 商店(85 版本起)
macOS、Linux 以及 Windows 7 和 8.x
Google Chrome(73 版本起)、Microsoft Edge

在下面的视频中,用户从桌面计算机上的浏览器安装 PWA,然后像访问任何其他具有独立窗口的应用一样访问它。

移动设备

在谈论手机和平板电脑时,可以使用以下浏览器和应用商店安装具有离线功能的渐进式 Web 应用

iOS 和 iPadOS
第三方浏览器(自 iOS/iPadOS 16.4 起)、Safari(自 iOS 11.3 起)、AppStore(自 iOS/iPadOS 14 起,有一些限制)、用于企业分发的移动配置。
Android
Firefox、Google Chrome、Samsung Internet、Microsoft Edge、Opera、Brave、华为浏览器、百度、UCWeb、Play 商店(自 72 版本起,安装了 Google Chrome,或与 TWA 兼容的浏览器)、Galaxy Store、用于企业分发的 Managed Play iframe。

在下面的视频中,用户使用浏览器对话框以及“添加到主屏幕”菜单从移动设备上的浏览器安装 PWA。

其他设备

一些其他小型设备支持 PWA,例如游戏机(带有 Microsoft Store 的 Xbox)或 XR 设备(Microsoft Hololens,Facebook Oculus 的计划)。但是,其余带有浏览器的设备通常不接受 PWA,包括

  • 游戏机
  • 智能电视
  • 智能手表
  • 汽车

您的 PWA 始终可以在所有设备的浏览器中工作,但会受到其特定限制。这种在许多设备上工作的能力使您可以创建多设备旅程,用户可以在一个设备上开始任务,并在另一个设备上完成任务,数据在设备之间同步,并且使用完全相同的已部署应用。

资源