PWA能否调用手机蓝牙、GPS及其他内置硬件模块？

嘿，作为刚入坑PWA的新手，你问的这个问题其实特别典型——答案是完全没问题！现代浏览器（尤其是支持PWA的）早就提供了原生API来搞定这些硬件交互，我分两部分给你掰扯清楚：

这个是所有支持PWA的现代浏览器都标配的API，核心就是navigator.geolocation这个对象，用起来门槛很低。

基本用法 #

首先得确保你的PWA运行在HTTPS环境下（本地开发用localhost也能通融），因为这类敏感API需要安全上下文。然后分两种场景：

• 单次获取当前位置
• 持续监听位置变化

代码示例：

// 单次获取位置
navigator.geolocation.getCurrentPosition(
  (position) => {
    console.log('拿到当前位置啦：', {
      纬度: position.coords.latitude,
      经度: position.coords.longitude,
      精度: position.coords.accuracy // 单位是米，数值越小越准
    });
    // 这里就可以把位置数据用到你的PWA里，比如加载附近地图、记录运动轨迹啥的
  },
  (error) => {
    console.error('定位失败：', error.message);
    // 要处理用户拒绝授权、信号弱定位超时这些情况哦
  },
  {
    enableHighAccuracy: true, // 开高精度定位（耗电但准）
    timeout: 10000, // 10秒没拿到就超时
    maximumAge: 0 // 不用缓存的旧位置数据
  }
);

// 持续监听位置变化（比如导航场景）
const watchId = navigator.geolocation.watchPosition(
  (position) => {
    console.log('位置更新了：', position.coords);
  },
  (error) => {
    console.error('监听位置失败：', error.message);
  }
);

// 不想监听了就关掉
// navigator.geolocation.clearWatch(watchId);

注意事项 #

• 第一次调用时，浏览器会弹出授权弹窗，用户必须点允许才能拿到位置
• 把PWA添加到手机主屏幕后，体验和原生APP几乎没差，授权后甚至能在后台持续监听位置（部分浏览器需要额外配置后台权限）

这个API能让你的PWA和蓝牙设备直接通信，但有几个小限制得先知道：

• 支持情况：Chrome、Edge、Opera这些移动端浏览器都支持，Safari目前（2024年）还在测试阶段，得开实验性特性才能用
• 前提条件：同样需要HTTPS环境，而且你的蓝牙设备得支持GATT协议（大部分智能手环、传感器都符合）

基本用法 #

蓝牙交互的流程是：用户手动触发连接→选择设备→连接GATT服务器→读写/监听设备数据，不能自动触发（浏览器的安全限制）。

代码示例（以连接心率手环为例）：

// 给按钮加个点击事件触发蓝牙连接（必须用户手动操作！）
document.getElementById('connect-bluetooth').addEventListener('click', () => {
  // 请求用户选择蓝牙设备，这里过滤出支持心率服务的设备
  navigator.bluetooth.requestDevice({
    filters: [{ services: ['heart_rate'] }] // 也可以用设备名称过滤：namePrefix: 'MyBand'
  })
  .then(device => {
    console.log('选中设备：', device.name);
    // 连接到设备的GATT服务器
    return device.gatt.connect();
  })
  .then(server => {
    // 获取心率服务
    return server.getPrimaryService('heart_rate');
  })
  .then(service => {
    // 获取心率测量的特征值
    return service.getCharacteristic('heart_rate_measurement');
  })
  .then(characteristic => {
    // 开启实时监听心率变化
    return characteristic.startNotifications().then(_ => {
      console.log('开始监听心率');
      characteristic.addEventListener('characteristicvaluechanged', (event) => {
        const value = event.target.value;
        // 按照蓝牙规范解析心率数据
        const heartRate = value.getUint8(1);
        console.log('当前心率：', heartRate);
      });
    });
  })
  .catch(error => {
    console.error('蓝牙操作翻车了：', error.message);
  });
});

注意事项 #

• 蓝牙设备必须处于可发现状态（比如手环要打开配对模式）
• PWA添加到主屏幕后，连接蓝牙的体验和原生APP几乎一致，部分浏览器还支持后台保持连接

这俩API都是PWA实现硬件交互的核心，只要满足HTTPS（本地localhost除外）的要求，就能轻松调用手机的GPS和蓝牙。建议先从简单的定位功能入手，跑通了再尝试蓝牙设备连接，遇到问题看浏览器控制台的错误信息，大部分坑都能解决～

内容的提问来源于stack exchange，提问作者Pedro Juan