Android için Chrome'da NFC cihazlarıyla etkileşimde bulunma

Artık NFC etiketlerini okuma ve bu etiketlere yazma imkanı vardır.

François Beaufort
François Beaufort
GitHub

Web NFC nedir?

NFC, kısa menzilli kablosuz bir teknoloji olan Near Field Communication anlamına gelir. 13,56 MHz hızda çalışarak cihazlar arasında belirli bir mesafeden iletişim kurulmasını sağlar. 10 cm'den az ve 424 kbit/sn'ye kadar iletim hızı.

Web NFC, sitelerin NFC etiketlerini okuma ve bu etiketlere yazma imkanı sunar. kullanıcı cihazına yakın mesafede (genellikle 5-10 cm, 2-4 inç) olmalıdır. Geçerli kapsam, yalnızca NFC Veri Değişimi Biçimi (NDEF) ile sınırlıdır. ikili mesaj biçimine sahiptir.

Veri alışverişi için NFC etiketine güç veren bir telefon
NFC işleminin gösterildiği şema

Önerilen kullanım alanları

Web NFC, okumanın güvenlik özellikleri ve NDEF ile sınırlıdır. NDEF verilerini yazmak daha kolay. Düşük düzey G/Ç işlemleri (ör. ISO-DEP, NFC-A/B, NFC-F), Eşler arası iletişim modu ve ana makineye dayalı kart Emülasyon (HCE) desteklenmez.

Web NFC'yi kullanabilecek sitelere örnek olarak şunlar verilebilir:

  • Müzeler ve sanat galerileri bir sergi hakkında ek bilgiler gösterebilir Kullanıcı, cihazını serginin yanındaki bir NFC kartına dokundurduğunda.
  • Envanter yönetimi siteleri, bir cihazdaki NFC etiketine veri okuyabilir veya içindeki bilgileri güncellemek için kullanılır.
  • Konferans siteleri, etkinlik sırasında NFC rozetlerini taramak için bu özelliği kullanabilir. üzerinde yazılan bilgilerde başka değişiklik yapılmasını önlemek için kilitlenir.
  • Siteler, cihaz veya hizmet için gereken ilk gizli anahtarları paylaşmak için bu hesabı kullanabilir ve aynı zamanda yapılandırma verilerini operasyonel yatırım yapmanız önemlidir.
ziyaret edin.
Telefon birkaç NFC etiketini tarıyor
NFC envanter yönetimi görseli

Mevcut durum

Step Durum
1. Açıklayıcı oluşturun Tamamlandı
2. İlk spesifikasyon taslağını oluşturun Tamamlandı
3. Geri bildirim toplama tasarımı yineleyin Tamamlandı
4. Kaynak denemesi Tamamlandı
5. Başlat Tamamlandı

Web NFC'yi kullan

Özellik algılama

Donanım algılaması, muhtemelen alışkın olduğunuz özellikten farklıdır. NDEFReader varlığı, tarayıcının Web NFC'yi desteklediğini gösterir, ancak cihazın mevcut olup olmadığını kontrol edin. Özellikle donanımda belirli çağrılarda verilen taahhüt reddedilir. Size NDEFReader ile ilgili ayrıntıları öğrenmek istiyorum.

if ('NDEFReader' in window) { /* Scan and write NFC tags */ }

Terminoloji

NFC etiketi, pasif bir NFC cihazıdır. Diğer bir deyişle, mıknatıslı yakındaysa etkin bir NFC cihazı (telefon gibi) olduğunda indüksiyon. NFC etiketleri ve pek çok farklı biçimde olabilir. Örneğin, çıkartmalar, kredi kartları, kol bilekleri ve daha fazla.

Şeffaf bir NFC etiketinin fotoğrafı
Şeffaf bir NFC etiketi

NDEFReader nesnesi, Web NFC'de işlevi gösteren giriş noktasıdır bir NDEF etiketi olduğunda tamamlanan okuma ve/veya yazma işlemlerini hazırlamak için sağlamak önemli. NDEFReader içindeki NDEF, NFC Veri Değişimi anlamına gelir Bu biçim, NFC Forumu tarafından standartlaştırılmış hafif bir ikili mesaj biçimidir.

