渐进式 Web 应用

渐进式 Web 应用 (PWA) 是一种采用渐进式增强功能的 Web 应用,旨在为用户提供更可靠的体验,利用新功能提供更完整的体验,并且可以安装。此外,由于它是一个 Web 应用,因此它可以通过单个代码库覆盖任何设备上的任何人。 安装后,PWA 看起来就像其他任何应用一样,具体来说:

  • 它在主屏幕、应用启动器、启动板或开始菜单中具有相应图标。
  • 当您在设备上搜索应用时,系统会显示此通知。
  • 它会在与浏览器界面完全分开的独立窗口中打开。
  • 它可以与操作系统进行更高级别的集成,例如网址处理或标题栏自定义。
  • 离线时也能使用。

Web 平台

Web 平台是一个不可思议的平台。 它具有跨设备和操作系统的通用性,以用户为中心的安全模型,并且没有一家公司控制其规范或实现,这使其成为一个强大的软件交付平台。

结合网络的固有可链接性,用户可以在其中进行搜索,并随时随地与任何人分享找到的内容。每当您访问某个网站时,它都是发布商部署的最新版本,您的该网站体验可能会是临时的,也可能是永久性的。

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

针对具体平台的应用

针对移动设备和桌面设备的平台专用应用以丰富而可靠而闻名。它们始终会显示在主屏幕、基座和任务栏中。 无论网络连接情况如何,它们都能运行,并可在自己的独立体验中启动。 他们可以从本地文件系统中读取和写入文件,访问通过 USB、串行设备或蓝牙连接的硬件,并与存储在您设备上的数据(例如联系人和日历活动)进行交互。在平台专用应用中,您可以拍摄照片、播放主屏幕上列出的歌曲,或者在其他应用中控制媒体播放。这些应用就像是其运行所在设备的一部分。

平台专用应用面临的一个挑战是它们与多个平台和设备不兼容,因此如果不从头开始创建新应用,即使可能的话,也很难将 Android 应用迁移到 iOS 或将 iOS 迁移到 Windows 或 ChromeOS。

两全其美

如果从功能和覆盖面的角度来看平台应用和 Web 应用,平台应用代表的功能最优势,而 Web 应用则代表覆盖面最广。渐进式 Web 应用是平台应用的功能和 Web 应用覆盖面的融合。 渐进式 Web 应用兼具这两种功能。

Web

  • 可关联性
  • 默认可访问
  • 无处不在
  • 易于部署
  • 易于更新
  • 所有人都可以发布

平台应用

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

采用技术有其好处

Hulu 是美国的一家视频在线播放服务商,他们打造了渐进式 Web 应用体验,以取代用户评价不佳且使用体验不佳的桌面应用。正如 2019 年 Google I/O 大会上分享的那样,一位开发者可以在两周内通过其现有 Web 应用研究并实现这种体验。

在五个月内,96% 的旧版应用用户采用了 PWA,回访量增加了 27%,互动度增加了 5.5%。由于 PWA 位于启动器和任务栏中,因此与只位于标签页中的 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 技术,这些 API 在所有平台上都能提供接近原生性能的出色体验。

挑战

在了解了使用 Web 平台发布 PWA 的优势之后,请务必了解您可能面临的挑战。

跨浏览器兼容性

Apple 是跨设备世界的重要公司,拥有 iOS、iPadOS、macOS 和 Safari。虽然 Apple 从未公开使用“PWA”一词,但自 2018 年以来,他们一直在支持相关技术,使 PWA 支持在 iPhone 和 iPad 上的 Safari 中安装和离线使用。

但是,Apple 的 PWA 规范实现缺少其他浏览器具备的许多功能,尤其是由 Chromium 引擎提供支持的浏览器。

另一方面,我们还拥有 Firefox 及其 Gecko 引擎,其实现包括在 Android 上使用更多 PWA 规范,并减少在桌面设备上的安装功能。

局限性包括缺少推送通知、集成 API(例如 Web Bluetooth 或 WebNFC),以及安装宣传技术(帮助用户知道可以安装当前网站来获得应用体验)。此外,已实现的功能还存在多个 bug。

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

了解 PWA

作为 PWA 开发者,您可能会遇到业务和用户端的感知问题。一些企业主不了解 PWA,或者对渐进式 Web 应用的强大功能和挑战产生误解。

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

在某些平台(例如 iOS 和 iPadOS)上,安装更加困难,有时用户体验设计人员会添加屏幕来向用户说明如何安装应用。

兼容性

您需要注意,渐进式 Web 应用只是一种 Web 应用,因此内容和服务将根据标准规范和协议运行。因此,从技术上讲,PWA 可以在 Web 运行的所有地方运行;您不需要让平台与任何“PWA 规范”兼容。

然而,当我们谈论 PWA 和兼容性时,通常我们考虑的功能可以跨越浏览器边界和纯在线环境:图标安装和离线支持。

除了传统版 Web 平台支持之外,我们来看一下对基本应用功能(例如图标安装和离线功能)的支持情况。

    97 %

    支持离线使用的浏览器

    88 %

    网络用户可以安装 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,然后像访问任何其他应用一样通过独立窗口访问 PWA。

移动设备

就手机和平板电脑而言,渐进式 Web 应用可通过以下浏览器和应用商店安装并具备离线功能:

iOS 和 iPadOS
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、适用于企业分发的 Google Play 企业版 iframe。

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

其他设备

一些其他小型设备支持 PWA,例如游戏机(Xbox with Microsoft Store)或 XR 设备(Microsoft Hololens,Facebook Oculus 计划)。不过,其他安装了浏览器的设备通常不接受 PWA,包括:

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

PWA 始终可以在所有设备的浏览器中运行,但有特定限制。这种适用于许多设备的功能可让您创建多设备历程,这样一来,用户就可以在一台设备上启动一项任务,然后在另一台设备上完成该任务,同时使用完全相同的已部署应用在各个设备间同步数据。

资源