媒体与传感器 API

共 65 题
📑 题目列表 65 题
#
★★★

1. Geolocation API + 反向地理编码(Google/Mapbox)

Geolocation API + 反向地理编码(Google/Mapbox)的工程应用是什么?

  • 定位
  • 反向地理编码
  • 权限

Geolocation API 通过 navigator.geolocation.getCurrentPosition 获取设备经纬度,需用户授权。反向地理编码(Geocoding 反向)把经纬度转为地址(Google/Mapbox 服务)。工程应用:定位服务、附近门店、地址回填。需处理权限拒绝、定位失败、精度与降级。反向编码通常调地理服务 API。

Geolocation 取坐标,反向地理编码转地址,需处理权限与降级。

#
★★

2. navigator.canShare 在能力探测与降级的工程价值

navigator.canShare 在能力探测与降级中的工程价值是什么?

  • canShare 探测
  • 降级
  • 分享

navigator.canShare 检测当前环境是否支持分享特定数据(如文件、文本),返回布尔。工程价值:调用 navigator.share 前用 canShare 探测,不支持时降级(如复制链接、下载文件),避免报错。是 Web Share API 的能力探测与优雅降级。

canShare 在 share 前探测能力,不支持时降级,提升体验。

#
★★

3. Web Share API 与 Native Share 的能力边界

Web Share API 与 Native Share 的能力边界是什么?

  • Web Share API
  • Native Share
  • 边界

Web Share API(navigator.share)调用系统/原生分享面板,分享文本、URL、文件。能力边界:需用户手势触发、仅在安全上下文与支持浏览器、文件分享支持有限(Level 2)、不能自定义分享面板。Native Share 是 OS 级能力,Web Share 只能调用它,无法替代原生 App 的分享定制。边界是"调用系统分享面板、受手势与浏览器支持限制"。

Web Share 调用原生分享面板,受手势与浏览器、文件支持限制。

#
★★

4. Web Share API(navigator.share、navigator.canShare)的文件分享

Web Share API(navigator.share、navigator.canShare)的文件分享是什么?

  • 文件分享
  • canShare
  • 降级

navigator.share 支持分享文件(files 字段),先 canShare({ files }) 检测是否支持,再分享。文件分享(Level 2)支持有限,需用户手势。工程应用:分享图片/文档到系统面板。不支持时降级(下载/复制)。工程价值是文件分享 + 能力探测降级。

文件分享用 canShare 探测后 share,不支持时降级。

#
★★

5. Window Controls Overlay API(桌面 PWA 自定义窗口控制)

Window Controls Overlay API(桌面 PWA 自定义窗口控制)是什么?

  • 窗口控制覆盖
  • 标题栏
  • PWA

Window Controls Overlay API 让桌面 PWA 在安装使用自定义标题栏时,把窗口控制按钮(最小化/最大化/关闭)区域"覆盖"到应用内容上,应用可在此区域绘制内容,扩展标题栏空间。工程价值:桌面 PWA 更像原生应用,利用标题栏空间。需声明 display_override 与 CSS env() 适配。

Window Controls Overlay 让 PWA 自定义标题栏区域,接近原生体验。

#
★★

6. window.screen.orientation/orientationchange 在横竖屏适配的工程价值

window.screen.orientation/orientationchange 在横竖屏适配中的工程价值是什么?

  • 方向
  • 事件
  • 适配

screen.orientation 提供当前方向(portrait/landscape),orientationchange 事件在方向变化时触发。工程价值:横竖屏适配(如视频横屏、游戏全屏)、响应方向变化调整布局、锁定方向(lock)。用于移动端媒体与沉浸式体验。

screen.orientation 获取方向,orientationchange 响应变化,用于横竖屏适配。

#
★★

7. Document Picture-in-Picture API 在视频与协作工具的应用

Document Picture-in-Picture API 在视频与协作工具中的应用是什么?

  • PiP
  • 窗口
  • 应用

Document Picture-in-Picture 允许把任意 DOM 内容(不只是 )放入画中画窗口,持续显示。视频用 Video PiP 已存在,Document PiP 拓展到任意内容。工程应用:视频通话窗口、协作工具、直播聊天、通知,用户切到其他页面时内容仍可见。

Document PiP 让任意内容浮窗显示,扩展视频 PiP 到协作工具。

#
★★

8. Geolocation API 在浏览器定位(GPS)的工程实践

Geolocation API 在浏览器定位(GPS)中的工程实践是什么?

  • 定位
  • 精度
  • 权限

Geolocation API 用 getCurrentPosition/watchPosition 获取位置,可配置高精度(enableHighAccuracy)与超时。工程实践:处理权限拒绝、定位失败、精度选择(GPS 耗电)、watchPosition 持续跟踪。降级:无权限时用 IP 定位或用户输入。是浏览器定位的基础。