NDEFReader nesnesi, NFC etiketlerinden gelen NDEF mesajları üzerinde işlem yapmak içindir ve aralık içindeki NFC etiketlerine NDEF mesajlarını yazmak için kullanılır.

NDEF'yi destekleyen bir NFC etiketi, yapışkan not gibidir. Bunu herkes okuyabilir ve salt okunur olmadığı sürece herkes bu dosyaya yazabilir. Tek bir NDEF içerir bir veya daha fazla NDEF kaydını içeren bir mesaj içerir. Her NDEF kaydı bir Veri yükünü ve ilişkili tür bilgilerini içeren ikili yapı. Web NFC, şu NFC Forumu standartlaştırılmış kayıt türlerini destekler: boş, metin, URL, akıllı poster, MIME türü, mutlak URL, harici tür, bilinmeyen ve yerel türü.

NDEF mesajının şeması
NDEF mesajı şeması

NFC etiketlerini tarayın

NFC etiketlerini taramak için önce yeni bir NDEFReader nesnesi oluşturun. scan() aranıyor bir vaat döndürür. Daha önce erişim verilmediyse kullanıcıdan bilgi istenebilir verildi. Aşağıdaki koşulların tamamı karşılanırsa taahhüt sona erer:

  • Telefon yalnızca dokunma hareketi gibi bir kullanıcı hareketine yanıt olarak çağrılmıştır veya fare tıklamasıdır.
  • Kullanıcı, web sitesinin NFC cihazlarıyla etkileşim kurmasına izin verdi.
  • Kullanıcının telefonu NFC'yi destekler.
  • Kullanıcı, telefonunda NFC'yi etkinleştirdi.

Söz konusu sorun çözüldükten sonra, gelen NDEF mesajlarını etkinlik işleyici aracılığıyla reading etkinliklerine abone olma. Abone olmanız da gerekiyor Uyumsuz NFC etiketleri bulunduğunda bildirim almak için readingerror etkinliğe yardımcı olabilir.

const ndef = new NDEFReader();
ndef.scan().then(() => {
  console.log("Scan started successfully.");
  ndef.onreadingerror = () => {
    console.log("Cannot read data from the NFC tag. Try another one?");
  };
  ndef.onreading = event => {
    console.log("NDEF message read.");
  };
}).catch(error => {
  console.log(`Error! Scan failed to start: ${error}.`);
});

Yakında bir NFC etiketi olduğunda bir NDEFReadingEvent etkinliği tetiklenir. Google içerdiği benzersiz iki özellik içerir:

  • serialNumber, cihazın seri numarasını temsil eder (ör. 00-11-22-33-44-55-66) veya boş dize kullanabilirsiniz.
  • message, NFC etiketinde depolanan NDEF mesajını temsil eder.

NDEF mesajının içeriğini okumak için message.records ve data üyelerini recordType değerlerine göre uygun şekilde işleme. data üyesi, işleme izin verdiği için DataView olarak gösteriliyor verilerin UTF-16 olarak kodlandığı durumlar.

ndef.onreading = event => {
  const message = event.message;
  for (const record of message.records) {
    console.log("Record type:  " + record.recordType);
    console.log("MIME type:    " + record.mediaType);
    console.log("Record id:    " + record.id);
    switch (record.recordType) {
      case "text":
        // TODO: Read text record with record data, lang, and encoding.
        break;
      case "url":
        // TODO: Read URL record with record data.
        break;
      default:
        // TODO: Handle other records with record data.
    }
  }
};

NFC etiketlerini yazma

