首页 > 文章 > 前端

WebNFCAPI怎么用？JS检测NFC设备超全教程

时间：2025-06-22 12:36:12 433浏览收藏

IT行业相对于一般传统行业，发展更新速度更快，一旦停止了学习，很快就会被行业所淘汰。所以我们需要踏踏实实的不断学习，精进自己的技术，尤其是初学者。今天golang学习网给大家整理了《JS检测NFC设备？Web NFC API超详细使用教程》，聊聊，我们一起来看看吧！

要检测设备是否支持NFC，首先检查'NDEFReader' in window以确认浏览器是否支持Web NFC API。接着尝试实例化NDEFReader对象并处理可能的异常，若失败则说明NFC功能被禁用或存在其他问题。可选地，使用Permissions API查询NFC权限状态，并在必要时请求权限。确保网站部署在HTTPS环境下，这是Web NFC API的基本要求。对于NFC设备未检测到的情况，需区分是“未检测到”还是“检测到但无法读取”，分别可能是API不支持、用户禁用了NFC或标签格式错误、权限不足等问题。提供清晰的提示引导用户检查设备设置或验证标签格式。Web NFC常见应用场景包括身份验证、支付、设备配对、信息传递及物联网等。调试时应使用支持NFC的设备和浏览器，开启开发者工具查看控制台输出，利用远程调试功能，并模拟NFC标签进行测试，同时注意检查权限设置及标签类型是否符合NDEF格式。

js如何检测NFC设备 Web NFC API实战应用指南

Web NFC API允许网页与附近的NFC标签进行读写操作。检测NFC设备是否可用，核心在于检查NDEFReader对象是否存在，以及浏览器是否支持该API。

首先，确保你的网站部署在HTTPS环境下，这是Web NFC API的基本要求。

解决方案

检查浏览器支持: 使用'NDEFReader' in window来判断浏览器是否支持Web NFC API。
实例化NDEFReader并处理异常: 尝试创建NDEFReader对象，如果创建失败，说明NFC功能可能被禁用或存在其他问题。
权限请求（可选但推荐）: 虽然API本身可能不需要立即请求权限，但为了提供更好的用户体验，可以尝试使用 Permissions API 提前查询 NFC 的权限状态，并在必要时请求权限。

以下是一个简单的JavaScript代码示例：

async function checkNFCSupport() {
  if ('NDEFReader' in window) {
    try {
      const reader = new NDEFReader();
      console.log("NFC is supported.");

      // 尝试读取，可能会触发权限请求
      try {
        await reader.scan();
        console.log("Scan started to request NFC permission");
        reader.onreadingerror = () => {
          console.log("Argh! Cannot read data from the NFC tag. Try another one?");
        };

        reader.onreading = event => {
          console.log("NFC Data Received!");
          const decoder = new TextDecoder();
          for (const record of event.message.records) {
            console.log("Record type:  " + record.recordType);
            console.log("MIME type:    " + record.mediaType);
            console.log("Record id:    " + record.id);
            console.log("Record data:  " + decoder.decode(record.data));
          }
        };
      } catch(error) {
        console.error("Can't start scan: ", error);
        // 这里可以更详细地处理错误，例如检查错误类型，给出更友好的提示
        if (error.name === 'SecurityError') {
          console.warn("NFC access might be blocked by browser settings or user permissions.");
        } else {
          console.warn("Failed to start NFC scan. Ensure NFC is enabled and the device supports it.");
        }
      }

      return true;
    } catch (error) {
      console.error("NFC initialization failed:", error);
      return false;
    }
  } else {
    console.log("Web NFC API is not supported in this browser.");
    return false;
  }
}

checkNFCSupport().then(supported => {
  if (supported) {
    console.log("NFC is ready to use!");
  } else {
    console.log("NFC is not available.");
  }
});