Web 浏览器 NFC 与 Next JS

Question

我最近购买了一个 EL-MF1A RFID 13.56 MHz 1K 卡标签，我正在尝试创建一个可以写入 NFC 卡链接的网站。这可能吗？因为当我运行该网站时，我立即收到消息“此设备或浏览器不支持 NFC”。我使用的是 Android 上最新版本的 Google Chrome，我的设备是支持 NFC 的小米 Note 13 Pro。

    "use client"
    
    import { useState } from 'react';
    
    export default function Home() {
      const [nfcSupported, setNfcSupported] = useState(null);
      const [message, setMessage] = useState('');
    
      const writeToNFC = async () => {
        if ('NDEFReader' in window) {
          try {
            const ndef = new NDEFReader();
            await ndef.write({
              records: [{ recordType: "url", data: "https://www.weekgenz.com/" }]
            });
            setMessage('Succes write NFC!');
          } catch (error) {
            setMessage(`Fail to write NFC: ${error}`);
          }
        } else {
          setNfcSupported(false);
          setMessage('Browser or Device not Support NFC.');
        }
      };
    
      return (
        <div className='h-screen w-full bg-white flex items-center justify-center'>
          <div>
            <h1 className='text-black ttext-center'>NFC Writer</h1>
            {nfcSupported !== false ? (
              <button onClick={writeToNFC} className='text-white bg-black p-4'>Write link to NFC Card</button>
            ) : (
              <p>{message}</p>
            )}
            {message && <p>{message}</p>}
          </div>
        </div>
      );
    }


  return (
    <div className='h-screen w-full bg-white flex items-center justify-center'>
      <div>
        <h1 className='text-black ttext-center'>NFC Writer</h1>
        {nfcSupported !== false ? (
          <button onClick={writeToNFC} className='text-white bg-black p-4'>Write link to NFC Card</button>
        ) : (
          <p>{message}</p>
        )}
        {message && <p>{message}</p>}
      </div>
    </div>
  );
}

什么可能导致此代码无法写入 NFC 卡？

Answer 1

是的，但仅适用于非常有限的浏览器

请参阅 https://developer.mozilla.org/en-US/docs/Web/API/Web_NFC_API

基本 Android Chrome 和 Android Opera