在当今数字化时代，近场通信（NFC）技术为我们带来了诸多便利。而谷歌浏览器对 Web NFC API 的支持，更是为开发者开辟了一片新天地，使得网页应用能够与 NFC 设备进行交互，实现一系列实用功能。接下来，就让我们深入解析一下谷歌浏览器中的 Web NFC API 及其应用。
一、什么是 Web NFC API
Web NFC API 是一组允许网页与 NFC 设备进行通信的接口。通过它，网页可以直接读取 NFC 标签中的数据，或者向 NFC 标签写入数据，就像手机应用与 NFC 设备交互一样方便。这大大拓展了网页的功能边界，让网页不再仅仅是信息的展示平台，而是能够直接与物理世界进行交互的智能界面。
二、准备工作
要使用 Web NFC API，首先需要确保用户的设备支持 NFC 功能。目前，大多数现代智能手机和平板电脑都配备了 NFC 芯片。然后，用户需要在支持 Web NFC API 的浏览器中打开相应的网页。谷歌浏览器作为全球最受欢迎的浏览器之一，对 Web NFC API 提供了良好的支持，用户只需将谷歌浏览器更新到最新版本即可。
三、检测 NFC 读写支持情况
在使用 Web NFC API 之前，我们需要先检测当前设备是否支持 NFC 读写操作。这可以通过调用 `navigator.nfc.watch` 方法来实现。当设备支持 NFC 读写时，该方法会返回一个 `NFCWatchID`，否则会返回 `null`。以下是一个简单的示例代码：
javascript
if (navigator.nfc) {
navigator.nfc.watch({
message: 'any',
success: function(message) {
console.log('NFC message received:', message);
},
error: function(error) {
console.error('NFC error:', error);
}
}).then(function(watchId) {
if (watchId) {
console.log('NFC watch started with ID:', watchId);
} else {
console.log('NFC not supported on this device.');
}
});
} else {
console.log('NFC is not supported by this browser.');
}
上述代码中，我们首先检查 `navigator.nfc` 是否存在，如果存在，则调用 `navigator.nfc.watch` 方法并传入一个配置对象。配置对象中的 `message` 属性指定了要监听的 NFC 消息类型，这里设置为 `'any'`，表示监听所有类型的 NFC 消息。`success` 回调函数将在接收到 NFC 消息时被调用，并输出消息内容；`error` 回调函数则在发生错误时被调用，并输出错误信息。最后，`then` 方法会在 `navigator.nfc.watch` 执行完成后被调用，如果返回的 `watchId` 不为 `null`，则表示成功启动了 NFC 监听，否则表示设备不支持 NFC 或浏览器不支持 Web NFC API。
四、读取 NFC 标签数据
当检测到设备支持 NFC 读写后，我们就可以开始读取 NFC 标签中的数据了。当用户将 NFC 标签靠近设备的 NFC 感应区域时，会触发 `navigator.nfc.watch` 的 `success` 回调函数。在回调函数中，我们可以获取到 `message` 参数，该参数包含了从 NFC 标签中读取到的数据。以下是一个简单的读取 NFC 标签数据的示例代码：
javascript
navigator.nfc.watch({
message: 'any',
success: function(message) {
if (message.records && message.records.length > 0) {
let record = message.records[0];
switch (record.recordType) {
case 'text':
console.log('Text Record:', new TextDecoder().decode(record.getRecordPayload()));
break;
case 'url':
console.log('URL Record:', new URL(record.getRecordPayload()).href);
break;
// 可以根据需要处理其他类型的记录
default:
console.log('Unknown Record Type:', record.recordType);
}
} else {
console.log('No records found in the message.');
}
},
error: function(error) {
console.error('Error reading NFC tag:', error);
}
}).then(function(watchId) {
if (watchId) {
console.log('NFC watch started for reading data.');
} else {
console.log('NFC is not supported for reading data on this device or browser.');
}
});
在这个示例中，我们在 `success` 回调函数中首先检查 `message.records` 是否存在且长度大于 0，以确保有可读取的记录。然后，我们获取第一个记录并根据其类型进行处理。如果是文本记录（`text`），我们使用 `TextDecoder` 来解码记录的有效载荷并输出解码后的文本；如果是 URL 记录（`url`），我们创建一个新的 `URL` 对象并输出其 href 属性，即 URL 地址。对于其他未知类型的记录，我们简单地输出记录类型。如果没有找到任何记录，我们输出相应的提示信息。

五、写入 NFC 标签数据
除了读取 NFC 标签数据外，Web NFC API 还允许我们向 NFC 标签写入数据。不过，并非所有的 NFC 标签都支持写入操作，只有那些具有可写权限的标签才能进行写入。在进行写入操作之前，同样需要先检测设备是否支持 NFC 写入功能。以下是一个检测设备是否支持 NFC 写入功能的示例代码：
javascript
if (navigator.nfc && navigator.nfc.canMakePayment) {
console.log('This device supports NFC writing.');
} else {
console.log('NFC writing is not supported on this device.');
}
上述代码中，我们通过检查 `navigator.nfc.canMakePayment` 来确定设备是否支持支付相关的操作，因为支付通常涉及到数据的写入。虽然这个属性主要是用于检测支付功能，但在很多情况下，如果设备支持支付，那么也很可能支持其他类型的数据写入。

如果要向 NFC 标签写入数据，可以使用 `navigator.nfc.push` 方法。以下是一个简单的写入示例代码：
javascript
let textRecord = new NDEFRecord({
type: 'text/plain',
payload: new TextEncoder().encode('Hello, World!')
});
navigator.nfc.push([textRecord]).then(function() {
console.log('Data written to NFC tag successfully.');
}).catch(function(error) {
console.error('Error writing data to NFC tag:', error);
});
在这个示例中，我们首先创建了一个包含文本数据的 NDEF 记录（NDEF 是一种常用于 NFC 标签的数据格式）。然后，我们使用 `navigator.nfc.push` 方法将这个记录写入到 NFC 标签中。如果写入成功，控制台会输出相应的成功信息；如果写入失败，则会输出错误信息。
六、总结
谷歌浏览器的 Web NFC API 为我们提供了一个强大的工具，让我们能够在网页中轻松地实现与 NFC 设备的交互。通过合理使用这一 API，我们可以开发出各种实用的应用，如门禁系统、电子名片交换、移动支付等。然而，在实际应用中，我们还需要考虑到不同设备和浏览器的兼容性问题，以及对用户隐私和安全的保护。相信随着技术的不断发展和完善，Web NFC API 将会在未来的网页应用开发中发挥越来越重要的作用，为用户带来更加便捷和丰富的体验。