错误消息“此设备或浏览器不支持 NFC。”

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#browser_compatibility

基本上是一些 Android 浏览器，并且仅来自 https 站点。