Geolocation 定位需处理权限、精度、失败与降级。

#
★★

9. DeviceOrientation API 在陀螺仪与加速度计的现代应用

DeviceOrientation API 在陀螺仪与加速度计中的现代应用是什么?

  • 方向传感器
  • 陀螺仪
  • 应用

DeviceOrientation API 提供设备方向(欧拉角、四元数),来自陀螺仪/加速度计/磁力计。现代应用:手机游戏(重力感应)、全景视角、倾斜控制、AR。需权限(iOS 需授权)、安全上下文。工程价值是沉浸式交互与传感器应用。

DeviceOrientation 用传感器数据驱动方向,用于游戏/AR/全景。

#
★★

10. Ambient Light Sensor API(AmbientLightSensor)在环境光感应的工程价值

Ambient Light Sensor API(AmbientLightSensor)在环境光感应中的工程价值是什么?

  • 环境光
  • 自适应
  • 应用

Ambient Light Sensor API 用 AmbientLightSensor 读取环境光照度(lux)。工程价值:自适应亮度/主题(暗环境切换暗色模式)、调整 UI 对比度。需权限与安全上下文,支持有限。工程应用是环境感知的 UI 自适应。

AmbientLightSensor 读取光强,驱动明暗自适应。

#
★★

11. View Transitions API 在 SPA 单页应用的工程价值

View Transitions API 在 SPA 单页应用中的工程价值是什么?

  • 视图过渡
  • 动画
  • SPA

View Transitions API 提供跨页面/视图的平滑过渡动画(淡入淡出、滑动、缩放),在 SPA 中用于路由切换、元素状态变化。工程价值:无需手写复杂动画实现优雅过渡、浏览器优化、配合框架(React/Vue)集成。提升 SPA 视觉体验。

View Transitions 提供原生视图过渡,让 SPA 切换动画简便优雅。

#
★★

12. Proximity Sensor API 在距离感应(手机)

Proximity Sensor API 在距离感应(手机)中的工程价值是什么?

  • 距离感应
  • 传感器
  • 应用

Proximity Sensor API 用 ProximitySensor 检测物体与设备距离(如手机贴近耳朵)。工程应用:通话时靠近熄屏、交互增强。支持有限、需权限、移动端。工程价值是距离感知的交互,但支持范围窄。

ProximitySensor 检测距离,用于通话熄屏等,支持有限。

#
★★

13. Battery Status API(navigator.getBattery())在低电量提示的工程应用

Battery Status API(navigator.getBattery())在低电量提示中的工程应用是什么?

  • 电量
  • 事件
  • 应用

Battery Status API 用 navigator.getBattery() 获取电量状态(level、charging),监听电量/充电事件。工程应用:低电量提示、省电模式(降低动画/暂停后台)、充电状态检测。隐私上电量信息敏感,需谨慎展示。工程价值是电量感知的优化。

getBattery 读取电量与充电状态,驱动低电量提示与省电。

#
★★

14. Vibration API(navigator.vibrate)在触觉反馈的现代工程应用

Vibration API(navigator.vibrate)在触觉反馈中的现代工程应用是什么?

  • 振动
  • 触觉
  • 应用

Vibration API 用 navigator.vibrate(pattern) 触发设备振动,pattern 定义振动模式。工程应用:操作反馈(点击/通知)、游戏、沉浸式体验。需用户手势与权限,移动端。工程价值是触觉反馈增强交互。

vibrate 触发振动,提供触觉反馈,增强交互沉浸。

#
★★

15. Web Speech API(SpeechSynthesis、SpeechRecognition)

Web Speech API(SpeechSynthesis、SpeechRecognition)是什么?

  • 语音合成
  • 语音识别
  • 应用

Web Speech API 提供 SpeechSynthesis(文本转语音,TTS)与 SpeechRecognition(语音识别,STT)。工程应用:语音朗读、语音输入、语音助手、无障碍。需浏览器支持与权限(识别需麦克风)。工程价值是语音交互与无障碍。

SpeechSynthesis 合成语音、SpeechRecognition 识别语音,是语音交互基础。

#
★★

16. BarcodeDetector API(BarcodeDetector)在二维码扫描的现代应用

BarcodeDetector API(BarcodeDetector)在二维码扫描中的现代应用是什么?

  • 条形码检测
  • 二维码
  • 应用

BarcodeDetector 检测图像/视频中的条形码与二维码,返回格式与内容。工程应用:扫码(结合摄像头)、商品码识别、票据扫描。支持有限(Chromium)。工程价值是浏览器原生扫码,无需第三方库。

BarcodeDetector 原生检测二维码/条形码,用于扫码应用。

#
★★

17. requestPermission() 权限申请边界

