用户交互- 移动Web 应用路线图

越来越多的移动设备依赖于触控。尽管在Web平台中公认的传统交互方式（键盘、鼠标输入）仍然可以在这种情况下应用，但更具针对性地处理触控输入是创建适应性良好的用户体验的关键因素，文档对象模型中的触摸事件可以解决这个问题。

指针事件规范定义了一个鼠标、触摸和笔事件的统一模型。它为触摸事件提供了一种互补且更加统一的方法。指针事件包括允许过滤元素上的手势事件的 CSS 属性


     touch-action

，并在浏览器中广泛实现。

振动 API 让移动开发者利用触觉反馈来创建新的交互形式（例如在游戏中）。

移动设备被用户随身携带，许多移动用户依赖它们去提醒和通知自己事件，如消息。 Web通知规范使这种特性在 Web 环境中可用。

Web开发者可从遵从编辑工具可访问性指南（ATAG）2.0 的编辑工具中获益，ATAG提供了改善编辑工具本身的可访问性的指南和帮助编辑工具生成的内容符合WCAG标准的指南。

移动信息无障碍文档解释了将WCAG和其他无障碍指南应用于移动Web应用、原生应用和在原生应用中包含Web应用组件的混合应用的方法。

可访问富互联应用（WAI-ARIA）1.1 标准提供了一个角色、状态和属性的本体，这个本体定义了可访问的用户界面元素，并可用于改进Web内容和应用的可访问性和互操作性。核心可访问API映射1.1 标准描述了用户代理如何将这些语义映射到无障碍API中。但是，移动平台还没有全面的可访问性API映射，这些映射目前只在桌面平台上才可使用。

