Браузерна інтеграція NFC: читання та запис міток без додатків

Ви розробили PWA для інвентаризації складу. Співробітник підносить телефон до мітки NTAG215 — картка активу підвантажується за секунду. Але половина пристроїв видають помилку: «Web NFC недоступний». Або ваші мітки NTAG213 не вміщують JSON з кількома полями. Web NFC API вирішує ці завдання, але вимагає правильного налаштування та обробки винятків. Ми допоможемо інтегрувати NFC-функціональність у ваш сайт: від простого читання до повноцінної системи запису та синхронізації з API.

Як працює Web NFC API?

Web NFC API надає доступ до NFC-чіпа пристрою з браузера. Він працює тільки з NDEF-сумісними мітками (формат обміну даними NFC). Підтримка обмежена Chrome для Android 89+ (desktop, iOS та інші браузери відсутні). Обов'язково HTTPS і жест користувача (наприклад, натискання кнопки) для першого запуску. Якщо підтримки немає — передбачаємо fallback на QR-коди або ручне введення. Перевірити підтримку можна одним рядком: const isSupported = 'NDEFReader' in window.

Які дані можна зберігати на NFC-мітках?

NDEF-повідомлення може містити одну або кілька записів. Основні типи: text — текст у кодуванні UTF-8 із зазначенням мови; url — URL-адреса; mime — довільні дані (наприклад, JSON); smart-poster — вкладена структура з URL, текстом і дією. На практиці найчастіше використовують JSON для передачі структурованих даних або URL для швидкого переходу. Чим компактніший JSON, тим швидше читання: для зменшення обсягу застосовуйте tree-shake — видаляйте зайві поля.

Порівняння чіпів NFC: який обрати?

NTAG215 у 3,5 рази місткіший за NTAG213, при цьому лише на 20% дорожчий. Для інвентаризації обладнання рекомендуємо NTAG215: він оптимальний за співвідношенням ємність/ціна, дозволяє зберігати JSON з ID, назвою, локацією та часом перевірки. Одна мітка NTAG215 коштує близько $1–1ів, а економія від автоматизації сягає $4.5k–6.5kів на рік.

Типові помилки Web NFC API та їх обробка

Читання NFC-міток: приклад коду

Для читання створюємо екземпляр NDEFReader, викликаємо scan() і підписуємося на подію reading. При помилці доступу (NotAllowedError) показуємо користувачеві зрозуміле повідомлення.

class NFCReader {
    private reader: NDEFReader | null = null
    private isReading = false

    async startReading(
        onRecord: (record: NFCRecord) => void,
        onError?: (error: Error) => void
    ): Promise<void> {
        if (!('NDEFReader' in window)) {
            throw new Error('Web NFC не підтримується в цьому браузері')
        }

        this.reader = new NDEFReader()
        this.isReading = true

        try {
            await this.reader.scan()
        } catch (err) {
            if ((err as Error).name === 'NotAllowedError') {
                throw new Error('Дозвіл на NFC не надано')
            }
            throw err
        }

        this.reader.addEventListener('reading', (event: NDEFReadingEvent) => {
            console.log(`NFC UID: ${event.serialNumber}`)
            for (const record of event.message.records) {
                onRecord(record)
            }
        })

        this.reader.addEventListener('readingerror', (event) => {
            onError?.(new Error('Помилка читання NFC'))
        })
    }

    stop() {
        this.isReading = false
        this.reader = null
    }
}

Для декодування записів (текст, URL, JSON) використовуйте утиліту:

interface ParsedNFCRecord {
  type: string
  data: string | Record<string, unknown>
}

function parseNFCRecord(record: NDEFRecord): ParsedNFCRecord {
  switch (record.recordType) {
    case 'text': {
      const decoder = new TextDecoder(record.encoding ?? 'utf-8')
      return {
        type: 'text',
        data: decoder.decode(record.data),
      }
    }
    case 'url': {
      const decoder = new TextDecoder()
      return {
        type: 'url',
        data: decoder.decode(record.data),
      }
    }
    case 'mime': {
      if (record.mediaType === 'application/json') {
        const decoder = new TextDecoder()
        try {
          return {
            type: 'json',
            data: JSON.parse(decoder.decode(record.data)),
          }
        } catch {
          return {
            type: 'text',
            data: decoder.decode(record.data)
          }
        }
      }
      return {
        type: record.mediaType ?? 'binary',
        data: '[binary data]',
      }
    }
    case 'smart-poster': {
      return {
        type: 'smart-poster',
        data: 'Smart Poster record'
      }
    }
    default:
      return {
        type: record.recordType,
        data: '[unknown]'
      }
  }
}

Запис на NFC-мітку

Для запису використовуємо NDEFReader.write(). Можна комбінувати URL, текст і JSON:

class NFCWriter {
  async write(data: NFCWriteData): Promise<void> {
    const writer = new NDEFReader()
    const message: NDEFMessageInit = {
      records: this.buildRecords(data),
    }
    await writer.write(message)
    console.log('Запис на мітку виконано')
  }

