Web NFC API ile tarayıcıda NFC etiketleri okuma ve yazma

Web NFC ne yapar

Yakın Alan İletişimi (NFC) geleneksel olarak yerel mobil uygulamaların alanıydı: bir telefonun etiket okumasını ya da programlamasını istiyorsanız, bir iOS veya Android uygulaması yayınlamanız gerekirdi. dev.to'da yayımlanan bir rehber, bu yeteneği tarayıcıya taşıyan Web NFC API'sini adım adım anlatıyor; bir web sayfası, kurulum adımı olmadan fiziksel etiketlerden veri okuyabiliyor ve bunlara yeni yükler yazabiliyor.

Yazara göre pratik uygulamalar arasında vCard olarak kodlanmış dijital kartvizitler, akıllı etkinlik biletleri, Wi-Fi kimlik bilgilerinin paylaşımı ve dokunma tabanlı donanım etkileşimleri yer alıyor.

Destek ve özellik algılama

API'nin erişimi şu anda dar. Rehberin belirttiğine göre, yerel destek Android için Chrome'un 89. sürümünden itibaren mevcut ve aktif bir NFC çipine sahip bir Android cihaz ile NTAG213, NTAG215 veya NTAG216 gibi NDEF uyumlu etiketlere ihtiyacınız var. Sayfaların ayrıca HTTPS üzerinden sunulması gerekiyor; localhost geliştirme istisnası olarak kabul ediliyor.

Destek sınırlı olduğundan, rehber her şeyden önce API'yi algılamayı öneriyor:

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

Etiketleri okuma

Tarama, bir NDEFReader oluşturup scan() çağırarak başlıyor. Çağrı, sayfa yüklenirken otomatik tetiklenmek yerine bir kullanıcı hareketinden — örneğin bir düğme tıklamasından — gelmek zorunda. Etkinleştirildikten sonra, bir etiket menzile girdiğinde ayrıştırılmış NDEF mesajını ve etiketin seri numarasını taşıyan bir reading event tetikleniyor.

Örnek, message.records üzerinde dolaşıyor ve kayıt türüne göre dallanıyor: text kayıtları, kaydın kendi encoding değeriyle başlatılan bir TextDecoder ile çözümleniyor, url kayıtları düz metin olarak çözümleniyor ve text/vcard mediaType'ına sahip her şey bir kontak kartı olarak ele alınıyor. Ayrı bir readingerror event'ı ise ayrıştırılamayan etiketleri karşılıyor; yazar bunun genellikle etiketi yeniden konumlandırmak anlamına geldiğini söylüyor:

js async function startScanning() { const ndef = new NDEFReader(); await ndef.scan();

ndef.addEventListener('reading', ({ message, serialNumber }) => { console.log(Tag detected: ${serialNumber}); for (const record of message.records) { if (record.recordType === 'text') { const text = new TextDecoder(record.encoding).decode(record.data); console.log(text); } else if (record.recordType === 'url') { const url = new TextDecoder().decode(record.data); console.log(url); } else if (record.mediaType === 'text/vcard') { const vcard = new TextDecoder().decode(record.data); console.log(vcard); } } });

ndef.addEventListener('readingerror', () => { console.error('Could not read tag. Try holding it closer.'); }); }

Metin, URL ve vCard yazma

Yazma işlemi aynı reader nesnesi üzerinden yapılıyor. write() metodu bir records dizisi alıyor ve rehber, başarılı bir yazma işleminin etikette halihazırda bulunan NDEF kayıtlarının yerini aldığı konusunda uyarıyor. Bir URL yükü en basit durum:

js async function writeUrlToTag(urlToSave) { const ndef = new NDEFReader(); await ndef.write({ records: [ { recordType: 'url', data: urlToSave } ] }); }

Kontak kartları ise bir adım daha gerektiriyor. vCard metni, CRLF ile ayrılmış satırlar halinde — BEGIN:VCARD'tan END:VCARD'a, FN, TEL, EMAIL ve URL gibi alanlarla — oluşturuluyor, ardından TextEncoder ile kodlanıp 'text/vcard' mediaType'ını taşıyan bir MIME kaydı olarak yazılıyor.

Etiketi salt okunur kilitleme

NDEFReader ayrıca makeReadOnly() metodunu sunuyor; bu, etikete yapılan tüm yazma işlemlerini kalıcı olarak devre dışı bırakıyor. Rehber, bunun geri alınamayacağını açıkça belirtiyor ve örneği, metodu çağırmadan önce kullanıcıdan onay istiyor.

Güvenlik kısıtlamaları

dev.to rehberine göre üç kural API'nin nasıl kullanılabileceğini şekillendiriyor:

• Hem tarama hem yazma, açık bir kullanıcı hareketiyle tetiklenmek zorunda.
• API güvenli bağlam dışında çalışmıyor; bu yüzden localhost dışında düz HTTP işe yaramıyor.
• Uzun süreli taramalar iptal edilebilir olmalı. Önerilen pattern, scan()'a bir AbortController sinyali geçirmek ve daha sonra abort etmek — örnek, dokunma olmadan 15 saniye sonra zaman aşımına uğruyor.

Yazar ayrıca, etiketleri incelemek, kartları programlamak, NDEF yüklerini kilitlemek ve vCard ile QR kodları oluşturmak için Web NFC üzerine kurulu ücretsiz bir tarayıcı tabanlı araç paketi olan NfcTool.org'a dikkat çekiyor.

Neden önemli

Web NFC, etiket tabanlı projelerdeki en büyük sürtünme noktasını ortadan kaldırıyor: uygulama dağıtımı. Etkinlik kaydı, envanter etiketleme ve akıllı kartvizitler artık tek bir URL'un yapabileceği şeyler haline geliyor ve bu, prototipleme ile küçük dağıtımların ekonomisini değiştiriyor. Bedeli ise erişim — destek Android'de Chrome ile sınırlıyken, kullanıcıya dönük her şeyin bir yedek yol sunması gerekiyor. Katı kullanıcı hareketi, HTTPS ve üzerine yazma kuralları da geliştiricilerin özellikle write()'ın mevcut veriyi değiştirmesi ve makeReadOnly()'nin geri dönüşsüz olması konusunda dikkatli tasarlaması gerektiği anlamına geliyor.