特性	规范 / 小组	成熟度	现有实现选择浏览器… Chrome Microsoft Edge Firefox Safari / WebKit 百度浏览器 Opera QQ浏览器三星浏览器 UC浏览器
基于触控的交互	触摸事件 (Touch Events) Web Events Working Group		已有稳定实现: 在 Chrome（桌面, 移动）中已有稳定实现。来源：Chrome Platform Status 在 Microsoft Edge（桌面）中已有稳定实现。来源：Microsoft Edge Platform Status 在 Firefox（桌面, 移动）中已有稳定实现。来源：Can I use 在 Safari（桌面, 移动）中已有稳定实现。来源：Chrome Platform Status 在百度浏览器（移动）中已有稳定实现。来源：Can I use 在 Opera（桌面）中已有稳定实现。来源：Can I use 在 QQ浏览器（移动）中已有稳定实现。来源：Can I use 在三星浏览器（移动）中已有稳定实现。来源：Can I use 在 UC浏览器（移动）中已有稳定实现。来源：Can I use
指针事件 (Pointer Events) Pointer Events Working Group		已有稳定实现: 在 Chrome（桌面, 移动）中已有稳定实现。来源：Chrome Platform Status 在 Microsoft Edge（桌面）中已有稳定实现。来源：Microsoft Edge Platform Status 在 Firefox（桌面）中已有稳定实现。来源：Can I use 在 Safari（桌面, 移动）中已有稳定实现。来源：Can I use 在 Opera（桌面）中已有稳定实现。来源：Can I use 在三星浏览器（移动）中已有稳定实现。来源：Can I use
指针事件中的touch-action (touch-action in Pointer Events) Pointer Events Working Group		已有稳定实现: 在 Chrome（桌面, 移动）中已有稳定实现。来源：Chrome Platform Status 在 Microsoft Edge（桌面）中已有稳定实现。来源：Microsoft Edge Platform Status 在 Firefox（桌面, 移动）中已有稳定实现。来源：Can I use 在 Safari（桌面, 移动）中已有稳定实现。来源：MDN Browser Compatibility Data 在百度浏览器（移动）中已有稳定实现。来源：Can I use 在 Opera（桌面, 移动）中已有稳定实现。来源：Can I use 在 QQ浏览器（移动）中已有稳定实现。来源：Can I use 在三星浏览器（移动）中已有稳定实现。来源：Can I use 在 UC浏览器（移动）中已有稳定实现。来源：Can I use
振动	振动 API (Vibration API (Second Edition)) 设备与传感器工作组 (Devices and Sensors Working Group)		已有稳定实现: 在 Chrome（桌面, 移动）中已有稳定实现。来源：Chrome Platform Status 在 Firefox（桌面, 移动）中已有稳定实现。来源：Can I use 在百度浏览器（移动）中已有稳定实现。来源：Can I use 在 Opera（桌面）中已有稳定实现。来源：Can I use 在 QQ浏览器（移动）中已有稳定实现。来源：Can I use 在三星浏览器（移动）中已有稳定实现。来源：Can I use 在 UC浏览器（移动）中已有稳定实现。来源：Can I use 考虑实现: 在 Microsoft Edge（桌面）中考虑实现。来源：Microsoft Edge Platform Status
通知	Web 通知 (Web Notifications) Web Notification Working Group		已有稳定实现: 在 Chrome（桌面, 移动）中已有稳定实现。来源：Chrome Platform Status 在 Microsoft Edge（桌面）中已有稳定实现。来源：Microsoft Edge Platform Status 在 Firefox（桌面, 移动）中已有稳定实现。来源：Can I use 在 Safari（桌面）中已有稳定实现。来源：Can I use 在 Opera（桌面）中已有稳定实现。来源：Can I use
信息无障碍	用户代理无障碍指南（UAAG）2.0 (User Agent Accessibility Guidelines (UAAG) 2.0) 用户代理无障碍指南工作组 (User Agent Accessibility Guidelines Working Group)
UAAG 2.0 参考 (UAAG 2.0 Reference: Explanations, Examples, and Resources for User Agent Accessibility Guidelines 2.0) 用户代理无障碍指南工作组 (User Agent Accessibility Guidelines Working Group)
Web 内容可访问性指南（WCAG）2.1 (Web Content Accessibility Guidelines (WCAG) 2.1) 无障碍指南工作组 (Accessibility Guidelines Working Group)
编辑工具可访问性指南（ATAG）2.0 (Authoring Tool Accessibility Guidelines (ATAG) 2.0) Authoring Tool Accessibility Guidelines Working Group
移动无障碍性：WCAG 2.0和其他 W3C 无障碍计划如何应用到移动设备 (Mobile Accessibility: How WCAG 2.0 and Other W3C/WAI Guidelines Apply to Mobile) 无障碍指南工作组 (Accessibility Guidelines Working Group) 用户代理无障碍指南工作组 (User Agent Accessibility Guidelines Working Group)
可访问富互联应用 1.1 (Accessible Rich Internet Applications (WAI-ARIA) 1.1) Accessible Rich Internet Applications Working Group		已有稳定实现: 在 Chrome（桌面, 移动）中已有稳定实现。来源：Chrome Platform Status 在 Microsoft Edge（桌面）中已有稳定实现。来源：Microsoft Edge Platform Status 在 Firefox（桌面, 移动）中已有稳定实现。来源：Can I use 在 Safari（桌面, 移动）中已有稳定实现。来源：Can I use 在百度浏览器（移动）中已有稳定实现。来源：Can I use 在 Opera（桌面）中已有稳定实现。来源：Can I use 在 QQ浏览器（移动）中已有稳定实现。来源：Can I use 在三星浏览器（移动）中已有稳定实现。来源：Can I use
核心可访问API映射 1.1 (Core Accessibility API Mappings 1.1) Accessible Rich Internet Applications Working Group

开发中的技术

游戏手柄规范定义了一个与连接到设备的游戏手柄（例如通过蓝牙与智能手机配对的游戏手柄设备）交互的底层接口。

