你不知道的Web API黑科技：解锁浏览器隐藏能力（二）

2025年10月17日 互联网

在Web开发领域，浏览器提供的API库远比大多数开发者想象的丰富。从《你不知道的神奇的Web API（一）》中，我们已窥见部分冷门但强大的功能，而本文将继续深入挖掘更多”隐藏技能”，帮助开发者突破传统Web应用的边界，打造更智能、更贴近原生体验的交互场景。

一、设备控制：让Web应用”掌控”硬件

1. Web Bluetooth API：低功耗设备的无线连接

传统Web应用受限于安全沙箱，无法直接与蓝牙设备通信。但Web Bluetooth API打破了这一壁垒，允许网页通过BLE（低功耗蓝牙）与硬件设备（如心率带、智能锁、温度传感器）建立连接。其核心流程包括：

  1. // 请求设备连接（需用户交互触发）
  2. async function connectToDevice() {
  3.   try {
  4.     const device = await navigator.bluetooth.requestDevice({
  5.       filters: [{ services: ['heart_rate'] }], // 筛选支持心率服务的设备
  6.       optionalServices: ['generic_access'] // 可选服务
  7.     });
  8.     const server = await device.gatt.connect();
  9.     const service = await server.getPrimaryService('heart_rate');
  10.     const characteristic = await service.getCharacteristic('heart_rate_measurement');
  11.     characteristic.addEventListener('valuechanged', event => {
  12.       const heartRate = event.target.value.getUint8(1); // 解析心率数据
  13.       console.log(`当前心率: ${heartRate} BPM`);
  14.     });
  15.     await characteristic.startNotifications();
  16.   } catch (error) {
  17.     console.error('连接失败:', error);
  18.   }
  19. }

应用场景：健身应用实时显示心率数据、智能家居控制面板调节灯光亮度、工业IoT设备监控。

2. WebUSB API：直接访问USB外设

对于需要高速数据传输的场景（如3D打印机控制、数据采集仪），WebUSB API提供了比串口更高效的解决方案。开发者可通过navigator.usb.requestDevice()选择设备，并使用标准USB协议通信：

  1. // 示例：连接USB串口设备
  2. async function connectUSB() {
  3.   const device = await navigator.usb.requestDevice({
  4.     filters: [{ vendorId: 0x1A86 }] // 常见USB转串口芯片厂商ID
  5.   });
  6.   await device.open();
  7.   if (device.configuration === null) {
  8.     await device.selectConfiguration(1);
  9.   }
  10.   await device.claimInterface(0); // 声明接口
  11.   // 写入数据
  12.   const encoder = new TextEncoder();
  13.   const data = encoder.encode('AT+CMD\r\n');
  14.   await device.transferOut(1, data); // 端点1通常为OUT端点
  15. }

注意事项：需用户主动触发操作（如点击按钮），且浏览器会提示权限请求。

二、文件系统与存储：超越LocalStorage的局限

1. File System Access API：原生文件系统操作

传统文件上传依赖<input type="file">，而File System Access API允许网页直接读写用户指定的文件或目录，甚至创建新文件：

  1. // 示例：保存文本到用户选择的文件
  2. async function saveFile() {
  3.   try {
  4.     const handle = await window.showSaveFilePicker({
  5.       suggestedName: 'notes.txt',
  6.       types: [{
  7.         description: 'Text Files',
  8.         accept: { 'text/plain': ['.txt'] }
  9.       }]
  10.     });
  11.     const writable = await handle.createWritable();
  12.     await writable.write('Hello, File System Access API!');
  13.     await writable.close();
  14.   } catch (err) {
  15.     console.error('用户取消或出错:', err);
  16.   }
  17. }

优势：支持大文件（如视频编辑）、断点续传、直接修改文件而非覆盖。

2. IndexedDB进阶：结构化数据存储

