Web NFC开发，开启浏览器与物理世界的近场对话

Web NFC技术使得智能手机和网页之间能够进行近距离通信，用户无需额外设备，仅通过手机就能与支持NFC的智能设备进行交互，在购物时，可以使用NFC技术快速完成支付，这项技术在移动支付、智能交通等领域具有广泛应用前景，极大提升了便利性，随着技术不断进步，Web NFC有望成为连接虚拟与现实世界的桥梁，为未来生活带来更多可能性和想象空间。

Web NFC开发允许网页应用访问设备的NFC（近场通信）功能

确保浏览器支持NFC API：大多数现代浏览器（如Chrome、Firefox和Safari）已经支持NFC API，你需要检查兼容性并确保目标用户使用的浏览器支持NFC功能。
获取设备NFC权限：在访问NFC设备之前，你需要在HTML文件中请求用户授权，在HTML中添加以下代码：

<button id="nfcRequest">请求NFC权限</button>

然后在JavaScript中处理用户授权请求：

Web NFC开发，开启浏览器与物理世界的近场对话

document.getElementById('nfcRequest').addEventListener('click', async () => {
  try {
    const granted = await navigator.nfc.requestDevice();
    if (granted) {
      console.log('NFC设备已授权');
    } else {
      console.log('NFC设备授权被拒绝');
    }
  } catch (error) {
    console.error('请求NFC权限时出错:', error);
  }
});

使用navigator.nfc对象：一旦获得NFC权限，你可以使用navigator.nfc对象与设备上的NFC功能进行交互，以下是一些基本操作：

读取标签：

async function readNDEFMessage() {
  try {
    const nfcDevice = await navigator.nfc.requestDevice();
    await nfcDevice.onStateChange();
    const tag = await nfcDevice.scan();
    const ndefMessage = await tag.ndefMessage;
    console.log('NDEF消息:', ndefMessage);
  } catch (error) {
    console.error('读取NFC标签时出错:', error);
  }
}

写入标签：

async function writeNDEFMessage() {
  try {
    const nfcDevice = await navigator.nfc.requestDevice();
    await nfcDevice.onStateChange();
    const tag = await nfcDevice.scan();
    const ndefMessage = NDEFMessage.fromObject({ 'text': 'Hello, NFC!' });
    await tag.writeMessage(ndefMessage);
    console.log('成功写入NDEF消息');
  } catch (error) {
    console.error('写入NFC标签时出错:', error);
  }
}

切换标签：

async function toggleNDEFMessage() {
  try {
    const nfcDevice = await navigator.nfc.requestDevice();
    await nfcDevice.onStateChange();
    const tag = await nfcDevice.scan();
    const ndefMessage = await tag.ndefMessage;
    console.log('原始NDEF消息:', ndefMessage);
    // 更改消息内容
    const updatedMessage = NDEFMessage.fromObject({ 'text': 'Hello, NFC! (更新)' });
    await tag.writeMessage(updatedMessage);
    console.log('更新后的NDEF消息');
  } catch (error) {
    console.error('切换NDEF消息时出错:', error);
  }
}

处理标签事件：你需要监听NFC设备上的标签事件（如扫描开始、扫描结束等），以便在与标签交互时执行相应的操作。

function handleTagEvent(event) {
  console.log('NFC标签事件:', event);
  if (event.state === 'scan.start') {
    // 开始扫描标签时的操作
  } else if (event.state === 'scan.end') {
    // 扫描结束时，你可以获取已读取或写入的标签信息
  }
}

通过以上步骤,你可以在Web应用中实现NFC功能，NFC技术的普及程度因地区和设备而异，因此在使用之前，请确保检查目标用户设备的支持情况。

从扫码到“碰一碰”的进化

当我们在超市购物时,用手机碰一下支付终端即可完成付款；当我们在展览馆里，用手机靠近展品标签就能获取详细信息——这些便捷体验的背后，是NFC（近场通信）技术在默默工作，而如今，随着Web NFC API的落地，开发者不再需要编写原生App，就能在网页中直接实现“碰一碰”交互，让浏览器真正成为连接数字世界与物理世界的桥梁。

什么是Web NFC？

