8个你可能不了解但很实用的Web API-猿码集

1. Introduction

Web API 是万维网应用程序接口，是一种定义了应用程序之间如何通信的接口。下面介绍的8个 Web API，都是非常实用的，但却不为人所知。

2. SpeechRecognition

2.1 SpeechRecognition 介绍

SpeechRecognition 是 Web Speech API 的一部分，它可以将语音转换为文本，从而让用户可以无需手动输入文本，直接让应用程序理解用户的 oral input 。

2.2 SpeechRecognition 示例代码


    window.SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
    const recognition = new SpeechRecognition();
    recognition.lang = 'en-US';
    recognition.interimResults = true;
    recognition.onresult = function(event) {
        const resultList = event.results[event.resultIndex];
        const latestTranscript = resultList[0].transcript;
        console.log('user is saying:',latestTranscript);
    }
    recognition.onend = function() {
        recognition.start();
    }
    recognition.start();

这段代码首先检测浏览器是否支持 Web Speech API；如果支持，创建一个 SpeechRecognition 实例，并将语音识别语言设置为美式英语；然后在 onresult 回调函数中获取用户最新的语音输入并打印在控制台上；最后在 onend 回调函数中重新启动语音识别过程，从而实现实时转换。

3. WebBluetooth

3.1 WebBluetooth 介绍

WebBluetooth API 可以让 Web 应用程序使用蓝牙设备以进行连接、获取信号强度、读写 GATT 服务等操作。目前，WebBluetooth API 只能在 Android 和 Chrome OS 上使用。

3.2 WebBluetooth 示例代码


    let deviceName = 'bluetooth device name';
    const options = {filters:[{name:deviceName}]};
    navigator.bluetooth.requestDevice(options).then(device => {
        console.log('device:',device);
    }).catch(error => {
        console.log('error:',error);
    });

这段代码首先使用 requestDevice() 来搜索蓝牙设备，根据设备名称过滤返回符合条件的设备，获取 Promise 对象，然后在 then() 和 catch() 中分别处理成功和错误情况。

4. WebUSB

4.1 WebUSB 介绍

WebUSB API 可以在不需要安装任何额外驱动程序的情况下直接连接 USB 设备在 Web 应用程序中使用。目前，WebUSB API 只能在 Windows、macOS 和 Linux 上使用。

4.2 WebUSB 示例代码


    navigator.usb.requestDevice({ filters: [{ vendorId: 0x1234 }] })
        .then(device => {
            console.log('serial number:', device.serialNumber);
        })
        .catch(error => { console.log(error); });

这段代码在执行前会弹出一个窗口，提示用户连接到符合要求的 USB 设备，获取到 Promise 对象之后，通过 serialNumber 属性读取设备的编号。

5. Network Information

5.1 Network Information 介绍

Network Information API 可以让 Web 应用程序获取设备网络连接的类型和速度。目前，Network Information API 的兼容性还不够完善。

5.2 Network Information 示例代码


    const connection = navigator.connection || navigator.mozConnection || navigator.webkitConnection;
    console.log('connection:', connection);
    console.log('effective type:', connection.effectiveType);
    console.log('downlink max:', connection.downlinkMax);

这段代码首先获取 navigator 对象上的 connection 对象，然后在控制台上输出 connection 对象，并根据情况获取 effectiveType 和 downlinkMax 属性。

6. WebNFC

6.1 WebNFC 介绍

WebNFC API 可以让 Web 应用程序与 NFC 标签和读卡器进行通信，对于 IoT 应用程序非常有用。

6.2 WebNFC 示例代码


    navigator.nfc.watch(message => {
        console.log('tag:', message);
    }, {
        acceptAll: true
    }).then(() => {
        console.log('watching for NFC tags...');
    }).catch(error => {
        console.log(`Error: ${error}`);
    });

这段代码可以实现 NFC 标签读取，将从扫描到的信息在控制台上输出。

7. WebXR

7.1 WebXR 介绍

WebXR API 可以让 Web 应用程序进行增强现实和虚拟现实等 AR/VR 技术。WebXR API 仍然处于实验阶段，且具有一定的技术门槛。

7.2 WebXR 示例代码


    navigator.xr.isSessionSupported('immersive-vr').then((supported)=>{
       console.log(`${supported?'supported':'not supported'}`)
    });

这段代码可以检查当前浏览器是否支持 WebXR API。

8. WebAuthn

8.1 WebAuthn 介绍

WebAuthn API 可以帮助 Web 应用程序实现基于公钥的身份认证（FIDO2 认证）。WebAuthn API 已被 W3C 推荐为 Web 标准。

8.2 WebAuthn 示例代码


    window.PublicKeyCredential.isUserVerifyingPlatformAuthenticatorAvailable().then(result =>{
        console.log(`platform authenticator ${result?'is':'is not'} available`);
    });

这段代码可以检查当前系统是否支持基于公钥的身份认证。

9. 结论

这篇文章介绍了 8 个 Web API：SpeechRecognition、WebBluetooth、WebUSB、Network Information、WebNFC、WebXR、WebAuthn。这些 Web API 在特定场景下非常实用，但网上介绍它们的文章并不多，希望本文能够对大家有所帮助。

8个你可能不了解但很实用的Web API