requestPermission() 权限申请边界是什么?

  • 权限申请
  • 用户手势
  • 边界

requestPermission() 用于申请敏感权限(传感器、通知、位置等),需用户手势触发(安全上下文),边界:权限需用户交互、不可静默申请、拒绝后重申请需重新手势、不同 API 权限模型不同。工程上需在用户操作后申请,处理拒绝与降级。

requestPermission 需用户手势,处理拒绝与降级是边界。

#
★★

18. Hardware Permission API 在用户首次访问的提示策略

Hardware Permission API 在用户首次访问的提示策略是什么?

  • 首次访问
  • 提示时机
  • 策略

硬件权限(摄像头、传感器、位置)首次访问时提示,策略:在用户需要时(操作上下文)申请而非页面加载即申请,避免过早打扰;未授权时提供降级与说明;用 Permissions API 预查询状态。工程策略是"按需申请 + 降级 + 状态预查"。

硬件权限首次访问按需申请,避免过早打扰,提供降级。

#
★★

19. 按官方文档与 Baseline 核查各 API 浏览器支持

如何按官方文档与 Baseline 核查各 API 浏览器支持?

  • Baseline
  • 兼容性
  • 核查

Baseline(Web Platform Baseline)标注 API 的浏览器支持状态(广泛可用/新可用),配合 MDN 兼容性表核查各 API 支持。工程价值:发布前核查 API 是否满足目标浏览器,决定使用或 polyfill/降级,避免兼容性问题。是特性采用的依据。

Baseline 与 MDN 核查浏览器支持,决定特性采用与降级。

#
★★

20. Storage Buckets(Storage Buckets API)

Storage Buckets(Storage Buckets API)是什么?

  • 存储桶
  • 配额
  • 应用

Storage Buckets API 允许创建多个存储桶(不同配额、持久性),用于隔离不同用途的数据(如缓存、用户数据)。工程价值:细分存储管理与配额、优先重要数据(持久性)、避免相互影响。配合 Storage Manager 管理。

Storage Buckets 创建分离存储桶,管理配额与持久性。

#
★★

21. Gamepad API 的手柄按键与震动

Gamepad API 的手柄按键与震动是什么?

  • 手柄输入
  • 震动
  • 应用

Gamepad API 读取手柄状态(按键、摇杆、扳机),通过 gamepadconnected 事件监听连接。震动:手柄震动(vibrationActuator)反馈。工程应用:网页游戏、远程控制、沉浸式输入。工程价值是浏览器游戏与硬件输入。

Gamepad API 读取手柄输入与震动,是网页游戏输入基础。

#
★★

22. Storage Manager API (navigator.storage) 在配额管理与持久存储(persist)

Storage Manager API (navigator.storage) 在配额管理与持久存储(persist)中的工程价值是什么?

  • 配额
  • 持久存储
  • 应用

Storage Manager API 用 navigator.storage.estimate() 查询配额与用量,persist() 请求持久存储(避免浏览器清除)。工程价值:管理存储使用、请求持久化(PWA 离线数据)、监控配额。配合 Cache API/IndexedDB 管理离线数据。

navigator.storage 查询配额与请求持久存储,管理离线数据。

#
★★

23. Notifications API + Push API 在 web push 的工程价值

Notifications API + Push API 在 web push 中的工程价值是什么?

  • 通知
  • 推送
  • 工程

Notifications API 显示系统通知(Notification),Push API 接收服务端推送(PushManager 订阅),二者配合 web push:服务端推送 → 浏览器接收 → 显示通知。工程价值:离线/后台推送通知、用户触达、需 Service Worker 与权限。是 PWA 通知能力。

Push 接收推送 + Notification 显示通知,构成 web push。

#
★★

24. File Handling API(Web App 声明可打开文件类型)

File Handling API(Web App 声明可打开文件类型)是什么?

  • 文件类型
  • 打开
  • PWA

File Handling API 让已安装 PWA 在 manifest 声明可打开的文件类型,系统把这类文件交给 PWA 打开(file_handlers)。工程价值:PWA 作为文件打开器、与文件系统集成。需安装与用户选择。是桌面 PWA 的文件集成能力。

File Handling 让 PWA 声明并接收打开的文件类型。

#
★★

25. Web Share Target API(注册 App 作为分享目标)

Web Share Target API(注册 App 作为分享目标)是什么?

  • 分享目标
  • 接收
  • 应用

Web Share Target API 让已安装 PWA 在 manifest 声明成为分享目标,接收系统分享的内容(文本、文件、URL)。工程价值:PWA 出现在系统分享面板、接收分享内容。与 Web Share(发起分享)互补。

Share Target 让 PWA 接收系统分享,是分享方向的一侧。

#
★★