NFC etiketleri yazmak için önce yeni bir NDEFReader nesnesi oluşturun. Telefon etme write(), bir söz döndürür. Erişim önerilmediyse kullanıcıdan istenebilir izin veriliyor. Bu noktada bir NDEF mesajı "hazırlanır" söz vermek aşağıdaki koşulların tümü karşılandığında çözülür:

  • Telefon yalnızca dokunma hareketi gibi bir kullanıcı hareketine yanıt olarak çağrılmıştır veya fare tıklamasıdır.
  • Kullanıcı, web sitesinin NFC cihazlarıyla etkileşim kurmasına izin verdi.
  • Kullanıcının telefonu NFC'yi destekler.
  • Kullanıcı, telefonunda NFC'yi etkinleştirdi.
  • Kullanıcı bir NFC etiketine dokundu ve NDEF mesajı başarıyla yazıldı.

Bir NFC etiketine metin yazmak için write() yöntemine bir dize iletin.

const ndef = new NDEFReader();
ndef.write(
  "Hello World"
).then(() => {
  console.log("Message written.");
}).catch(error => {
  console.log(`Write failed :-( try again: ${error}.`);
});

NFC etiketine URL kaydı yazmak için NDEF'yi temsil eden bir sözlük iletin. write() adlı kişiye mesaj. Aşağıdaki örnekte NDEF mesajı bir sözlük records tuşuyla değiştirin. Değeri bir kayıt dizisidir; bu örnekte, bir URL kaydı, recordType anahtarı "url" ve data olarak ayarlanmış bir nesne olarak tanımlanır anahtarını URL dizesine ayarlayın.

const ndef = new NDEFReader();
ndef.write({
  records: [{ recordType: "url", data: "https://w3c.github.io/web-nfc/" }]
}).then(() => {
  console.log("Message written.");
}).catch(error => {
  console.log(`Write failed :-( try again: ${error}.`);
});

Bir NFC etiketine birden fazla kayıt yazmak da mümkündür.

const ndef = new NDEFReader();
ndef.write({ records: [
    { recordType: "url", data: "https://w3c.github.io/web-nfc/" },
    { recordType: "url", data: "https://web.dev/nfc/" }
]}).then(() => {
  console.log("Message written.");
}).catch(error => {
  console.log(`Write failed :-( try again: ${error}.`);
});

NFC etiketinde, üzerine yazılmaması gereken bir NDEF mesajı varsa write() öğesine iletilen seçeneklerde false öğesine overwrite özelliğini yöntemidir. Bu durumda, döndürülen taahhüt; bir NDEF iletisi NFC etiketinde zaten depolanıyor.

const ndef = new NDEFReader();
ndef.write("Writing data on an empty NFC tag is fun!", { overwrite: false })
.then(() => {
  console.log("Message written.");
}).catch(error => {
  console.log(`Write failed :-( try again: ${error}.`);
});

NFC etiketlerini salt okunur yap

Kötü amaçlı kullanıcıların bir NFC etiketi içeriğinin üzerine yazmasını önlemek için NFC etiketlerini kalıcı olarak salt okunur hale getirir. Bu işlem tek yönlü bir süreçtir geri alınamaz. Bir NFC etiketi salt okunur hale getirildikten sonra yazılamaz artık ekleyebilirsiniz.

NFC etiketlerini salt okunur hale getirmek için önce yeni bir NDEFReader nesnesi örneklendirin. Telefon etme makeReadOnly(), bir söz döndürür. Erişim önerilmediyse kullanıcıdan istenebilir izin veriliyor. Aşağıdaki koşulların tümü sağlandığı takdirde vaat gerçekleştirilecektir karşılandı:

  • Telefon yalnızca dokunma hareketi gibi bir kullanıcı hareketine yanıt olarak çağrılmıştır veya fare tıklamasıdır.
  • Kullanıcı, web sitesinin NFC cihazlarıyla etkileşim kurmasına izin verdi.
  • Kullanıcının telefonu NFC'yi destekler.
  • Kullanıcı, telefonunda NFC'yi etkinleştirdi.
  • Kullanıcı bir NFC etiketine dokundu ve NFC etiketi başarıyla salt okunur duruma getirildi.
const ndef = new NDEFReader();
ndef.makeReadOnly()
.then(() => {
  console.log("NFC tag has been made permanently read-only.");
}).catch(error => {
  console.log(`Operation failed: ${error}`);
});

