强大的 PWA

虽然一些 PWA 功能广为人知,例如可让 Web 应用接收和发布平台通知的 Notifications API,但还有许多新的和即将推出的功能将登陆 Web,让您的应用如虎添翼。Chromium Web Capabilities 项目(也称为 Project Fugu 🐡)旨在实现新的强大 Web 标准,同时保留 Web 的独特之处:以用户为中心的安全、低摩擦和跨平台兼容性。

弥合应用差距

这些功能大多旨在弥合传统桌面应用或移动应用与 Web 应用之间的差距,首批发布的主要功能包括:允许 Web 应用访问平台的联系人选择器分享功能,以及允许已安装的 PWA 注册为平台分享目标显示图标标记等等

每项功能都经过广泛的标准化流程,以征求社区反馈意见,帮助完善 API 并确保最终设计安全、私密且值得信赖。新功能会在公开跟踪器中进行跟踪,并可分为以下五类之一:

已发货

可在最新稳定版 Chrome 中使用。只要正确检测到其使用情况,就可以可靠地使用。

在 Origin 试用版中

以 Chrome 源试用 (OT) 的形式提供,允许 Chrome 团队在实际使用中验证实验性功能和 API,并允许您就 API 的可用性和有效性提供反馈。OT 是选择启用的,可让您与用户一起对该功能进行 Beta 版测试,而无需用户在浏览器中切换任何特殊标志。API 可能会在 OT 之后发生变化,并且 OT 保证在发布前的一段时间内不可用,因此不应将其视为新 API 的早期发布机制。

在开发者试用版中

在 Chrome 中通过功能开关提供。这些 API 仍处于实验阶段,并且仍在积极开发中。它们适合投入生产环境,很可能存在 bug,并且 API 会发生变化。虽然开发者可以利用这段时间自行试用实验性功能,但不应指示用户启用标志来使用其功能。

开通时间:

开发已开始,但目前尚无可用的 API。

正在考虑

用户表示感兴趣但尚未开始实现的 API。如果某个 API 尚未启动,请为其添加星标或在相应问题中添加您的使用情形,以帮助 Chromium 团队确定其优先级。

增强 PWA

在构建 PWA 时,请考虑实现以下 API 和最佳实践,以大幅提升 Web 应用的体验。按一般使用情形细分,您的应用可能会受益于一个或多个 API,从而提升整体用户体验。标记为 🔮 的 API 处于源试用阶段,标记为 🚩 的 API 处于开发者试用阶段,标记为 📱 的 API 目前在移动设备上处于稳定状态,并且桌面版实现已开始,提及的任何其他 API 均处于稳定状态(尽管可能并非在所有平台上都可用)。此列表仅包含 Chrome 当前稳定版、Beta 版(标记为 β)或 Canary 版(标记为 α)中提供的 API;此列表会定期更新,以反映已发布的 API。

应用安装

如果您希望 Web 应用与其他已安装的应用(例如任务栏、启动器、桌面和应用切换器中的应用)一起提供,请考虑实现以下 API,以便您的 PWA 可安装。也可以选择按照此 Codelab 中的说明操作。

  • Web 应用清单 - 向浏览器和操作系统提供有关 Web 应用的信息,例如名称、徽标、启动应用的网址以及如何显示 Web 应用。
  • Service Worker 和 Cache Storage API - 允许您的 Web 应用创建代理服务器并控制浏览器缓存的处理方式。可对浏览器的 fetch 事件做出反应,并且在离线时能够使用内容响应 Web 应用清单中指定的起始网址的 fetch 请求的 Service Worker 是可安装性的必要条件。
  • 登录时运行 🚩Beta - 允许您将 PWA 配置为在用户登录时自动启动。
  • 应用图标快捷方式 - 在受支持的平台上,通过已安装的应用图标的上下文菜单(即在移动设备上长按,在桌面设备上右键点击),提供指向 Web 应用中特定网址的快捷方式(例如,开始聊天、上传照片等)。
  • getInstalledRelatedApps - 允许您的 Web 应用检查您的 PWA、Android 应用或 Windows (UWP) 应用是否已安装。