26. File System Access 句柄持久化(IndexedDB 存储 FileSystemHandle)与 queryPermission/requestPermission 权限再请求流程

File System Access 句柄持久化(IndexedDB 存储 FileSystemHandle)与 queryPermission/requestPermission 权限再请求流程是什么?

  • 句柄持久化
  • 权限
  • 流程

File System Access 的文件句柄(FileSystemHandle)可存入 IndexedDB 持久化,下次访问恢复。权限:句柄在会话间可能失效,用 queryPermission 检查、requestPermission 在用户手势下重新请求。流程:恢复句柄 → 查权限 → 无权限则请求 → 再操作。工程价值是持久化文件访问与权限管理。

句柄持久化 + queryPermission/requestPermission 权限再请求,是文件访问恢复流程。

#
★★

27. 拖拽上传 DataTransferItem.getAsFileSystemHandle 与目录递归遍历(values() 异步迭代器)的实现

拖拽上传 DataTransferItem.getAsFileSystemHandle 与目录递归遍历(values() 异步迭代器)的实现是什么?

  • 拖拽句柄
  • 目录遍历
  • 异步迭代

拖拽文件用 DataTransferItem.getAsFileSystemHandle 获取 FileSystemHandle,通过 kind 判断文件/目录。目录用 values() 异步迭代器递归遍历子项。工程实现:拖拽 → 取句柄 → 递归目录 → 收集文件,支持文件夹上传。工程价值是拖拽上传与目录处理。

getAsFileSystemHandle 取句柄,values() 递归遍历目录,实现文件夹上传。

#
★★

28. Screen Wake Lock API(防止屏幕休眠)

Screen Wake Lock API(防止屏幕休眠)是什么?

  • 唤醒锁
  • 防止休眠
  • 应用

Screen Wake Lock API 用 navigator.wakeLock.request('screen') 防止屏幕休眠,适合阅读、视频、演示。需释放(release)与监听 visibilitychange(页面隐藏时锁释放需重新请求)。工程价值是长时间展示/阅读时保持屏幕亮。

Wake Lock 保持屏幕唤醒,需处理释放与页面可见性。

#
★★

29. Content Index API 在离线优先应用的应用

Content Index API 在离线优先应用中的应用是什么?

  • 内容索引
  • 离线
  • 应用

Content Index API 用 ContentIndex 注册应用内的内容(文章、页面),浏览器可索引显示,离线时用户可访问已缓存内容。工程价值:离线优先应用的内容可被发现、组织、离线浏览,配合 Service Worker 缓存。是 PWA 离线内容能力。

Content Index 注册内容供离线浏览,配合 Service Worker 缓存。

#
★★

30. Content Index API(已安装 PWA 内容索引,离线可用)

Content Index API(已安装 PWA 内容索引,离线可用)是什么?

  • PWA 索引
  • 离线
  • 内容

Content Index API 让已安装 PWA 注册内容索引(文章/页面),浏览器聚合展示,离线时可访问缓存内容。工程价值:PWA 内容可被发现、搜索、离线浏览,增强离线体验。需 Service Worker 配合缓存。

Content Index 让已安装 PWA 内容可索引、离线可用。

#
★★

31. Notification Trigger API(定时通知,实验性)

Notification Trigger API(定时通知,实验性)是什么?

  • 定时通知
  • 实验性
  • 应用

Notification Trigger API 允许计划定时通知(在指定时间触发通知),无需应用运行。实验性,支持有限。工程应用:日历提醒、定时提醒。需权限与浏览器支持,按官方阶段标注。工程价值是未来的定时通知能力。

Notification Trigger 定时通知,实验性、支持有限。

#
★★

32. Pointer Lock API(FPS 与沉浸式体验)

Pointer Lock API(FPS 与沉浸式体验)是什么?

  • 指针锁定
  • 鼠标捕获
  • 应用

Pointer Lock API 用 requestPointerLock() 锁定鼠标指针,屏蔽指针移动而提供增量移动(movementX/Y),适合 FPS 游戏、3D 控制、沉浸式交互。需用户手势与退出机制(Esc)。工程价值是游戏与沉浸式鼠标控制。

Pointer Lock 捕获鼠标增量移动,适合 FPS 与沉浸式。

#
★★

33. VirtualKeyboard API(navigator.virtualKeyboard)

VirtualKeyboard API(navigator.virtualKeyboard)是什么?

  • 虚拟键盘
  • 显示控制
  • 适配

VirtualKeyboard API 提供虚拟键盘的显隐控制与几何信息(navigator.virtualKeyboard),可设置 overlay 模式、监听键盘显示/隐藏。工程价值:适配虚拟键盘(布局避让)、控制输入体验。支持移动端。工程价值是移动输入体验优化。

VirtualKeyboard 控制虚拟键盘显隐与几何,优化移动输入布局。

