功能

渐进式 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 API 和 WebSocket 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。

操作系统集成

资源