  private buildRecords(data: NFCWriteData): NDEFRecordInit[] {
    const records: NDEFRecordInit[] = []
    if (data.url) {
      records.push({
        recordType: 'url',
        data: data.url
      })
    }
    if (data.text) {
      records.push({
        recordType: 'text',
        data: data.text,
        lang: 'ru',
      })
    }
    if (data.json) {
      records.push({
        recordType: 'mime',
        mediaType: 'application/json',
        data: new TextEncoder().encode(JSON.stringify(data.json)),
      })
    }
    return records
  }

  async writeWithPassword(message: NDEFMessageInit, password: string): Promise<void> {
    const writer = new NDEFReader()
    await writer.write(message, { overwrite: true, })
  }
}

interface NFCWriteData {
  url?: string
  text?: string
  json?: unknown
}

Реальний кейс: інвентаризація складу

Ми впровадили Web NFC для клієнта з логістики. Кожен стелаж та одиниця обладнання були помічені мітками NTAG215. Співробітник відкриває PWA на Android, натискає «Сканувати», підносить телефон — і додаток автоматично підвантажує картку активу з ERP. Раніше процес займав 3 хвилини ручного введення, тепер — 15 секунд. Швидкість інвентаризації зросла в 12 разів, помилки введення виключені. Економія коштів для клієнта склала понад $4.5k–6.5kів на рік за рахунок зниження простоїв та ручної праці.

function AssetInventory() {
  const [scanned, setScanned] = useState<AssetData | null>(null)
  const [isScanning, setIsScanning] = useState(false)
  const readerRef = useRef<NFCReader | null>(null)

  async function startScan() {
    if (!('NDEFReader' in window)) {
      alert('Web NFC недоступний. Використовуйте Chrome на Android.')
      return
    }
    setIsScanning(true)
    readerRef.current = new NFCReader()
    await readerRef.current.startReading(
      (record) => {
        const parsed = parseNFCRecord(record)
        if (parsed.type === 'json' && isAssetData(parsed.data)) {
          setScanned(parsed.data as AssetData)
          setIsScanning(false)
          readerRef.current?.stop()
        }
      },
      (error) => {
        console.error('NFC error:', error)
        setIsScanning(false)
      }
    )
  }

  function stopScan() {
    readerRef.current?.stop()
    setIsScanning(false)
  }

  return (
    <div>
      {!('NDEFReader' in window) && (
        <div className="bg-yellow-50 border border-yellow-200 rounded p-3 text-sm">
          Web NFC вимагає Chrome на Android
        </div>
      )}
      <button
        onClick={isScanning ? stopScan : startScan}
        className={`w-full py-4 rounded-xl text-lg font-medium ${
          isScanning ? 'bg-red-500 text-white' : 'bg-blue-600 text-white'
        }`}
      >
        {isScanning ? '⏹ Зупинити сканування' : '📡 Сканувати NFC-мітку'}
      </button>
      {isScanning && (
        <div className="text-center py-8 text-gray-500">
          Піднесіть мітку до задньої частини телефону...
        </div>
      )}
      {scanned && (
        <AssetCard asset={scanned} onClose={() => setScanned(null)} />
      )}
    </div>
  )
}

Запис міток при інвентаризації

Для первинного маркування активів використовуємо ту саму бібліотеку запису:

async function tagAsset(assetId: string, assetData: AssetData) {
  const writer = new NFCWriter()
  await writer.write({
    json: {
      id: assetId,
      name: assetData.name,
      location: assetData.location,
      category: assetData.category,
      lastCheck: new Date().toISOString(),
    },
  })
}

Що входить в інтеграцію від нас

• Аналіз вимог та вибір відповідних чіпів (NTAG213/215/216).
• Розробка модуля читання/запису з обробкою всіх помилок (NoPermission, AbortError).
• UI/UX з великими кнопками та зрозумілими інструкціями для мобільних пристроїв.
• Тестування на реальних мітках у різних умовах (освітлення, кут піднесення).
• Документація по інтеграції з вашим бекендом (синхронізація даних).
• Підтримка після запуску (гарантія 3 місяці).

Терміни: від 2 до 5 днів залежно від обсягу робіт (читання — 1-2 дні, читання+запис+синхронізація — 3-5 днів).

Чому обирають нас?

Ми займаємося веб-розробкою більше 5 років, реалізували 50+ проєктів з інтеграцією апаратних API (NFC, Bluetooth, Camera). Гарантуємо, що рішення працюватиме на 95% Android-пристроїв з Chrome. Надаємо демо-стенд для тестування до початку робіт. Замовте інтеграцію Web NFC — зв'яжіться з нами для консультації. Оцінимо ваш проєкт і запропонуємо оптимальне технічне рішення.

Більш детально про Web NFC API читайте в MDN Web NFC API.