#
★★

34. Web OTP(OTPCredential)在短信验证码自动填充的工程价值

Web OTP(OTPCredential)在短信验证码自动填充中的工程价值是什么?

  • OTP
  • 短信验证码
  • 自动填充

Web OTP 用 navigator.credentials.get({ otp }) 请求短信验证码,浏览器自动读取短信中的验证码并填充。需特定短信格式(含域名)与权限。工程价值:验证码自动填充、减少手动输入、提升登录体验。是便捷的验证码方案。

Web OTP 自动读取短信验证码填充,提升登录体验。

#
★★

35. Web Share API Level 2(文件分享)的现代浏览器兼容与边界

Web Share API Level 2(文件分享)的现代浏览器兼容与边界是什么?

  • 文件分享
  • 兼容
  • 边界

Web Share API Level 2 支持分享文件(files),但浏览器兼容有限(桌面 Chrome/Edge、移动部分)。边界:需用户手势、canShare 探测、支持文件类型有限、不支持时降级。工程价值是文件分享能力,但需兼容处理与降级。

Level 2 文件分享兼容有限,需 canShare 探测与降级。

#
★★

36. Protocol Handling API 自定义协议的现代工程应用

Protocol Handling API 自定义协议的现代工程应用是什么?

  • 自定义协议
  • 注册
  • 应用

