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

34次阅读

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

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消息，你可以解析这些消息来获取数据。

Tripo AI

AI驱动的3D建模平台

262

查看详情

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功能，而在不支持的浏览器上提供其他交互方式。