对于需要复杂查询的应用（如离线CRM系统），IndexedDB的索引和事务机制远超LocalStorage：

  1. // 创建带索引的数据库
  2. const request = indexedDB.open('MyDatabase', 2);
  3. request.onupgradeneeded = (e) => {
  4.   const db = e.target.result;
  5.   const store = db.createObjectStore('customers', { keyPath: 'id' });
  6.   store.createIndex('name', 'name', { unique: false });
  7.   store.createIndex('email', 'email', { unique: true });
  8. };
  10. // 查询示例
  11. function getCustomerByName(name) {
  12.   return new Promise((resolve) => {
  13.     const request = indexedDB.open('MyDatabase');
  14.     request.onsuccess = (e) => {
  15.       const db = e.target.result;
  16.       const transaction = db.transaction('customers', 'readonly');
  17.       const store = transaction.objectStore('customers');
  18.       const index = store.index('name');
  19.       const cursorRequest = index.openCursor(IDBKeyRange.only(name));
  20.       const results = [];
  21.       cursorRequest.onsuccess = (e) => {
  22.         const cursor = e.target.result;
  23.         if (cursor) {
  24.           results.push(cursor.value);
  25.           cursor.continue();
  26.         } else {
  27.           resolve(results);
  28.         }
  29.       };
  30.     };
  31.   });
  32. }

三、传感器与环境感知：让Web应用”感知”世界

1. Ambient Light Sensor API：自动调节屏幕亮度

移动设备可通过此API检测环境光强度，动态调整页面亮度或切换深色模式：

  1. if ('AmbientLightSensor' in window) {
  2.   const sensor = new AmbientLightSensor();
  3.   sensor.onreading = () => {
  4.     const lux = sensor.illuminance;
  5.     document.body.className = lux < 50 ? 'dark-mode' : 'light-mode';
  6.   };
  7.   sensor.start();
  8. } else {
  9.   console.warn('环境光传感器不支持');
  10. }

2. Proximity Sensor API：防误触设计

手机靠近物体时（如放入口袋），可通过此API暂停视频播放或锁定屏幕：

  1. if ('ProximitySensor' in window) {
  2.   const sensor = new ProximitySensor();
  3.   sensor.onreading = () => {
  4.     if (sensor.near) {
  5.       document.videoPlayer.pause();
  6.     }
  7.   };
  8.   sensor.start();
  9. }

四、性能优化：利用隐藏API提升体验

1. Performance Observer API：监控资源加载

实时跟踪页面资源（如脚本、图片）的加载时间，优化关键渲染路径：

  1. const observer = new PerformanceObserver((list) => {
  2.   for (const entry of list.getEntries()) {
  3.     if (entry.name.endsWith('.js')) {
  4.       console.log(`脚本 ${entry.name} 加载耗时: ${entry.duration}ms`);
  5.     }
  6.   }
  7. });
  8. observer.observe({ entryTypes: ['resource'] });

2. ResizeObserver API：精准响应布局变化

替代传统的window.onresize，精确监听特定元素的尺寸变化：

  1. const element = document.getElementById('resizable-box');
  2. const observer = new ResizeObserver((entries) => {
  3.   for (const entry of entries) {
  4.     const { width, height } = entry.contentRect;
  5.     console.log(`元素尺寸变化: ${width}x${height}`);
  6.   }
  7. });
  8. observer.observe(element);

五、安全与兼容性建议

  1. 渐进增强：使用if ('API' in window)检测支持性，提供降级方案。
  2. 权限管理：蓝牙/USB操作需用户主动触发，避免自动请求。
  3. Polyfill方案：对于不支持的API（如旧版Chrome），可引入@webbluetooth/polyfill等库。
  4. 性能监控：通过navigator.connection.effectiveType检测网络状况，动态调整资源加载策略。

这些”神奇的Web API”正在重新定义Web应用的边界。从硬件控制到环境感知，从文件系统操作到性能优化，开发者可通过合理利用这些API，打造出媲美原生应用的体验。未来，随着浏览器标准的演进，更多隐藏能力将被解锁，值得持续关注。

最新文章