功能

渐进式 Web 应用的功能不仅仅是在屏幕上呈现内容或连接到 Web 服务。PWA 可以处理来自文件系统的文件,可以与系统的剪贴板交互,可以访问连接到设备的硬件等等。每个 Web API 都可用于您的 PWA,并且在您的应用安装后还有一些额外的 API 可用。

您可以使用 What Web Can Do Today 来了解每个平台上可能实现的功能。对于个别 API 或功能,您可以使用 Can I UseMDN 上的浏览器兼容性表。

始终检查功能支持

PWA 中的第一个字母 P 代表渐进式 (progressive),它源于渐进增强功能检测的思想。您不应期望您的应用在每台设备上的工作方式都相同。数十亿台设备在不同国家/地区的上下文和能力的多样性使 PWA 成为一个出色的平台,这要归功于它们的渐进性。

这意味着您需要分层开发您的应用,这些层可能并非在每台设备上都可用,并且在使用前检查可用性。

您需要使用 JavaScript 检查 API 是否存在,然后再使用它,或者询问 API 服务在该特定设备上是否可用。

强大的 Web

如今,Web 非常强大。例如

  • 您可以使用 WebRTC、地理位置和推送消息构建超本地视频聊天应用。
  • 您可以使应用可安装。
  • 您可以使用 WebAssembly 添加视频效果。
  • 您甚至可以使用 WebGL 和 WebXR 将其带入虚拟现实。

增强您的 PWA 功能

让我们将 PWA 功能 API 分为四组

  • 绿色:技术上可行时,每个平台上的每种浏览器都可用的 API。其中大多数已经发布多年,被认为是成熟的,您可以放心地使用它们。此组中的一个示例 API 是地理位置 API。
  • 浅绿色:仅在某些浏览器上可用的 API。考虑到某些平台上缺乏支持,它们在受支持的浏览器子组中成熟,因此您可以在这些浏览器上放心地使用该功能。此组中的一个示例 API 是 WebUSB。
  • 黄色:实验性 API。这些 API 尚未成熟;它们仅在某些浏览器上可用,并且在测试或试验中。我们在实验章节中讨论了其中一些功能。
  • 红色:您无法在 PWA 中使用的 API 组,并且添加它们的计划仍然是长期的。此组中的一个示例 API 是地理围栏。

绿色功能

以下是您可以在 PWA 中使用的一些最重要的功能列表。

基础功能

  • 使用 Cache API 在本地缓存文件,如缓存章节中所见。
  • 使用 Web Worker 在线程中执行任务,如我们在复杂性管理章节中所见。
  • 在 Service Worker 中使用不同的策略管理网络请求,如Service Worker 章节中所见。
  • 2D Canvas,用于使用 Canvas API 在屏幕上渲染 2D 图形。
  • 2D 和 3D 高性能 Canvas,或 WebGL,用于渲染 3D 图形。
  • WebAssembly,或 WASM,用于执行低级编译代码以提高性能。
  • 实时通信,使用 WebRTC API
  • Web 性能 API,用于衡量和帮助提供更好的体验。有关更多信息,请参阅性能 API 指南
  • 使用 IndexedDB 和存储管理在本地存储数据,以查询配额和请求持久存储,如离线数据章节中所见。
  • 低级音频,这要归功于 Web Audio API
  • 前台检测,使用 Page Visibility API
  • 网络通信,使用 Fetch APIWebSocket API

硬件和传感器

操作系统集成

浅绿色功能

以下是您可以在 PWA 中使用的一些最重要的功能列表,但需要注意的是,它们可能并非在每种浏览器上都可用。

基础功能

  • WebGL 2.0WebGL 规范的新版本,以匹配 OpenGL 3.0。
  • 编解码器,对视频流的各个帧和音频块的低级访问;对于需要完全控制媒体处理方式的 Web 应用程序非常有用,通过 Web Codecs API

硬件和传感器

  • 环境光,除了 Sensors API 之外,还可以读取设备周围环境光的当前光照水平或照度。
  • 振动,如果设备支持,则在发生某些事情时通过 Vibration API 为用户提供触觉反馈。
  • 录制媒体,捕获 MediaStream 或 HTMLMediaElement 对象(例如 <video> 标签)生成的数据,以便进行分析、处理或保存到磁盘,这要归功于 MediaRecorder API
  • 应用屏幕唤醒锁,当您的 PWA 需要保持运行时,防止设备变暗或锁定屏幕,使用 Screen Wake Lock API
  • 虚拟现实,使您能够在 PWA 中使用头戴式耳机和其他设备,这要归功于 WebXR Device API
  • 增强现实,可以在您的 PWA 中以多种方式实现,例如使用 WebXR Device APISafari Quick Look 应用(用于 AR 内容)
  • 检测不活跃用户,使用 Idle Detection API
  • 方向锁定,当 PWA 在屏幕上时,将方向锁定为纵向或横向,这要归功于 Screen Orientation API,或安装应用的 Web App Manifestorientation 属性。
  • 在投影仪和辅助显示器上呈现内容,这要归功于 Presentation API
  • 锁定指针,以接收来自指针(鼠标、触控板和指针)的增量移动信息,而不是位置值——对于某些游戏很有用——这要归功于 Pointer Lock API

操作系统集成

资源