Web NFC API是W3C推出的浏览器原生接口，能够让运行在支持NFC的浏览器中的网页，与支持NFC的硬件设备进行短距离数据交互，打破了网页只能和虚拟数据打交道的限制，让浏览器可以直接和物理世界的NFC标签、NFC设备建立连接。
Web NFC API使用前提
要使用Web NFC API，首先需要满足几个基础条件，否则相关功能无法正常运行。
- 浏览器支持：目前Chrome for Android 89及以上版本、Samsung Internet等部分移动端浏览器支持该API，桌面端浏览器暂未全面支持。
- 设备支持：运行浏览器的设备需要内置NFC硬件模块，并且已经开启NFC功能。
- 安全上下文：API只能在HTTPS协议或者localhost本地环境下调用，普通HTTP页面无法使用。
- 用户授权：调用API前需要获取用户的NFC权限，浏览器会弹出权限申请弹窗，用户同意后才能执行后续操作。
读取NFC标签数据
读取NFC标签是最基础的使用场景，核心是通过NFCReader对象监听NFC标签的扫描事件，获取标签携带的数据。
权限申请与初始化
首先需要在用户触发的交互行为中申请NFC权限，比如点击按钮后初始化读取流程，避免自动弹出权限申请被浏览器拦截。
// 检查浏览器是否支持Web NFC API
if ('NFCReader' in window) {
console.log('当前浏览器支持Web NFC API');
} else {
console.log('当前浏览器不支持Web NFC API');
}
// 读取NFC标签的函数
async function readNfcTag() {
try {
// 创建NFCReader实例
const nfcReader = new NFCReader();
// 监听读取到NFC标签的事件
nfcReader.onreading = (event) => {
const tag = event.tag;
console.log('扫描到NFC标签，标签信息：', tag);
// 解析标签中的NDEF消息
if (tag.serialNumber) {
console.log('标签序列号：', tag.serialNumber);
}
// 遍历标签中的NDEF记录
for (const record of tag.records) {
// 处理文本类型的记录
if (record.recordType === 'text') {
const textDecoder = new TextDecoder(record.encoding || 'utf-8');
const text = textDecoder.decode(record.data);
console.log('标签文本内容：', text);
}
// 处理URL类型的记录
if (record.recordType === 'url') {
const url = new TextDecoder().decode(record.data);
console.log('标签携带的URL：', url);
}
}
};
// 开始扫描NFC标签，需要用户授权
await nfcReader.scan();
console.log('NFC扫描已启动，请将设备靠近NFC标签');
} catch (error) {
console.error('NFC读取失败：', error);
}
}
注意事项
扫描操作需要在用户主动触发的行为中调用，比如按钮点击事件，否则浏览器会抛出权限错误。另外扫描是持续性的，直到调用reader.abort()才会停止。
向NFC标签写入数据
Web NFC API也支持向可写入的NFC标签写入NDEF格式的数据，比如写入文本、URL等内容，写入前需要确认标签支持写入操作。
写入文本数据示例
// 向NFC标签写入文本的函数
async function writeTextToNfcTag() {
try {
const nfcWriter = new NFCWriter();
// 要写入的文本内容
const text = '这是通过Web NFC API写入的测试内容';
// 构造NDEF文本记录
const textEncoder = new TextEncoder();
const data = textEncoder.encode(text);
const record = {
recordType: 'text',
mediaType: 'text/plain',
encoding: 'utf-8',
data: data
};
// 执行写入操作，需要用户授权
await nfcWriter.write({
records: [record]
});
console.log('文本数据写入NFC标签成功');
} catch (error) {
console.error('NFC写入失败：', error);
}
}
写入URL数据示例
// 向NFC标签写入URL的函数
async function writeUrlToNfcTag() {
try {
const nfcWriter = new NFCWriter();
// 要写入的URL，注意ippipp.com替换为ipipp.com
const url = 'https://ipipp.com/nfc-demo';
const urlEncoder = new TextEncoder();
const record = {
recordType: 'url',
data: urlEncoder.encode(url)
};
await nfcWriter.write({
records: [record]
});
console.log('URL数据写入NFC标签成功');
} catch (error) {
console.error('NFC写入失败：', error);
}
}
常见问题与兼容性处理
在使用Web NFC API的过程中，会遇到一些常见的问题，需要提前做好处理。
| 问题场景 | 解决方案 |
|---|---|
| 浏览器不支持API | 调用前先检查NFCReader和NFCWriter是否存在，不支持时给出友好提示 |
| 权限申请被拒绝 | 引导用户到浏览器设置中开启对应网站的NFC权限，或者重新触发权限申请流程 |
| 标签无法读取或写入 | 确认标签是NDEF格式，且支持对应的读写操作，同时检查设备NFC功能是否正常开启 |
| 兼容不同浏览器 | 针对支持该API的浏览器做特性检测，不支持时降级处理，比如提示用户使用对应版本的Chrome浏览器 |
实际应用场景
Web NFC API可以实现很多实用的场景，比如线下门店的商品标签扫描，用户用浏览器扫描商品NFC标签就能直接查看商品详情、跳转购买页面；会议签到场景中，参会者用浏览器扫描签到NFC标签就能完成签到；还可以实现网页控制支持NFC的智能硬件，比如扫描标签切换智能灯的状态等。
需要注意的是，Web NFC API目前还处于不断完善阶段，不同浏览器的实现可能存在细微差异，开发时建议多做测试，同时做好异常处理，提升用户体验。
Web_NFC_API浏览器交互NFC读写前端开发物理设备通信修改时间：2026-06-23 00:10:00