随着越来越多的内容被呈现为很长的可滚动列表，越来越多的逻辑被附加到滚动事件上，而且这些动作的用户体验的质量高度依赖于它们的性能。 CSSOM 视图模块确定滚动事件何时被触发，并让开发者指定他们想要的滚动行为的类型。

CSS 滚动捕捉点的提议通过定义当用户移动页面时应用视图捕捉的点，大大增加了控制平移和滚动行为的能力。

CSS 的 will-change 属性也可以向浏览器指示将会很快被滚动到的部分并指示这部分应该被预渲染。

推送API 使服务器端的通知可以提醒用户，即使是在浏览器没有运行的情况下。

不论用户使用语音向它们的应用设备下达命令还是通过非触觉交互来处理这些命令，他们都面临着由于屏幕保护程序导致的屏幕自动关闭的风险。唤醒锁 API 让开发者在这种情况下保持屏幕不锁定。

特性	规范 / 小组	现有实现选择浏览器… Chrome Microsoft Edge Firefox Safari / WebKit 百度浏览器 Opera QQ浏览器三星浏览器 UC浏览器
游戏控制器	游戏手柄 (Gamepad) Web 应用工作组 (Web Applications Working Group)	已有稳定实现: 在 Chrome（桌面, 移动）中已有稳定实现。来源：Chrome Platform Status 在 Microsoft Edge（桌面）中已有稳定实现。来源：Microsoft Edge Platform Status 在 Firefox（桌面, 移动）中已有稳定实现。来源：Can I use 在 Safari（桌面, 移动）中已有稳定实现。来源：Can I use 在百度浏览器（移动）中已有稳定实现。来源：Can I use 在 Opera（桌面）中已有稳定实现。来源：Can I use 在 QQ浏览器（移动）中已有稳定实现。来源：Can I use 在三星浏览器（移动）中已有稳定实现。来源：Can I use 在 UC浏览器（移动）中已有稳定实现。来源：Can I use
平滑滚动	CSSOM视图模块 (CSSOM View Module) CSS 工作组 (CSS Working Group)	已有稳定实现: 在 Chrome（桌面, 移动）中已有稳定实现。特性支持可能不完整。来源：Can I use 在 Firefox（桌面, 移动）中已有稳定实现。特性支持可能不完整。来源：Can I use 在 Safari（桌面, 移动）中已有稳定实现。特性支持可能不完整。来源：Can I use 在百度浏览器（移动）中已有稳定实现。特性支持可能不完整。来源：Can I use 在 Opera（桌面, 移动）中已有稳定实现。特性支持可能不完整。来源：Can I use 在三星浏览器（移动）中已有稳定实现。特性支持可能不完整。来源：Can I use 在 UC浏览器（移动）中已有稳定实现。特性支持可能不完整。来源：Can I use 已有实验性实现: 在 Microsoft Edge（桌面）中已有实验性实现。特性支持可能不完整。来源：Can I use 在 QQ浏览器（移动）中已有实验性实现。特性需要开启浏览器实验性功能。特性支持可能不完整。来源：Can I use
	CSS 滚动捕捉点第一版 (CSS Scroll Snap Module Level 1) CSS 工作组 (CSS Working Group)	已有稳定实现: 在 Chrome（桌面, 移动）中已有稳定实现。来源：Chrome Platform Status 在 Firefox（桌面, 移动）中已有稳定实现。来源：Can I use 在 Safari（桌面, 移动）中已有稳定实现。来源：Can I use 在 Opera（桌面）中已有稳定实现。来源：Can I use 在三星浏览器（移动）中已有稳定实现。来源：Can I use 已有实验性实现: 在 Microsoft Edge（桌面）中已有实验性实现。特性需要使用浏览器引擎前缀。来源：Microsoft Edge Platform Status
	CSS Will Change Module Level 1 CSS 工作组 (CSS Working Group)	已有稳定实现: 在 Chrome（桌面, 移动）中已有稳定实现。来源：Chrome Platform Status 在 Firefox（桌面, 移动）中已有稳定实现。来源：Can I use 在 Safari（桌面, 移动）中已有稳定实现。来源：Can I use 在百度浏览器（移动）中已有稳定实现。来源：Can I use 在 Opera（桌面）中已有稳定实现。来源：Can I use 在 QQ浏览器（移动）中已有稳定实现。来源：Can I use 在三星浏览器（移动）中已有稳定实现。来源：Can I use 在 UC浏览器（移动）中已有稳定实现。来源：Can I use 考虑实现: 在 Microsoft Edge（桌面）中考虑实现。来源：Microsoft Edge Platform Status