Web NFC是一项Web标准API，允许在支持NFC的Android设备上（Chrome 89+），通过网页读取和写入NFC标签中的NDEF（NFC Data Exchange Format）数据，它让网页获得了“触觉”——当用户将手机靠近NFC标签时，网页能像原生应用一样感知到标签的存在，并读取或写入信息。

与传统的二维码不同,NFC的“碰一碰”交互更加自然、快速，且不需要摄像头对准，适合在复杂光线或近距离场景下使用，Web NFC的出现，则消除了用户安装App的门槛——只需打开一个网页链接，即可体验NFC功能。

核心原理：网页如何“感知”近场？

Web NFC的工作流程可以概括为四个步骤：

请求权限：网页通过navigator.nfc对象向用户请求NFC访问权限，浏览器会弹窗询问是否允许。
监听标签：使用nfc.watch()方法注册一个监听器，当有NFC标签靠近设备时触发回调。
读取数据：回调中获取NDEF记录，解析其中的文本、URL、MIME类型等数据。
写入数据：使用nfc.push()方法向当前靠近的标签写入NDEF记录。

整个过程中,浏览器充当了“翻译官”，将底层的NFC硬件事件转化为Web开发者熟悉的JavaScript事件，开发者只需关注数据格式和业务逻辑。

实战：用3步搭建“碰一碰签到”网页

假设我们要为一个会议活动开发一个签到系统,参与者只需用手机碰一下桌面的NFC标签，网页就能记录其身份信息。

检测环境与请求权限

if ('nfc' in navigator) {
  try {
    const nfc = navigator.nfc;
    const permissionStatus = await nfc.requestPermission();
    if (permissionStatus === 'granted') {
      console.log('NFC权限已获取，可以开始读取');
    }
  } catch (error) {
    console.error('权限请求失败:', error);
  }
} else {
  console.warn('当前浏览器不支持Web NFC');
}

读取标签并提取数据

假设标签中存储了会议ID和用户ID,编码为NDEF文本记录：

const nfc = navigator.nfc;
// 开始监听
await nfc.watch({ mode: 'any' }); // 'any' 表示读取所有类型标签
nfc.addEventListener('reading', (event) => {
  const { serialNumber, records } = event.message;
  // 常见NDEF记录类型有 text, url, mime
  records.forEach(record => {
    if (record.recordType === 'text') {
      const { text, languageCode } = record;
      console.log(`读取到文本: ${text} (语言: ${languageCode})`);
      // 假设文本格式为 "conferenceID:userID"
      const [confID, userID] = text.split(':');
      // 调用后端API完成签到
      checkIn(confID, userID);
    }
  });
});
// 处理错误或超时
nfc.addEventListener('error', (event) => {
  console.error('读取失败:', event.error);
});

写入标签（分发环节）

如果需要在空标签上写入签到信息：

const nfc = navigator.nfc;
const ndefMessage = {
  records: [
    { recordType: 'text', text: 'CONF001:USER123' },
    { recordType: 'url', url: 'https://example.com/checkin' }
  ]
};
try {
  await nfc.push(ndefMessage);
  console.log('数据写入成功，请将手机靠近下一个标签');
} catch (error) {
  console.error('写入失败:', error);
}

效果：当参与者将手机靠近标签时，网页自动读取用户ID并调用签到接口，全程无需手动输入或扫码。

注意事项：能力与边界

Web NFC虽然强大，但需要开发者明确其适用场景和限制：

平台限制：目前仅支持Android设备上的Chrome浏览器（89+），iOS和桌面端暂不支持，这意味若你的用户群中包含大量iOS用户，Web NFC不能作为唯一入口。
安全要求：页面必须通过HTTPS加载（本地开发可用localhost），且用户必须主动触发NFC操作（如点击按钮后再贴标签），不能后台静默读取。
标签类型：主要支持符合NDEF格式的NFC标签（如NFC Type 2、4），不支持MIFARE Classic等非标准格式，常见的NFC标签贴纸、门禁卡、支付标签均可兼容。
数据长度：单个NDEF记录的有效负载最大约32KB，实际应用中建议控制在几百字节内（如短文本、URL、小JSON对象）。
用户体验：需要设计清晰的界面提示，请将手机靠近NFC标签”，并给出读取成功/失败的状态反馈，因为“碰一下”的操作对用户来说应该是确定性的。