功能

渐进式 Web 应用不仅可以在屏幕上渲染内容或连接到网络服务,PWA 可以处理来自文件系统的文件,与系统的剪贴板交互,访问连接到设备的硬件,等等。每个 Web API 都适用于您的 PWA,用户在安装应用时还会有一些额外的 API 可用。

您可以通过 What Web Can Do Today 了解每个平台上都有哪些功能。对于个别 API 或功能,请参阅 Can I Use 页面或 MDN 上的浏览器兼容性表格。

PWA 中的第一个字母代表渐进式,源于渐进式增强功能检测的概念。您不应期望您的应用在所有设备上都以同样的方式运行。鉴于 PWA 具有进步性,其在不同国家/地区的数十亿台设备上具有多样化的情境和能力,这使得 PWA 成为一个出色的平台。

这意味着,您需要在不同设备上分层开发应用,并在使用前检查应用的可用性。

您需要在使用某个 API 之前通过 JavaScript 检查该 API 是否存在,或者询问某个 API 在该特定设备上是否提供该 API。

强大的 Web

如今的网络极其强大。例如:

  • 您可以构建使用 WebRTC、地理定位和推送消息的比邻商家视频聊天应用。
  • 您可以将应用设为可安装。
  • 您可以使用 WebAssembly 添加视频特效。
  • 您甚至可以使用 WebGL 和 WebXR 将模型变为虚拟现实。

为 PWA 赋能

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

  • 绿色:在技术上可行的情况下,可在所有平台上的每个浏览器上使用的 API。其中大多数已发货多年,被视为成熟,您可以放心使用。该组中的示例 API 是 Geolocation API。
  • 浅绿色:API 仅适用于某些浏览器。鉴于某些平台缺乏支持,这些平台在支持的浏览器子组中已日趋成熟,因此您可以放心地在此类平台上使用这些功能。此群组中的一个示例 API 是 WebUSB。
  • 黄色:实验性 API。这些 API 尚未成熟;它们仅在某些浏览器上可用,并且处于测试或试用阶段。我们在“实验性”章节中讨论了这些功能。
  • 红色:您不能在 PWA 中使用的 API 群组,且计划长期添加这些 API。此组中的示例 API 是地理围栏。

绿色能力

下面列出了您可以在 PWA 中使用的最重要的功能。

基础配置

  • 使用 Cache API 在本地缓存文件,如“缓存”章节中所述。
  • 使用 Web Worker 在线程中执行任务,正如我们在复杂性管理一章中看到的那样。
  • 在 Service Worker 中利用不同的策略管理网络请求,如 Service Worker 一章所述。
  • 2D 画布 - 用于使用 Canvas API 在屏幕上渲染 2D 图形。
  • 2D 和 3D 高性能画布 (WebGL),用于渲染 3D 图形。
  • WebAssembly (WASM),用于执行低级编译代码以提高性能。
  • 使用 WebRTC API 进行实时通信
  • Web Performance API,用于衡量并帮助提供更好的体验。如需了解详情,请参阅 Performance API 指南
  • 使用 IndexedDB 和存储空间管理功能在本地存储数据,以查询配额并申请永久性存储空间,如离线数据一章所述。
  • 得益于 Web Audio API低阶音频
  • 使用 Page Visibility API 进行前台检测
  • 使用 Fetch APIWebSocket API网络通信

硬件和传感器

  • 游戏手柄:用于读取来自使用 Gamepad API 与设备连接的标准游戏手柄和操纵杆的信息。
  • 使用 Web Authentication 或 WebAuthn 进行生物识别身份验证(例如人脸或指纹识别)。

操作系统集成

浅绿色功能

下面列出了您可以在 PWA 中使用的最重要的功能,需要注意的是,这些功能可能并非适用于所有浏览器。

基础知识

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

硬件和传感器

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

操作系统集成

资源