通知	推送 API (Push API) Web 应用工作组 (Web Applications Working Group)	已有稳定实现: 在 Chrome（桌面, 移动）中已有稳定实现。来源：Chrome Platform Status 在 Microsoft Edge（桌面）中已有稳定实现。来源：Microsoft Edge Platform Status 在 Firefox（桌面, 移动）中已有稳定实现。来源：Can I use 在 Opera（桌面）中已有稳定实现。来源：Can I use 在 QQ浏览器（移动）中已有稳定实现。来源：Can I use 在三星浏览器（移动）中已有稳定实现。来源：Can I use 在 UC浏览器（移动）中已有稳定实现。来源：Can I use
屏幕唤醒	唤醒锁 API (Wake Lock API) 设备与传感器工作组 (Devices and Sensors Working Group)

探索性工作

移动设备，特别是手机，在很多情况下也非常适合语音交互；语音 API 社区组开发了一个JavaScript API 来支持通过口头命令与网页进行交互。语音合成在浏览器中有很好的支持。对语音识别的支持仍在进行中。

输入法 API 允许脚本通过用户代理访问输入法。该规范目前需要更多的编辑工作。

输入设备能力API 提供了“鼠标”事件是否来自触摸设备的信息。

游戏手柄有各种各样的类型，从一般的游戏机手柄到如吉他、踏板、跳舞毯、魔术棒、VR/AR控制器等定制设备，这些设备中的每一种都有自己的输入和输出方式，需要映射到操作系统的原生API，以便 Web 应用使用他们。 WebHID 提议将大多数设备使用的 HID 协议暴露给 Web 应用，使他们在浏览器缺乏支持时通过基于 JavaScript 的逻辑实现。展望未来，该提案还可以简化智能手机与各种有形用户界面之间的集成。

除了 Web通知以外，标记 API 定义了另一种通知机制，允许已经安装在设备上的 Web 应用（例如通过清单文件）设置一个标记，通常显示在主屏幕上应用程序的图标旁边，在应用程序的状态发生变化时通知用户可能需要注意的信息（如新消息）。

需要运行长任务的应用（例如在加载页面时）需要在快速加载页面（或减少任务执行时间）与快速响应输入之间进行权衡。输入事件的早期检测规范提出了 isInputPending 方法，长时间运行的脚本可以同步调用，而不会浪费时间在其他脚本和事件处理上，以检测是否有未处理的输入事件，这些事件的执行可能会延迟触发。

目前，所有的 DOM 事件都需要通过主线程，因为主线程是唯一可以访问 DOM 元素的线程。 Input for Workers and Worklets 规范为 worker 提供了一个没有 DOM 访问权限的 event delegation scheme。这种机制将启用对延迟敏感的事件逻辑，该逻辑将不被主线程阻止。这个特性的用例包括在 OffscreenCanvas 上绘制、需要将输入事件转发到服务器以最小延迟进行处理的云场景（如云游戏）、与 CSS Animation Worklet 结合的交互式动画（其中动画由用户输入驱动）和与 AudioWorklet 结合使用的交互式音频。

