如何用Web NFC API实现浏览器与物理世界的交互？-js教程-PHP中文网

如何用Web NFC API实现浏览器与物理世界的交互？

狼影

发布： 2025-09-24 22:59:01

原创

906人浏览过

Web NFC API支持浏览器与NFC标签交互，需先检测NDEFReader兼容性，创建NDEFReader对象并请求用户授权扫描，通过onreading监听读取数据，调用write方法写入信息；目前仅Chrome for Android等部分浏览器支持，须在HTTPS环境下运行，注意数据验证与防重放攻击；应用场景包括零售、支付、物流、身份验证及智能家居等。

如何用web nfc api实现浏览器与物理世界的交互？

Web NFC API允许网页直接与附近的NFC（近场通信）标签或卡片进行读写操作，从而实现浏览器与物理世界的交互。它为网页应用打开了一扇通往线下世界的窗户，让我们可以用手机轻轻一碰，就能完成支付、获取信息、甚至控制设备。

解决方案：

检查NFC支持: 首先，需要确认用户的浏览器和设备是否支持Web NFC API。你可以使用NDEFReader对象来检测。
```
if ("NDEFReader" in window) {
  console.log("Web NFC is supported!");
} else {
  console.log("Web NFC is not supported.");
}
```
登录后复制
创建NDEFReader对象: NDEFReader是Web NFC API的核心，它允许你发起NFC读写操作。
```
const ndef = new NDEFReader();
```
登录后复制

请求访问NFC设备: 在进行任何NFC操作之前，你需要请求用户授权访问他们的NFC设备。这通常通过ndef.scan()方法完成。这个方法会弹出一个权限请求框，用户必须允许才能继续。

try {
  await ndef.scan();
  console.log("Scan started successfully.");
  ndef.onreadingerror = () => {
    console.log("Argh! Cannot read data from the NFC tag. Try another one?");
  };
  ndef.onreading = event => {
    const message = event.message;
    for (const record of message.records) {
      console.log("Record type:  " + record.recordType);
      console.log("MIME type:    " + record.mediaType);
      console.log("Record id:    " + record.id);
      console.log("Record data:  " + new TextDecoder().decode(record.data));
    }
  };
} catch (error) {
  console.log(`Error! Scan failed to start: ${error}.`);
}

登录后复制

监听NFC标签读取事件: 一旦成功启动扫描，ndef.onreading事件就会在检测到NFC标签时触发。事件对象包含标签中的NDEF消息，你可以解析这些消息来获取数据。

一览运营宝

一览“运营宝”是一款搭载AIGC的视频创作赋能及变现工具，由深耕视频行业18年的一览科技研发推出。

查看详情

ndef.onreading = event => {
  const message = event.message;
  // 处理 message 中的数据
  for (const record of message.records) {
    // record.recordType, record.mediaType, record.data 包含标签数据
    console.log("Record type:  " + record.recordType);
    console.log("MIME type:    " + record.mediaType);
    console.log("Record id:    " + record.id);
    console.log("Record data:  " + new TextDecoder().decode(record.data));
  }
};

登录后复制

写入NFC标签: 你也可以使用Web NFC API将数据写入NFC标签。这需要创建一个NDEFMessage对象，其中包含要写入的NDEF记录。

async function writeNFC(text) {
  try {
    await ndef.write({
      records: [{ recordType: "text", data: text }],
    });
    console.log("NDEF message written successfully.");
  } catch (error) {
    console.log(`Error! Write failed: ${error}.`);
  }
}

// 调用 writeNFC 函数写入数据
writeNFC("Hello, NFC World!");

登录后复制

Web NFC API的兼容性如何？哪些浏览器和设备支持？

Web NFC API的支持情况仍然有限。目前，Chrome浏览器（Android版本）和一些基于Chromium的浏览器（例如Edge）提供了支持。iOS设备上的Safari浏览器尚未原生支持Web NFC API。因此，在使用Web NFC API时，务必进行兼容性检查，并为不支持的浏览器提供备选方案。可以考虑使用渐进增强的方式，在支持的浏览器上启用NFC功能，而在不支持的浏览器上提供其他交互方式。