Protocol Handling API 让已安装 PWA 注册自定义协议(如 myapp://),系统用它打开 PWA。工程应用:PWA 作为协议处理器、深度链接、应用集成。需安装与 manifest 声明。工程价值是自定义协议与原生应用集成。

Protocol Handling 让 PWA 注册并处理自定义协议。

#
★★

37. Keyboard Lock API(navigator.keyboard.lock/unlock)在全屏游戏与快捷键场景的工程价值,以及全屏前提与 Escape 键处理?

Keyboard Lock API 在全屏游戏与快捷键场景的工程价值,以及全屏前提与 Escape 键处理是什么?

  • 键盘锁定
  • 全屏前提
  • Escape

Keyboard Lock API 用 navigator.keyboard.lock() 捕获系统按键(如 Ctrl+W),防止浏览器默认行为,适合全屏游戏与快捷键。前提:需全屏(进入全屏后锁定生效)。Escape 键通常不可拦截(浏览器保留,UX 安全)。工程价值是沉浸式游戏与快捷键控制,但需全屏且 Escape 处理受限。

Keyboard Lock 需全屏,捕获系统键,Escape 保留。

#
★★

38. Idle Detection API(IdleDetector)在协作办公/监控看板场景的用户空闲检测,与 idle-detection 权限及隐私边界?

Idle Detection API 在协作办公/监控看板场景的用户空闲检测,与 idle-detection 权限及隐私边界是什么?

  • 空闲检测
  • 权限
  • 隐私

Idle Detection API 用 IdleDetector 检测用户空闲状态(无操作),用于协作办公(在线状态、离开提示)、监控看板。需 idle-detection 权限与用户手势。隐私边界:空闲状态是敏感信息,浏览器需用户授权、避免滥用;工程上需说明用途、限制传播。工程价值是协作/看板的状态感知,但受隐私约束。

Idle 检测空闲状态,需权限且隐私敏感,需谨慎处理。

#
★★

39. Screen Wake Lock API 在长时间阅读/PDF 演示保持唤醒的工程价值

Screen Wake Lock API 在长时间阅读/PDF 演示保持唤醒的工程价值是什么?

  • 保持唤醒
  • 阅读/演示
  • 释放

Screen Wake Lock 在长时间阅读、PDF 查看、演示时保持屏幕唤醒,防止休眠中断。工程价值:阅读体验不中断、演示流畅。需处理释放(页面隐藏重获)与用户离开时释放,避免一直耗电。工程价值是长时间展示场景的体验保障。

Wake Lock 保持唤醒,需处理释放与省电。

#
★★

40. Device Memory API/Network Information API 在自适应策略的工程价值

Device Memory API/Network Information API 在自适应策略中的工程价值是什么?

  • 设备内存
  • 网络信息
  • 自适应

Device Memory API 提供设备内存(navigator.deviceMemory),Network Information API 提供网络状态(downlink、effectiveType)。自适应策略:低内存/慢网络降级(减少资源、低画质、禁用动画)、提供轻量模式。工程价值是资源适配与性能优化。

Device Memory/Network Info 提供设备与网络信息,驱动自适应降级。

#
★★

41. Screen Orientation API、Geolocation API

Screen Orientation API 与 Geolocation API 的工程应用是什么?

  • 方向
  • 定位
  • 组合

Screen Orientation API 获取/锁定屏幕方向(portrait/landscape),Geolocation API 获取位置。组合应用:横屏游戏/视频 + 位置服务,或方向感知的定位展示。工程价值:移动端横竖屏场景与定位功能结合,如地图横屏、AR 定位。

Screen Orientation 管方向,Geolocation 管位置,组合用于移动端场景。

#
★★

42. WebUSB API 在连接 USB 设备(如硬件钱包、调试器)

WebUSB API 在连接 USB 设备(如硬件钱包、调试器)中的工程应用是什么?

  • WebUSB
  • USB 设备
  • 权限

WebUSB API 允许网页连接 USB 设备(硬件钱包、调试器、外设),需用户授权(选择设备)。工程应用:硬件钱包签名、设备调试、USB 外设交互。需安全上下文与用户手势。工程价值是浏览器直接与 USB 硬件交互,但受权限与安全限制。

WebUSB 连接 USB 设备,需用户授权与安全上下文。

#
★★

43. WebHID API 在连接非标准 HID 设备(如扫码枪、读卡器)

WebHID API 在连接非标准 HID 设备(如扫码枪、读卡器)中的工程应用是什么?

  • WebHID
  • HID 设备
  • 应用

WebHID API 允许网页连接 HID 设备(扫码枪、读卡器、游戏手柄),读写 HID 报告。需用户授权。工程应用:非标准 HID 设备交互、行业设备(扫码、刷卡)。工程价值是浏览器接入 HID 硬件,但受权限与设备支持限制。

WebHID 连接 HID 设备,需授权,用于扫码枪/读卡器等。

#
★★

44. WebUSB(navigator.usb、USBDevice、USBInterface、USBConfiguration)的权限流程

WebUSB(navigator.usb、USBDevice、USBInterface、USBConfiguration)的权限流程是什么?

  • 权限
  • 设备选择
  • 流程

WebUSB 权限流程:navigator.usb.requestDevice({ filters }) 在用户手势下弹出设备选择 → 返回 USBDevice → 打开(open)→ 选择配置(selectConfiguration)→ 声明接口(claimInterface)→ 通信(transfer)。权限:设备选择即授权,可存储授权。流程是"选择设备 → 打开 → 配置 → 接口 → 传输"。

WebUSB 权限流程是用户选择设备后授权,再配置接口传输。

#
★★

45. WebUSB/WebHID 的 Permissions Policy 嵌入授权与 iframe 场景,跨域 iframe 中的硬件访问权限控制

WebUSB/WebHID 的 Permissions Policy 嵌入授权与 iframe 场景:跨域 iframe 中的硬件访问权限控制是什么?

  • Permissions Policy
  • iframe
  • 权限控制

WebUSB/WebHID 通过 Permissions Policy(Feature Policy)控制权限,跨域 iframe 需父页面授权(allow 属性)才能使用硬件。Permissions Policy 可精细控制哪些 iframe 可用 USB/HID。工程价值:跨域 iframe 的硬件访问需显式授权,防止恶意 iframe 滥用硬件。边界是 iframe 权限继承与收窄(或授予):子 iframe 仅能获得父页面允许的权限子集,且可逐层收窄。

Permissions Policy 控制 iframe 硬件访问,跨域需显式授权。

#
★★

46. WebUSB 的 TransferIn/TransferOut 与 Bulk/Interrupt/ISO 传输类型

WebUSB 的 TransferIn/TransferOut 与 Bulk/Interrupt/ISO 传输类型是什么?

  • 传输
  • 类型
  • 应用

WebUSB 用 transferIn/transferOut 读写数据,传输类型有 Bulk(大块可靠)、Interrupt(小量及时,如 HID)、Isochronous(实时等时,如音视频)。工程应用:根据设备端点类型选择传输方式,Bulk 大数据、Interrupt 外设交互、ISO 实时流。工程价值是正确匹配 USB 传输类型。

TransferIn/Out 读写,Bulk/Interrupt/ISO 按端点类型选择。

#
★★

47. Web Serial(navigator.serial)的串口调试与硬件交互

Web Serial(navigator.serial)的串口调试与硬件交互是什么?

  • 串口
  • 调试
  • 交互

Web Serial API 允许网页与串口通信(navigator.serial.requestPort 选择端口),读写串口数据。工程应用:串口调试工具、嵌入式/POS 设备交互、硬件通信。需用户授权与安全上下文。工程价值是浏览器串口通信,用于调试与设备交互。

Web Serial 连接串口通信,用于调试与硬件交互。

#
★★

48. Web Bluetooth(navigator.bluetooth)的 GATT Server/Characteristic/Descriptor

Web Bluetooth(navigator.bluetooth)的 GATT Server/Characteristic/Descriptor 是什么?

  • GATT
  • 特征
  • BLE

Web Bluetooth 连接 BLE 设备,用 GATT 协议通信:连接 GATT Server → 获取服务(service)→ 特征(characteristic)读写 → 描述符(descriptor)。需用户授权(requestDevice)。工程应用:BLE 设备(健康、穿戴、IoT)交互。工程价值是浏览器 BLE 通信。

GATT Server/Characteristic/Descriptor 是 BLE 通信层级,读特征、写描述符。

#
★★

49. WebUSB 与 WebHID 在浏览器安全权限策略(Permissions Policy / Feature Policy)

WebUSB 与 WebHID 在浏览器安全权限策略(Permissions Policy / Feature Policy)中的处理是什么?

  • 权限策略
  • 安全
  • 控制

WebUSB/WebHID 受 Permissions Policy 控制,需安全上下文。Permissions Policy 可禁用/启用硬件权限,控制 iframe 与顶层。安全考量:硬件访问敏感,需用户授权、防止滥用。工程价值:用 Permissions Policy 精细控制硬件权限,安全约束。

Permissions Policy 控制 USB/HID 权限,安全上下文 + 用户授权。

#
★★

50. 硬件 API 的特性检测与优雅降级 UX,不支持 WebUSB/WebHID 时的用户引导与替代方案

硬件 API 的特性检测与优雅降级 UX:不支持 WebUSB/WebHID 时的用户引导与替代方案是什么?

  • 特性检测
  • 降级
  • 引导

硬件 API 需特性检测(if ('usb' in navigator)),不支持时优雅降级:提示用户(浏览器不支持/需 Chrome)、提供替代方案(下载工具、上传文件、引导安装 App)。工程价值:兼容性 UX,避免不支持时崩溃,引导用户到可用路径。

特性检测 + 引导 + 替代方案,是硬件 API 的降级 UX。

#
★★

51. Generic Sensor API(Accelerometer、Gyroscope、Magnetometer、Ambient Light 等)

Generic Sensor API(Accelerometer、Gyroscope、Magnetometer、Ambient Light 等)是什么?

  • 通用传感器
  • 设备
  • 应用

Generic Sensor API 提供统一传感器接口(Accelerometer、Gyroscope、Magnetometer、AmbientLightSensor 等),统一读取频率、权限、错误处理。工程应用:加速度计(动作)、陀螺仪(方向)、磁力计(罗盘)、环境光。需权限与安全上下文。工程价值是统一传感器接入。

Generic Sensor 统一多种传感器接口,简化接入。

#
★★

52. Permissions Policy 与 Document Policy 在 iframe 内能力的精细化关闭

Permissions Policy 与 Document Policy 在 iframe 内能力的精细化关闭是什么?

  • Permissions Policy
  • Document Policy
  • iframe

Permissions Policy 控制权限特性(摄像头、USB、传感器)在 iframe 的可用性,Document Policy 控制文档行为(如文档方向、旧 API)。用于跨域 iframe 精细化关闭能力:allow 属性/Header 声明。工程价值:安全隔离 iframe 能力,防止滥用。边界是能力声明与继承。

Permissions Policy 管权限、Document Policy 管文档行为,精细化关闭 iframe 能力。

#
★★

53. Permissions API(navigator.permissions.query)

Permissions API(navigator.permissions.query)是什么?

  • 权限查询
  • 状态
  • 预查

Permissions API 用 navigator.permissions.query({ name }) 查询权限状态(granted/prompt/denied),监听变化。工程价值:预查询权限状态决定 UI/流程、避免申请失败、监听权限变化。是权限管理的统一接口。

permissions.query 查询权限状态并监听,预判权限流程。

#

54. showSaveFilePicker/showOpenFilePicker 在文件读写的工程价值

showSaveFilePicker/showOpenFilePicker 在文件读写中的工程价值是什么?

  • 文件选择
  • 保存
  • 权限

File System Access 的 showOpenFilePicker 打开文件选择器(读文件),showSaveFilePicker 保存文件(写文件),返回句柄。工程价值:浏览器读写本地文件、保存下载、需用户手势与权限。是文件系统访问的基础。

showOpenFilePicker 读、showSaveFilePicker 写,是文件系统访问入口。

#

55. Contact Picker API(navigator.contacts)

Contact Picker API(navigator.contacts)是什么?

  • 联系人
  • 选择
  • 权限

Contact Picker API 用 navigator.contacts.select 让用户选择联系人(姓名、电话、邮件),需用户手势与权限。工程价值:获取联系人信息(分享、邀请),隐私上用户主动选择。支持有限。工程价值是联系人选择能力。

Contact Picker 用户选择联系人,需授权与手势。

#

56. URL Handler API(launch_queue)在原生应用拉起的工程价值

URL Handler API(launch_queue)在原生应用拉起的工程价值是什么?

  • 拉起
  • 启动
  • 应用

URL Handler API 让 PWA 通过 URL 被拉起(launch_queue),处理启动参数。工程价值:PWA 作为 URL 处理器、从外部/系统 URL 启动应用、深度链接。配合自定义协议与 manifest。工程价值是应用拉起与深度链接。

URL Handler 让 PWA 通过 URL 启动并处理参数。

#

57. Web Authentication API(WebAuthn/Passkeys)

Web Authentication API(WebAuthn/Passkeys)是什么?

  • WebAuthn
  • Passkeys
  • 认证

WebAuthn 用公钥密码进行无密码认证(navigator.credentials.create/get),Passkeys 是其跨设备实现。工程价值:强认证、无密码、防钓鱼、生物识别。需安全上下文。工程价值是安全的现代认证。

WebAuthn 用公钥认证,Passkeys 跨设备,是现代化安全认证。

#

58. Notification API(Notification)在系统通知的工程实践

Notification API(Notification)在系统通知中的工程实践是什么?

  • 通知
  • 权限
  • 应用

Notification API 显示系统通知(new Notification),需请求权限(Notification.requestPermission)。工程实践:请求权限时机、通知内容与点击处理、与 Push 配合后台通知。工程价值是系统级通知。

Notification 显示通知,需权限,与 Push 配合。

#

59. Push API(PushManager)在服务端推送的现代工程应用

Push API(PushManager)在服务端推送中的现代工程应用是什么?

  • 推送
  • 订阅
  • 应用

Push API 用 PushManager.subscribe 订阅推送,服务端可向浏览器推送消息,需 Service Worker 接收。工程应用:订阅管理、推送通知、离线触达。需权限与 VAPID 密钥。工程价值是服务端推送能力。

PushManager 订阅推送,Service Worker 接收,实现服务端推送。

#

60. Background Sync API 在离线同步(表单提交)

Background Sync API 在离线同步(表单提交)中的工程应用是什么?

  • 后台同步
  • 离线
  • 表单

Background Sync API 注册后台同步(registration.sync.register),网络恢复时执行(Service Worker 中),用于离线提交表单、离线同步数据。工程应用:离线表单提交重放、数据同步。工程价值是离线优先的可靠同步。

Background Sync 网络恢复时后台重放,用于离线表单同步。

#

61. Web Share API 的 files 字段(多文件分享)的工程应用

Web Share API 的 files 字段(多文件分享)的工程应用是什么?

  • 文件分享
  • 多文件
  • 应用

Web Share API 的 files 字段支持分享多个文件(navigator.share({ files }),canShare 探测)。工程应用:分享图片/文档到系统面板。多文件分享需支持与探测。边界:文件类型与数量限制、降级。工程价值是多文件分享。

files 字段分享多文件,需 canShare 探测与降级。

#

62. Screen Orientation API(screen.orientation)在锁定方向的现代应用

Screen Orientation API(screen.orientation)在锁定方向的现代应用是什么?

  • 锁定方向
  • 锁定
  • 应用

screen.orientation.lock() 锁定屏幕方向(全屏时),unlock 解锁。现代应用:视频/游戏锁定横屏、阅读锁定竖屏。需全屏与支持。工程价值是方向锁定与沉浸式体验。

orientation.lock 锁定方向,适合全屏视频/游戏。

#

63. Web App Scope(scope in Manifest)在独立窗口的工程实践

Web App Scope(scope in Manifest)在独立窗口中的工程实践是什么?

  • scope
  • 独立窗口
  • 应用

Manifest 的 scope 定义 PWA 的应用范围,scope 内的 URL 属于 App,在独立窗口打开,scope 外用浏览器。工程实践:设置合适的 scope 使 PWA 在独立窗口运行、导航限制在应用内。工程价值是 PWA 独立窗口与边界控制。

scope 定义 PWA 范围,控制独立窗口与应用边界。

#

64. Web Serial API 在串口通信(POS、嵌入式)的工程价值

Web Serial API 在串口通信(POS、嵌入式)中的工程价值是什么?

  • 串口
  • POS
  • 应用

Web Serial API 连接串口设备,POS(收银)、嵌入式、硬件交互。工程价值:浏览器串口通信、无需安装驱动、设备交互。需授权。适合 POS 打印、嵌入式控制等场景。

Web Serial 串口通信,适合 POS/嵌入式硬件交互。

#

65. Web NFC(NDEFReader)的标签读写

Web NFC(NDEFReader)的标签读写是什么?

  • NFC
  • 标签
  • 读写

Web NFC 用 NDEFReader 读写 NFC 标签(NDEF 格式),需权限(Android Chrome)。工程应用:标签读取、设备配对、接触交互。支持有限。工程价值是 NFC 交互,但受平台与权限限制。

NDEFReader 读写 NFC 标签,支持有限、需权限。