特性	规范 / 小组	实现意向选择浏览器… Chrome Microsoft Edge Firefox Safari / WebKit 百度浏览器 Opera QQ浏览器三星浏览器 UC浏览器
基于语音的交互	Web 语音 API中的语音合成 (Speech synthesis in Web Speech API) 语音 API 社区组 (Speech API Community Group)	已有稳定实现: 在 Chrome（桌面, 移动）中已有稳定实现。来源：Chrome Platform Status 在 Microsoft Edge（桌面）中已有稳定实现。来源：Microsoft Edge Platform Status 在 Firefox（桌面, 移动）中已有稳定实现。来源：Can I use 在 Safari（桌面, 移动）中已有稳定实现。来源：Can I use 在 Opera（桌面）中已有稳定实现。来源：Can I use 在 QQ浏览器（移动）中已有稳定实现。来源：Can I use 在三星浏览器（移动）中已有稳定实现。来源：Can I use 已有实验性实现: 在百度浏览器（移动）中已有实验性实现。特性需要使用浏览器引擎前缀。特性支持可能不完整。来源：Can I use
基于语音的交互	Web 语音 API中的语音识别 (Speech recognition in Web Speech API) 语音 API 社区组 (Speech API Community Group)	已有稳定实现: 在 Firefox（移动）中已有稳定实现。特性支持可能不完整。来源：Can I use 在 Safari（移动）中已有稳定实现。特性支持可能不完整。来源：Can I use 在 Opera（桌面）中已有稳定实现。特性支持可能不完整。来源：Can I use 已有实验性实现: 在 Chrome（桌面, 移动）中已有实验性实现。特性需要使用浏览器引擎前缀。来源：Chrome Platform Status 在 Firefox（桌面）中已有实验性实现。特性需要开启浏览器实验性功能。来源：Can I use 在百度浏览器（移动）中已有实验性实现。特性需要使用浏览器引擎前缀。来源：Can I use 在 QQ浏览器（移动）中已有实验性实现。特性需要使用浏览器引擎前缀。来源：Can I use 在三星浏览器（移动）中已有实验性实现。特性需要使用浏览器引擎前缀。来源：Can I use 考虑实现: 在 Microsoft Edge（桌面）中考虑实现。来源：Microsoft Edge Platform Status
输入法	输入法 API (Input Method Editor API) Web 平台工作组 (Web Platform Working Group)	已有实验性实现: 在 Microsoft Edge（桌面）中已有实验性实现。特性需要使用浏览器引擎前缀。来源：Microsoft Edge Platform Status 开发中: 在 Chrome（桌面, 移动）中开发中。来源：Chrome Platform Status
基于触控的交互	输入设备能力 (Input Device Capabilities) Web 平台孵化社区组 (Web Platform Incubator Community Group)	已有稳定实现: 在 Chrome（桌面, 移动）中已有稳定实现。来源：Chrome Platform Status 考虑实现: 在 Microsoft Edge（桌面）中考虑实现。来源：Chrome Platform Status
游戏控制器	WebHID Web 平台孵化社区组 (Web Platform Incubator Community Group)	已有实验性实现: 在 Chrome（桌面）中已有实验性实现。特性需要开启浏览器实验性功能。来源：Chrome Platform Status
通知	标记 API (Badging API) Web 平台孵化社区组 (Web Platform Incubator Community Group)	已有实验性实现: 在 Chrome（桌面）中已有实验性实现。特性需要使用浏览器引擎前缀。来源：Chrome Platform Status 考虑实现: 在 Microsoft Edge（桌面）中考虑实现。来源：Chrome Platform Status 在 Firefox（桌面）中考虑实现。来源：Chrome Platform Status
反应性	输入事件的早期检测 (Early detection of input events) Web 平台孵化社区组 (Web Platform Incubator Community Group)	开发中: 在 Chrome（桌面, 移动）中开发中。来源：Chrome Platform Status
输入延迟	Input for Workers and Worklets Web 平台孵化社区组 (Web Platform Incubator Community Group)

广泛部署的技术

开发中的技术

探索性工作

目前尚未覆盖的工作

不再进行的工作

发现了缺少的东西？