Web NFC API可在支持的Android设备上通过Chrome浏览器实现网页读写NFC标签，需满足设备支持NFC、使用HTTPS、用户授权等条件，利用NDEFReader读取文本或URL数据，通过NDEFWriter写入多种类型信息，适用于智能海报、设备配对等场景，操作须由用户触发且受安全策略保护隐私。
Web NFC API 允许网页在支持的设备上读取和写入 NFC（近场通信）标签，实现与物理世界的轻量级交互。目前该功能主要在部分 Android 设备上的 Chrome 浏览器中可用，且需要用户主动触发操作（如点击按钮）才能启动 NFC 通信。
启用 Web NFC 的前提条件
要使用 Web NFC API，需满足以下条件：
- 设备支持 NFC 硬件并已开启
- 浏览器支持 Web NFC（目前主要是 Chrome for Android 89+）
- 网站通过 HTTPS 提供服务（本地开发可使用 localhost）
- 用户已授予网站 NFC 权限
读取 NFC 标签内容
通过 NDEFReader 接口可以监听来自 NFC 标签的数据。常见用途是读取 URL、文本或自定义数据。
if ('NDEFReader' in window) {
const ndef = new NDEFReader();
button.addEventListener('click', async () => {
try {
await ndef.scan();
ndef.onreading = event => {
const decoder = new TextDecoder();
if (event.message.records[0].recordType === 'text') {
const text = decoder.decode(event.message.records[0].data);
console.log('收到文本:', text);
} else if (event.message.records[0].recordType === 'url') {
const url = decoder.decode(event.message.records[0].data);
console.log('打开链接:', url);
window.open(url, '_blank');
}
};
} catch (err) {
console.error('扫描失败:', err);
}
});
} else {
console.log('当前浏览器不支持 Web NFC');
}
向 NFC 标签写入数据
使用 NDEFWriter 可将信息写入空白或可写的 NFC 标签，适合配置设备或分享信息。
const ndef = new NDEFReader();
buttonWrite.addEventListener('click', async () => {
try {
await ndef.write({
records: [
{ recordType: "url", data: "https://example.com" },
{ recordType: "text", data: "欢迎使用 Web NFC" }
]
});
console.log("数据写入成功");
} catch (err) {
console.error("写入失败:", err);
}
});
处理多种数据类型与兼容性建议
Web NFC 支持多种 NDEF 记录类型，包括 mime-type 自定义数据。实际应用中应考虑容错和用户体验。
- 始终包裹 NFC 操作在 try-catch 中，提示用户可能的错误
- 提供清晰的操作指引，例如“点击后靠近 NFC 标签”
- 检查
navigator.userAgent或特性检测判断是否支持 Web NFC - 避免长时间等待，可设置超时提示
基本上就这些。Web NFC 降低了网页与实体设备交互的门槛，适用于智能海报、设备配对、门禁卡模拟等场景，虽然目前生态有限，但为物联网前端提供了新可能。注意安全策略限制，不可后台静默读取，保护用户隐私。不复杂但容易忽略细节，按步骤实现即可。
