渐进式 Web 应用

渐进式 Web 应用 (PWA) 是一种 Web 应用,它使用渐进式增强功能为用户提供更可靠的体验,使用新功能提供更集成的体验,并且可以安装。由于它是一款 Web 应用,因此只需一个代码库,即可让任何人随时随地通过任何设备访问。 安装后,PWA 看起来就像任何其他应用,具体而言:

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

Web 平台

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

结合网络固有的链接性,您可以搜索网络上的所有内容,并与世界各地的任何人分享您发现的内容。每当您访问某个网站时,您看到的都是发布商部署的最新版本,并且您对该网站的体验可以是临时的,也可以是永久性的,由您决定。

Web 应用可以通过单个代码库面向任何人、在任何位置、通过任何设备提供服务。 对于开发者而言,Web 还提供了透明且简单明了的部署机制。无需打包,无需额外的内容审核,也不会延迟更新。 用户访问您的应用时,始终会获得最新版本。借助新功能和新技术,Web 应用现在支持用户在离线状态下进行互动或查看内容,这在几年前是无法实现的。

平台专用应用

移动设备和桌面设备上的平台专用应用以功能丰富且可靠著称。它们会一直出现在主屏幕、基座和任务栏中。 无论网络连接如何,它们都可以运行,并且以独立方式启动。 它们可以从本地文件系统中读取和写入文件,访问通过 USB、串行或蓝牙连接的硬件,以及与存储在设备上的数据(例如联系人和日历活动)互动。在平台专用应用中,您可以在其他应用中拍照、播放主屏幕上列出的歌曲,或控制媒体播放。这些应用给人的感觉就像是其所运行设备的一部分。

特定于平台的应用面临的一个挑战是,它们与多个平台和设备不兼容,因此,如果不从头开始创建新应用,将 Android 应用移植到 iOS 或将 iOS 应用移植到 Windows 或 ChromeOS 并不容易。

两全其美

如果从功能和覆盖面方面考虑平台应用和 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 发布后的前 5 个月内,PWA 安装量每个月以 97% 的速度增长。

Corel Corporation 的 Gravit Designer 是一款强大的桌面级矢量设计工具,为数以万计的日活跃用户服务,要求使用功能丰富、经济实惠且易于使用的矢量图软件。自向用户添加 PWA 作为安装选项以来,与其他平台和安装选项相比,PWA 用户的活跃度提高了 24%,重复用户增加了 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 年以来,他们一直在支持 iPhone 和 iPad 上 Safari 中可安装且支持离线的 PWA 技术。

不过,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 商店
ChromeOS
内置 Chrome 浏览器(从版本 72 开始)、Play 商店(从版本 85 开始)
macOS、Linux 以及 Windows 7 和 8.x
Google Chrome(版本 73 以上)、Microsoft Edge

在以下视频中,用户通过桌面计算机上的浏览器安装 PWA,然后像使用任何其他应用一样通过独立窗口访问该 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 商店(安装了 Google Chrome 的 72 版或与 TWA 兼容的浏览器),Galaxy 商店,适用于企业分发的受管 Play iframe。

在以下视频中,用户通过移动设备上的浏览器安装 PWA,方法是使用浏览器对话框,并使用添加到主屏幕菜单。

其他设备

一些其他小型设备也支持 PWA,例如游戏机(内置 Microsoft 商店的 Xbox)或 XR 设备(Microsoft Hololens、Facebook 的 Oculus 计划)。不过,其他内置浏览器的设备通常不接受 PWA,包括:

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

您的 PWA 将始终在所有设备的浏览器中正常运行,但具有特定限制。 借助这种在多部设备上运行的能力,您可以创建多设备历程,让用户可以在一台设备上启动任务,然后在另一台设备上完成该任务,并且数据会在两台设备之间同步,而所用的都是完全相同的已部署应用。

资源