Bir NFC etiketinin üzerine yazdıktan sonra etiketi kalıcı olarak salt okunur hale getirmek için yapmanız gerekenler aşağıda açıklanmıştır.

const ndef = new NDEFReader();
try {
  await ndef.write("Hello world");
  console.log("Message written.");
  await ndef.makeReadOnly();
  console.log("NFC tag has been made permanently read-only after writing to it.");
} catch (error) {
  console.log(`Operation failed: ${error}`);
}

makeReadOnly(), Android'de Chrome 100 veya sonraki sürümlerde kullanılabildiğinden kontrol edin. Bu özellik aşağıdakilerle destekleniyorsa:

if ("NDEFReader" in window && "makeReadOnly" in NDEFReader.prototype) {
  // makeReadOnly() is supported.
}

Güvenlik ve izinler

Chrome ekibi, Web NFC'yi temel ilkeleri kullanarak tasarlamış ve uygulamıştır Güçlü Web Platformuna Erişimi Kontrol Etme bölümünde tanımlanmıştır Özellikler (kullanıcı kontrolü, şeffaflık ve ergonomi dahil).

NFC, zararlı olabilecek bilgilerin alanını genişlettiği için NFC'nin kullanılabilirliği, kullanıcıların kendi mobil web sitelerinde ve ve NFC kullanımını kontrol etmenizi sağlar.

Bir web sitesindeki Web NFC isteminin ekran görüntüsü
Web NFC kullanıcı istemi

