How to Read and Write NFC Tags Directly in the Browser with the Web NFC API

function checkNfcSupport() {
  if ('NDEFReader' in window) {
    console.log('✅ Web NFC is supported!');
    return true;
  } else {
    console.warn('⚠️ Web NFC is not available on this browser/device.');
    return false;
  }
}

async function startScanning() {
  try {
    const ndef = new NDEFReader();
    await ndef.scan();
    console.log('📡 NFC Scan started. Bring a tag close to your phone...');
    // Event listener for reading NDEF messages
    ndef.addEventListener('reading', ({ message, serialNumber }) => {
      console.log(`✅ Tag Detected! Serial Number: ${serialNumber}`);
      for (const record of message.records) {
        console.log(`Record Type: ${record.recordType}`);
        console.log(`MIME Type:   ${record.mediaType || 'N/A'}`);
        // Handle Text Records
        if (record.recordType === 'text') {
          const textDecoder = new TextDecoder(record.encoding);
          const textContent = textDecoder.decode(record.data);
          console.log(`> Text Payload: ${textContent}`);
        }
        // Handle URL Records
        else if (record.recordType === 'url') {
          const textDecoder = new TextDecoder();
          const urlContent = textDecoder.decode(record.data);
          console.log(`> URL Payload: ${urlContent}`);
        }
        // Handle vCards / Custom MIME Types
        else if (record.mediaType === 'text/vcard') {
          const vcardText = new TextDecoder().decode(record.data);
          console.log(`> vCard Content:\n${vcardText}`);
        }
      }
    });
    ndef.addEventListener('readingerror', () => {
      console.error('❌ Error reading NFC tag. Try positioning the tag closer.');
    });
  } catch (error) {
    console.error(`Error starting scan: ${error.message}`);
  }
}

async function writeUrlToTag(urlToSave) {
  try {
    const ndef = new NDEFReader();
    await ndef.write({
      records: [
        {
          recordType: 'url',
          data: urlToSave
        }
      ]
    });
    console.log('🎉 Successfully wrote URL to NFC tag!');
  } catch (error) {
    console.error(`Write failed: ${error.message}`);
  }
}

async function writeVCardToTag(contact) {
  const vcardPayload = [
    'BEGIN:VCARD',
    'VERSION:3.0',
    `FN:${contact.name}`,
    `TEL:${contact.phone}`,
    `EMAIL:${contact.email}`,
    `URL:${contact.website}`,
    'END:VCARD'
  ].join('\r\n');
  try {
    const ndef = new NDEFReader();
    await ndef.write({
      records: [
        {
          recordType: 'mime',
          mediaType: 'text/vcard',
          data: new TextEncoder().encode(vcardPayload)
        }
      ]
    });
    console.log('📇 vCard written to NFC card successfully!');
  } catch (error) {
    console.error(`vCard write error: ${error.message}`);
  }
}

async function lockTagPermanently() {
  const confirmed = confirm('Are you sure you want to permanently lock this tag? This cannot be undone!');
  if (!confirmed) return;
  try {
    const ndef = new NDEFReader();
    await ndef.makeReadOnly();
    console.log('🔒 Tag locked successfully. It can no longer be overwritten.');
  } catch (error) {
    console.error(`Failed to lock tag: ${error.message}`);
  }
}

const controller = new AbortController();
async function scanWithTimeout() {
  const ndef = new NDEFReader();
  await ndef.scan({ signal: controller.signal });

  // Abort scan after 15 seconds if no tag is tapped
  setTimeout(() => controller.abort(), 15000);
}