Web NFC 这个功能听起来确实很酷，但在实际使用中却隐藏着不少陷阱。比如在 Chrome for Android 上反复调试页面始终没有反应，或者直接提示“不支持”——这多半是触碰了浏览器版本、HTTPS 环境、硬件开关或用户手势这几个关键限制。下面我们就将整个流程拆解清楚，帮你快速定位并解决问题。
简单来说，Web NFC API 对软硬件的要求相当严格：需要 Chrome 89 及以上版本、基于 Android 系统、运行在 HTTPS 安全环境下、并且必须由用户主动触发操作。桌面版 Chrome 和 iOS 设备由于硬件不支持，无法使用该功能。此外，非 NDEF 格式的标签同样无法被读取。接下来我们直接进入操作步骤。
一、确认设备与浏览器兼容性
首先来看设备兼容性。Web NFC 仅支持搭载物理 NFC 芯片的 Android 手机，且 Chrome 浏览器版本不能低于 89。桌面端和 PC 浏览器由于硬件限制，完全没有办法使用，这是无法绕过的硬性条件。
具体如何检查？按照以下几步操作：
1、进入手机“设置”→“关于手机”，连续点击“版本号”七次，即可开启开发者选项。
2、返回“设置”→“系统”→“开发者选项”，查看“NFC”开关是否已经打开。
3、打开 Chrome，在地址栏输入 chrome://version，确认版本号是否 ≥ 89。
4、最后通过官方示例页 https://googlechrome.github.io/samples/web-nfc/ 验证基础功能是否正常。如果页面能成功调起读卡界面，说明设备端没有问题。
二、确保网页运行于安全上下文
接下来谈谈安全上下文的重要性。Web NFC API 强制要求页面必须在 HTTPS 协议下运行，本地开发时可以使用 localhost（Chrome 将其视为安全上下文）。如果使用 HTTP 或非 localhost 的 HTTP 地址，NDEFReader 构造函数会直接被禁用，没有任何商量的余地。
检查方法：
1、如果部署到正式服务器，必须配置好 SSL 证书，确保地址栏显示锁形图标。
2、本地开发时，建议使用 https://localhost:8080 或 https://127.0.0.1:3000 启动服务，切忌直接用 file:// 协议打开 HTML 文件，那样肯定无法正常使用。
3、在网页控制台中执行 console.log('NDEFReader' in window)，如果返回 true，说明当前环境满足基本安全要求；否则说明协议或地址存在问题。
三、手动触发 NFC 扫描权限申请
浏览器不会自动开启 NFC 监听，必须由用户主动操作来触发——比如点击一个按钮。如果直接调用 requestPermission() 或 scan()，必然会抛出 SecurityError 异常。
正确的做法：
1、在 HTML 中添加一个按钮：
2、绑定点击事件，在回调函数中创建 NDEFReader 实例并调用 scan()。
3、首次运行时，浏览器会弹出权限请求对话框，用户必须手动点击“允许”。
4、如果用户拒绝了权限授权，后续的 scan() 调用会静默失败，此时需要引导用户前往“网站设置”→“NFC”中手动开启权限。
四、启用 Chrome 远程调试定位问题
在真机调试时有一个痛点：手机上无法直接查看完整的控制台日志。这时就需要借助 Chrome 的远程调试功能，连接电脑后可以捕获 reading、readingerror 等事件以及异常堆栈信息。
操作流程：
1、在手机上开启“USB 调试”，使用原装数据线连接电脑。
2、在电脑上的 Chrome 浏览器中访问 chrome://inspect/#devices，勾选“Discover USB devices”。
3、在手机 Chrome 中打开目标网页，网页标题会出现在设备列表中，点击“inspect”进入调试面板。
4、在 Console 面板中执行 navigator.nfc?.addEventListener('reading', console.log)，检查事件监听器是否成功注册。
五、验证 NFC 标签可读性与格式
最后，还需要确认 NFC 标签本身是否兼容。Web NFC 仅支持 NDEF 格式的 Type 1–5 标签，并且标签必须处于可读状态。像某些加密卡、门禁卡、公交卡（例如 MIFARE Classic），由于使用专有协议或硬件级锁定，Web API 无法读取。
验证方法：
1、先用第三方应用程序（如 NFC Tools）读取标签，确认记录类型为“URL”或“Text”，并且显示“Read success”。
2、手机尽量不要佩戴金属背板或厚硅胶壳，这类材质会屏蔽 NFC 信号。建议裸机将标签贴近手机背面中心区域，距离控制在 4cm 以内。
3、如果标签中写入了自定义 MIME 类型或二进制负载，Web NFC 可能会解析失败并忽略。优先使用标准的 URL 或文本内容写入标签进行测试。
```