Web NFC yalnızca üst düzey çerçevelerde ve güvenli göz atma bağlamlarında kullanılabilir (HTTPS . Kaynakların ilk olarak "nfc" izinlerini kullanıcı hareketi (ör.düğme tıklaması). NDEFReader scan(), write() ve Erişim daha önce yapılmamışsa makeReadOnly() yöntemleri bir kullanıcı istemini tetikler verildi.

  document.querySelector("#scanButton").onclick = async () => {
    const ndef = new NDEFReader();
    // Prompt user to allow website to interact with NFC devices.
    await ndef.scan();
    ndef.onreading = event => {
      // TODO: Handle incoming NDEF messages.
    };
  };

Kullanıcı tarafından başlatılan izin istemi ile gerçek, fiziksel Cihazı bir hedef NFC etiketinin üzerine getirme hareketi, seçiciyi yansıtır kalıbının aynı olması gerekir.

Tarama veya yazma işlemi gerçekleştirmek için kullanıcı dokunduğunda web sayfası görünür olmalıdır. bir NFC etiketi kullanır. Tarayıcı, bir cihazdaki kullanıcı davranışını dokunun. Ekran kapalıysa veya cihaz kapalıysa NFC radyoya erişim engellenir kilitli. Görünür olmayan web sayfaları için NFC içeriğinin alınması ve aktarılması askıya alınır ve bir web sayfası tekrar görünür hale geldiğinde devam ettirilir.

Page Görünürlük API'si sayesinde, sitenizdeki dokümanların her bir görünürlük değişiklikleridir.

document.onvisibilitychange = event => {
  if (document.hidden) {
    // All NFC operations are automatically suspended when document is hidden.
  } else {
    // All NFC operations are resumed, if needed.
  }
};

Yemek Kitabı

Aşağıda, başlamanıza yardımcı olacak bazı kod örnekleri verilmiştir.

İzni kontrol et

Permissions API, "nfc" izninin geçerli olup olmadığının kontrol edilmesine olanak tanır. verildi. Bu örnekte, aşağıdaki durumlarda kullanıcı etkileşimi olmadan NFC etiketlerinin nasıl taranacağı gösterilmektedir olup olmadığını kontrol edebilir veya bir düğme gösterebilirsiniz. Aynı mekanizması, eşofman.

const ndef = new NDEFReader();

async function startScanning() {
  await ndef.scan();
  ndef.onreading = event => {
    /* handle NDEF messages */
  };
}

const nfcPermissionStatus = await navigator.permissions.query({ name: "nfc" });
if (nfcPermissionStatus.state === "granted") {
  // NFC access was previously granted, so we can start NFC scanning now.
  startScanning();
} else {
  // Show a "scan" button.
  document.querySelector("#scanButton").style.display = "block";
  document.querySelector("#scanButton").onclick = event => {
    // Prompt user to allow UA to send and receive info when they tap NFC devices.
    startScanning();
  };
}

NFC işlemlerini iptal et

AbortController temel öğesini kullanmak NFC'yi iptal etmeyi kolaylaştırır anlamına gelir. Aşağıdaki örnekte, bir signal değerinin nasıl iletileceği gösterilmektedir NDEFReader scan(), makeReadOnly() ve diğer seçeneklerle AbortController write() yöntemini kullanarak her iki NFC işlemini de aynı anda iptal edin.

const abortController = new AbortController();
abortController.signal.onabort = event => {
  // All NFC operations have been aborted.
};

const ndef = new NDEFReader();
await ndef.scan({ signal: abortController.signal });

await ndef.write("Hello world", { signal: abortController.signal });
await ndef.makeReadOnly({ signal: abortController.signal });

document.querySelector("#abortButton").onclick = event => {
  abortController.abort();
};

Yazdıktan sonra oku

write() ve ardından AbortController ile scan() kullanma temel özellik, NFC etiketinin bir mesaj yazdıktan sonra okunmasını mümkün kılar. Aşağıdaki örnekte, bir NFC etiketine kısa mesaj yazmayı ve okumayı NFC etiketindeki yeni mesaj. Üç saniye sonra taramayı durdurur.

// Waiting for user to tap NFC tag to write to it...
const ndef = new NDEFReader();
await ndef.write("Hello world");
// Success! Message has been written.

// Now scanning for 3 seconds...
const abortController = new AbortController();
await ndef.scan({ signal: abortController.signal });
const message = await new Promise((resolve) => {
  ndef.onreading = (event) => resolve(event.message);
});
// Success! Message has been read.

await new Promise((r) => setTimeout(r, 3000));
abortController.abort();
// Scanning is now stopped.

Metin kaydı okuma ve yazma

data metin kaydının kodu, şununla örneklenen bir TextDecoder ile çözülebilir: encoding mülkünü kaydedin. Metin kaydının dilinin lang mülkünden kullanılabilir.

function readTextRecord(record) {
  console.assert(record.recordType === "text");
  const textDecoder = new TextDecoder(record.encoding);
  console.log(`Text: ${textDecoder.decode(record.data)} (${record.lang})`);
}

Basit metin kaydı yazmak için NDEFReader write() yöntemine bir dize iletin.

const ndef = new NDEFReader();
await ndef.write("Hello World");

Metin kayıtları varsayılan olarak UTF-8'dir ve geçerli dokümanın dilini varsayar ancak her iki özellik de (encoding ve lang) tam söz dizimi kullanılarak belirtilebilir özel NDEF kaydı oluşturun.

function a2utf16(string) {
  let result = new Uint16Array(string.length);
  for (let i = 0; i < string.length; i++) {
    result[i] = string.codePointAt(i);
  }
  return result;
}

const textRecord = {
  recordType: "text",
  lang: "fr",
  encoding: "utf-16",
  data: a2utf16("Bonjour, François !")
};

const ndef = new NDEFReader();
await ndef.write({ records: [textRecord] });

URL kaydı okuma ve yazma

Kaydın data kodunu çözmek için TextDecoder kullanın.

function readUrlRecord(record) {
  console.assert(record.recordType === "url");
  const textDecoder = new TextDecoder();
  console.log(`URL: ${textDecoder.decode(record.data)}`);
}

URL kaydı yazmak için bir NDEF mesaj sözlüğünü NDEFReader'a iletin write() yöntemini çağırın. NDEF mesajında bulunan URL kaydı recordType anahtarı "url" olarak ayarlanmış ve data anahtarı URL'ye ayarlanmış bir nesne dize.

const urlRecord = {
  recordType: "url",
  data:"https://w3c.github.io/web-nfc/"
};

const ndef = new NDEFReader();
await ndef.write({ records: [urlRecord] });

MIME türü kaydı okuma ve yazma

Bir MIME türü kaydının mediaType özelliği, data kodunun doğru şekilde çözülebilmesi için NDEF kaydı yükü. Örneğin, şunu kullanın: JSON metninin kodunu, resim verilerinin kodunu çözmek için de bir Image öğesini çözmek için JSON.parse.

function readMimeRecord(record) {
  console.assert(record.recordType === "mime");
  if (record.mediaType === "application/json") {
    const textDecoder = new TextDecoder();
    console.log(`JSON: ${JSON.parse(decoder.decode(record.data))}`);
  }
  else if (record.mediaType.startsWith('image/')) {
    const blob = new Blob([record.data], { type: record.mediaType });
    const img = new Image();
    img.src = URL.createObjectURL(blob);
    document.body.appendChild(img);
  }
  else {
    // TODO: Handle other MIME types.
  }
}

MIME türü kayıt yazmak için bir NDEF ileti sözlüğünü NDEFReader'a iletin write() yöntemini çağırın. NDEF mesajında bulunan MIME türü kaydı tanımlanır recordType anahtarı "mime", mediaType anahtarı içeriğin gerçek MIME türünü ve bu işlemi gerçekleştirebilecek bir nesneye ayarlanmış bir data bir ArrayBuffer olmalıdır veya bir ArrayBuffer (ör. Uint8Array, DataView).

const encoder = new TextEncoder();
const data = {
  firstname: "François",
  lastname: "Beaufort"
};
const jsonRecord = {
  recordType: "mime",
  mediaType: "application/json",
  data: encoder.encode(JSON.stringify(data))
};

const imageRecord = {
  recordType: "mime",
  mediaType: "image/png",
  data: await (await fetch("icon1.png")).arrayBuffer()
};

const ndef = new NDEFReader();
await ndef.write({ records: [jsonRecord, imageRecord] });

Mutlak URL kaydı okuma ve yazma

data mutlak URL kaydının kodu basit bir TextDecoder ile çözülebilir.

function readAbsoluteUrlRecord(record) {
  console.assert(record.recordType === "absolute-url");
  const textDecoder = new TextDecoder();
  console.log(`Absolute URL: ${textDecoder.decode(record.data)}`);
}

Mutlak URL kaydı yazmak için bir NDEF mesaj sözlüğünü NDEFReader write() yöntemi. NDEF'de bulunan mutlak URL kaydı mesaj, recordType anahtarı "absolute-url" olarak ayarlanmış bir nesne olarak tanımlanır ve URL dizesine ayarlanmış bir data anahtarı.

const absoluteUrlRecord = {
  recordType: "absolute-url",
  data:"https://w3c.github.io/web-nfc/"
};

const ndef = new NDEFReader();
await ndef.write({ records: [absoluteUrlRecord] });

Akıllı poster kaydı okuma ve yazma

Akıllı poster kaydı (dergi reklamlarında, broşürlerde, ilan tahtalarında, vb.), bazı web içeriklerini NDEF içeren NDEF kaydı olarak tanımlar mesajı verir. data öğesini listeye dönüştürmek için record.toRecords() komutunu çağırın bulunan kayıtların tümünü kontrol edin. Bunun bir URL kaydı, başlık için metin kaydı, resim için bir MIME türü kaydı ve bazı özel yerel tür kayıtları (ör. sırasıyla ":t", ":act" ve ":s") türü, işlemi ve boyutu akıllı poster kaydının boyutunu belirlemenize yardımcı olur.

Yerel tür kayıtları, yalnızca NDEF kaydı. Bunları, türlerin anlamının dışında önemli olmadığında kullanın depolama alanı kullanımının zor olduğu durumlarda, kaydın yerel bağlamına kısıtlayın. Yerel tür kayıt adları Web NFC'de her zaman : ile başlar (ör. ":t", ":s", ":act"). Bu, metin kaydını yerel bir kayıttan ayırt etmek için kullanılır Örneğin, metin kaydı yazın.

function readSmartPosterRecord(smartPosterRecord) {
  console.assert(record.recordType === "smart-poster");
  let action, text, url;

  for (const record of smartPosterRecord.toRecords()) {
    if (record.recordType == "text") {
      const decoder = new TextDecoder(record.encoding);
      text = decoder.decode(record.data);
    } else if (record.recordType == "url") {
      const decoder = new TextDecoder();
      url = decoder.decode(record.data);
    } else if (record.recordType == ":act") {
      action = record.data.getUint8(0);
    } else {
      // TODO: Handle other type of records such as `:t`, `:s`.
    }
  }

  switch (action) {
    case 0:
      // Do the action
      break;
    case 1:
      // Save for later
      break;
    case 2:
      // Open for editing
      break;
  }
}

Akıllı poster kaydı yazmak için NDEFReader'a bir NDEF mesajı iletin write() yöntemidir. NDEF mesajında bulunan akıllı poster kaydı şu şekilde tanımlanır: recordType anahtarı "smart-poster" ve data tuşu olarak ayarlanmış nesne bir NDEF mesajını (bir kez daha) temsil eden kullanabilirsiniz.

const encoder = new TextEncoder();
const smartPosterRecord = {
  recordType: "smart-poster",
  data: {
    records: [
      {
        recordType: "url", // URL record for smart poster content
        data: "https://my.org/content/19911"
      },
      {
        recordType: "text", // title record for smart poster content
        data: "Funny dance"
      },
      {
        recordType: ":t", // type record, a local type to smart poster
        data: encoder.encode("image/gif") // MIME type of smart poster content
      },
      {
        recordType: ":s", // size record, a local type to smart poster
        data: new Uint32Array([4096]) // byte size of smart poster content
      },
      {
        recordType: ":act", // action record, a local type to smart poster
        // do the action, in this case open in the browser
        data: new Uint8Array([0])
      },
      {
        recordType: "mime", // icon record, a MIME type record
        mediaType: "image/png",
        data: await (await fetch("icon1.png")).arrayBuffer()
      },
      {
        recordType: "mime", // another icon record
        mediaType: "image/jpg",
        data: await (await fetch("icon2.jpg")).arrayBuffer()
      }
    ]
  }
};

const ndef = new NDEFReader();
await ndef.write({ records: [smartPosterRecord] });

Harici tür kaydı okuma ve yazma

Uygulama tarafından tanımlanmış kayıtlar oluşturmak için harici tür kayıtlarını kullanın. Bunlar toRecords() ile erişilebilen yük olarak bir NDEF mesajı içermelidir. Diğer ad, düzenleyen kuruluşun alan adını, iki nokta üst üste işaretini ve türü içerir en az bir karakter uzunluğunda bir ad, örneğin, "example.com:foo".

function readExternalTypeRecord(externalTypeRecord) {
  for (const record of externalTypeRecord.toRecords()) {
    if (record.recordType == "text") {
      const decoder = new TextDecoder(record.encoding);
      console.log(`Text: ${textDecoder.decode(record.data)} (${record.lang})`);
    } else if (record.recordType == "url") {
      const decoder = new TextDecoder();
      console.log(`URL: ${decoder.decode(record.data)}`);
    } else {
      // TODO: Handle other type of records.
    }
  }
}

Harici tür kaydı yazmak için bir NDEF mesaj sözlüğünü NDEFReader write() yöntemi. NDEF'de bulunan harici tür kaydı mesajı, recordType anahtarının harici tür ve NDEF mesajını temsil eden nesneye ayarlanmış data anahtarı harici tür kaydında bulunmalıdır. data tuşunun da olabileceğini unutmayın. bir ArrayBuffer veya bir ArrayBuffer için görünüm sağlar (ör. Uint8Array, DataView).

const externalTypeRecord = {
  recordType: "example.game:a",
  data: {
    records: [
      {
        recordType: "url",
        data: "https://example.game/42"
      },
      {
        recordType: "text",
        data: "Game context given here"
      },
      {
        recordType: "mime",
        mediaType: "image/png",
        data: await (await fetch("image.png")).arrayBuffer()
      }
    ]
  }
};

const ndef = new NDEFReader();
ndef.write({ records: [externalTypeRecord] });

Boş bir kaydı okuma ve yazma

Boş kayıtların yükü yoktur.

Boş bir kayıt yazmak için bir NDEF mesaj sözlüğünü NDEFReader'a iletin write() yöntemini çağırın. NDEF mesajında bulunan boş kayıt şu şekilde tanımlanır: recordType anahtarı "empty" olarak ayarlanmış bir nesne.

const emptyRecord = {
  recordType: "empty"
};

const ndef = new NDEFReader();
await ndef.write({ records: [emptyRecord] });

Tarayıcı desteği

Web NFC, Android'de Chrome 89 sürümünde kullanılabilir.

Geliştiriciler İpuçları

Web NFC ile oyun oynamaya başladığımda bilseydim keşke aşağıda olduğum şeylerin listesi:

  • Android, Web NFC çalışmadan önce NFC etiketlerini işletim sistemi düzeyinde işler.
  • NFC simgesini material.io adresinde bulabilirsiniz.
  • Gerektiğinde bir kaydı kolayca tanımlamak için id adlı NDEF kaydını kullanın.
  • NDEF'yi destekleyen biçimlendirilmemiş bir NFC etiketi, boş türde tek bir kayıt içerir.
  • Android uygulama kaydı yazmak aşağıda gösterildiği gibi kolaydır.
const encoder = new TextEncoder();
const aarRecord = {
  recordType: "android.com:pkg",
  data: encoder.encode("com.example.myapp")
};

const ndef = new NDEFReader();
await ndef.write({ records: [aarRecord] });

Demolar

Resmi örneği deneyin ve bazı Web NFC demolarına göz atın:

ziyaret edin.
Chrome Dev Summit 2019'da web NFC kartları demosu

Geri bildirim

Web NFC Topluluk Grubu ve Chrome ekibi, Web NFC ile ilgili düşüncelerinizi ve deneyimlerinizi öğrenmekten memnuniyet duyar.

Bize API tasarımı hakkında bilgi verin

API'de beklendiği gibi çalışmayan bir şey mi var? Yoksa fikrinizi uygulamak için ihtiyacınız olan yöntem veya özelliklerden yoksun mu?

Web NFC GitHub deposunda spesifikasyon sorunu bildirin veya düşüncelerinizi şuraya ekleyin: bir sorun olabilir.

Uygulamayla ilgili bir sorunu bildirin

Chrome'un uygulanmasıyla ilgili bir hata buldunuz mu? Yoksa ve spesifikasyondan farklı mı?

https://new.crbug.com adresinden hata bildiriminde bulunun. Olabildiğince çok sayıda mümkün olduğunca ayrıntı verin, hatayı yeniden oluşturmak için basit talimatlar sağlayın ve Bileşenler Blink>NFC olarak ayarlandı. Glitch mükemmel bir yöntemdir hızlı ve kolay yenidenler paylaşabilirsiniz.

Desteğinizi gösterin

Web NFC'yi kullanmayı planlıyor musunuz? Herkese açık desteğiniz Chrome ekibine yardımcı olur önceliklendirir ve diğer tarayıcı tedarikçilerine, en önemli adımların destek olmak.

Hashtag'i kullanarak @ChromiumDev hesabına tweet gönderin #WebNFC ve nerede ve nasıl kullandığınızı bize bildirin.

Faydalı bağlantılar

Teşekkür

Web NFC'yi uygulamaya koyan Intel Ekibi'ne çok teşekkür ederiz. Google Chrome Chromium'u taşımak için birlikte çalışan aktivistler topluluğuna bağlı yardımcı olur. Chromium'u işleyen her kişi bir Google çalışanı değildir ve bu kişiler katkıda bulunanlar özel takdiri hak ediyor!