自适应且易于访问

如果您希望不同设备和不同身体和/或心理需求的用户都能使用您的 Web 应用,则应考虑实现以下功能:

  • 自适应设计 - 确保您的 Web 应用在从小到大的各种屏幕尺寸下都能提供可用的(或至少不损坏的)体验,以便不同设备和窗口放置位置的用户都能使用您的应用。
  • WCAG 2.0 指南 - 确保您的 Web 应用可供各种身体和心理能力的用户使用,而不仅仅是神经典型和身体健全的个人。另请参阅英国政府的无障碍设计注意事项

创收和分发

  • Web Payments - 灵活的标准在线支付界面,旨在适用于任何浏览器或设备,并与任何支付方式或支付服务提供商搭配使用。
  • Digital Goods API 🔮 - 灵活的标准接口,用于从 Web 应用查询和管理应用内购买交易,包括支持常见购买类型,例如一次性购买、可重复购买(例如游戏内宝石/货币)和订阅。与 Web Payments 搭配使用。
  • 可信 Web 活动 - 为您的 PWA 创建 Android 应用,以便在兼容的商店(例如 Google Play)中上架供用户下载。

剪贴板访问权限

  • 异步剪贴板 - 读取和写入用户剪贴板中的文本和图片,并监听用户的复制和粘贴事件。

通知

如果您的 Web 应用需要通知用户(例如聊天应用或正在处理的后台编码),您可能需要考虑实现以下 API:

  • 网页推送通知 - 用户选择启用后,允许您的 Web 应用向其推送通知。
  • Badging API - 允许已安装的 Web 应用在应用图标上设置应用范围的标记(可选,可带数字)。
  • 通知触发器 🔮 - 在满足触发条件(例如基于时间或位置的条件)时向用户发送通知(例如日历活动通知)

意向共享和协议处理

  • 网址协议注册 🚩α - 使 Web 应用能够使用其安装清单将自己注册为自定义网址协议/方案的处理程序。
  • Web Share - 在支持的设备上使用内置的系统分享界面,将网址、文本和文件分享到设备上安装的其他应用。您的应用无需安装。
  • Web Share Target - 在受支持的设备上,让已安装的 PWA 在内置的系统分享界面中可用,以便用户能够从其他应用向您的应用分享文本和文件。

打开和保存文件

  • 文件处理 API 🚩 - 让已安装的 Web 应用向操作系统注册其处理(读取/流式传输/编辑)具有给定 MIME 类型和/或文件扩展名的文件的能力,从而允许它们成为上下文菜单的“打开方式…”列表中的选项。
  • File System Access API - 每次会话都可对用户的文件系统进行可靠的访问,从而实现以下互动(根据应用的需求)
    • 从本地文件系统读取文件 - 显示文件选择器,并允许用户选择一个或多个(可选)要打开的文件,包括按 MIME 类型和扩展名限制允许的文件类型。
    • 将更改保存到打开的文件 - 直接将更改保存到通过 FSA 打开的文件,而无需提示用户选择将文件保存到何处或让用户下载副本。
    • 在本地文件系统上创建新文件 - 允许用户在本地文件系统上创建新文件(可以选择使用默认文件扩展名),然后您的应用可以访问该文件以进行保存。
    • 最近打开的文件 - 使用 FSA 创建的文件句柄可以存储在 IndexedDB 中,以便您在用户会话之间显示最近使用的文件列表(不过编辑权限在会话之间仍然不会持久存在)
    • 读取、写入和操作目录 - 允许用户在其本地文件系统上选择一个目录,然后您的应用可以读取该目录的内容,在该目录中创建、读取和删除文件和子目录,并确定相对文件路径。
  • 压缩流 - 使用 gzipdeflate 压缩算法进行压缩或解压缩。

窗口管理

  • 全屏 API - 允许用户让网页应用中的某个元素(例如视频)占据整个屏幕
  • 跨屏幕窗口放置 API 🔮 - 允许 Web 应用获取有关已连接显示屏的信息,并相对于这些显示屏定位窗口,从而实现多窗口、多显示屏 Web 应用。
  • 标签页式应用显示模式 🚩 - 允许已安装的网络应用显示在一个或多个标签页中,而不仅仅是在单个窗口中显示。

更深入的操作系统集成

  • Local Fonts API 🔮 - 允许 Web 应用列出本地安装的字体,并请求低级别(面向字节)的 SFNT 容器访问权限,其中包括完整的字体数据,从而使应用能够自定义呈现本地安装的字体。
  • 唤醒锁定 - 允许您的 Web 应用防止屏幕进入休眠状态,从而使您的 Web 应用能够执行长时间运行的任务,而不必担心中断(例如文件转码或在烹饪时保持菜谱显示)
  • 空闲检测 🔮 - 允许您的 Web 应用检测用户何时未在积极使用其设备。

扩大了离线支持范围

如果您希望 Web 应用在离线状态下也能更好地运行,不妨考虑实现以下 API:

  • 后台同步 - 在离线状态下,将需要连接的请求排入队列,然后在有网络连接时在后台同步 Web 应用的数据,而不是完全不处理离线请求。例如,允许在重新联网后发送消息或同步文档的增量更改。
  • 定期后台同步 - 允许已安装且经常使用的 Web 应用根据经过的最短时间定期唤醒其服务工作线程并运行,例如更新缓存,以便在用户打开应用时内容是最新的。
  • Content Indexing API - 让您的 Web 应用告知浏览器哪些内容可离线使用,以便浏览器向用户显示这些内容。
  • 后台提取 - 允许长时间运行的后台提取操作,例如下载电影或上传视频和图片,而不会有服务工作线程被终止的风险。

媒体流式传输、编码和解码

如果您的 Web 应用会播放媒体文件(例如视频或音频文件),您可能需要考虑实现以下 API:

  • 自适应流式传输 - 允许视频流根据网络性能在不同比特率之间切换
  • 画中画 - 允许用户将视频从您的 Web 应用中弹出到始终位于顶部的窗口中,然后可以独立移动和调整该窗口的大小
  • 媒体会话 API - 允许用户使用硬件和操作系统级软件功能(例如键盘或锁定屏幕上的播放/暂停/停止按钮)控制 Web 应用的媒体播放,以及控制操作系统级媒体通知(例如标题、艺术家、专辑和封面)
  • Chromecast API - 允许用户将媒体投放到可用的 Chromecast 接收器,例如在电视上播放来自您的 Web 应用的视频。
  • Web Codecs 🔮 - 访问内置的硬件和软件媒体编码器和解码器,可用于低延迟直播等实时用例,以及文件的编码、解码和转码。

扩展输入支持

  • 指针事件 - 使用单个 API 响应触控、触控笔和鼠标事件,为用户提供更多输入选项。另请参阅有关触控友好型界面以及用户输入和控件的最佳实践。
  • GamePad API - 允许您的 Web 应用响应来自常见游戏手柄的输入
  • Web HID 🚩 - 允许您的 Web 应用访问非标准的人机接口设备(例如自定义控制器)

高级外围设备支持

  • Web USB - 允许您的 Web 应用从应用访问非标准(即键盘和鼠标)USB 设备
  • 串行 API 🔮 - 添加了一个 API,用于通过物理或虚拟串行端口与硬件设备通信。

PWA 核对清单

准备好开始使用这些强大的新 API 来增强 PWA 了吗?选择以下用例之一,查看推荐使用的一组 API;您也可以自行创建核对清单,然后努力完成它!