Berinteraksi dengan perangkat NFC di Chrome untuk Android

Membaca dan menulis ke tag NFC kini dapat dilakukan.

François Beaufort

Berhasil: Web NFC, bagian dari project kemampuan, diluncurkan di Chrome 89 untuk Android.

Apa itu Web NFC?

NFC adalah singkatan dari {i> Near Field Communications<i}, sebuah teknologi nirkabel jarak pendek beroperasi pada 13,56 MHz yang memungkinkan komunikasi antar perangkat pada jarak jauh kurang dari 10 cm dan kecepatan transmisi hingga 424 kbit/s.

Web NFC membuat situs dapat membaca dan menulis ke tag NFC saat berada dalam jarak dekat dengan perangkat pengguna (biasanya 5-10 cm, 2-4 inci). Cakupan saat ini terbatas pada NFC Data Exchange Format (NDEF), sebuah sistem format pesan biner otomatis yang berfungsi di berbagai format tag.

Diagram operasi NFC

Kasus penggunaan yang disarankan

Web NFC terbatas pada NDEF karena properti keamanan dari pembacaan dan menulis data NDEF lebih mudah dihitung. Operasi I/O tingkat rendah (misalnya, ISO-DEP, NFC-A/B, NFC-F), mode komunikasi Peer-to-Peer, dan Kartu Berbasis Host Emulasi (HCE) tidak didukung.

Contoh situs yang mungkin menggunakan Web NFC termasuk:

• Museum dan galeri seni dapat menampilkan informasi tambahan tentang pameran saat pengguna menyentuh perangkat mereka ke kartu NFC di dekat pameran.
• Situs pengelolaan inventaris dapat membaca atau menulis data ke tag NFC pada untuk memperbarui informasi tentang kontennya.
• Situs konferensi dapat menggunakannya untuk memindai badge NFC selama acara dan memastikan kunci itu dikunci untuk mencegah perubahan lebih lanjut pada informasi yang ditulis di dalamnya.
• Situs dapat menggunakannya untuk berbagi rahasia awal yang diperlukan untuk perangkat atau layanan skenario penyediaan dan juga untuk men-deploy data konfigurasi dalam operasional mode.

Ilustrasi pengelolaan inventaris NFC

Status saat ini

Langkah	Status
1. Buat penjelasan	Selesai
2. Membuat draf awal spesifikasi	Selesai
3. Kumpulkan masukan & mengulangi desain	Selesai
4. Uji coba origin	Selesai
5. Luncurkan	Selesai

Gunakan Web NFC

Deteksi fitur

Deteksi fitur untuk perangkat keras berbeda dari yang biasa Anda gunakan. Kehadiran NDEFReader memberi tahu Anda bahwa browser mendukung NFC Web, tetapi bukan apakah perangkat keras yang dibutuhkan tersedia. Khususnya, jika perangkat keras tidak ada, promise yang ditampilkan oleh panggilan tertentu akan ditolak. Saya akan memberikan detail saat saya mendeskripsikan NDEFReader.

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

Terminologi

Tag NFC adalah perangkat NFC pasif, artinya perangkat tersebut ditenagai oleh induksi ketika perangkat NFC aktif (seperti ponsel) berada di dekat Anda. Tag NFC hadir dalam berbagai bentuk dan model, seperti stiker, kartu kredit, pergelangan tangan, dan banyak lagi.

Tag NFC transparan

Objek NDEFReader adalah titik entri di Web NFC yang menampilkan fungsi untuk menyiapkan tindakan membaca dan/atau menulis yang terpenuhi saat tag NDEF akan muncul di dekatnya. NDEF di NDEFReader adalah singkatan dari NFC Data Exchange Format, format pesan biner ringan yang distandarkan oleh Forum NFC.

Objek NDEFReader berfungsi untuk menindaklanjuti pesan NDEF yang masuk dari tag NFC dan untuk menulis pesan NDEF ke tag NFC dalam jangkauan.

Tag NFC yang mendukung NDEF seperti catatan tempel. Siapa pun dapat membacanya, dan kecuali jika skrip itu hanya-baca, siapa pun dapat menulis ke sana. Berisi satu NDEF yang mengenkapsulasi satu atau beberapa data NDEF. Setiap pencatatan NDEF adalah struktur biner yang berisi {i>payload<i} data, dan informasi jenis terkait. Web NFC mendukung jenis pencatatan standar Forum NFC berikut: kosong, teks, URL, smart poster, jenis MIME, URL absolut, jenis eksternal, tidak diketahui, dan lokal .

Diagram pesan NDEF

Pindai tag NFC

Untuk memindai tag NFC, buat instance objek NDEFReader baru terlebih dahulu. Menelepon scan() menampilkan promise. Pengguna mungkin akan dimintai akses jika sebelumnya tidak memiliki akses diberikan. Promise akan diselesaikan jika semua kondisi berikut terpenuhi:

• Fungsi ini hanya dipanggil sebagai respons terhadap {i>gesture <i} pengguna seperti {i>gesture <i}sentuh atau klik mouse.
• Pengguna telah mengizinkan situs untuk berinteraksi dengan perangkat NFC.
• Ponsel pengguna mendukung NFC.
• Pengguna telah mengaktifkan NFC di ponselnya.

Setelah promise diselesaikan, pesan NDEF yang masuk akan tersedia oleh berlangganan peristiwa reading melalui pemroses peristiwa. Anda juga harus berlangganan ke peristiwa readingerror untuk diberi tahu saat ada tag NFC yang tidak kompatibel kedekatan.

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}.`);
});

Saat tag NFC berada dekat, peristiwa NDEFReadingEvent akan diaktifkan. Ini berisi dua properti yang unik untuknya:

• serialNumber menunjukkan nomor seri perangkat (mis. 00-11-22-33-44-55-66), atau string kosong jika tidak ada yang tersedia.
• message mewakili pesan NDEF yang disimpan di tag NFC.

Untuk membaca konten pesan NDEF, putar ulang message.records dan memproses pelanggan data mereka dengan tepat berdasarkan recordType mereka. Anggota data ditampilkan sebagai DataView karena memungkinkan penanganan kasus di mana data dikodekan dalam UTF-16.

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.
    }
  }
};

Catatan: Cookbook berisi banyak contoh cara membaca data NDEF berdasarkan jenis-jenis data.

Menulis tag NFC

Untuk menulis tag NFC, pertama-tama buat instance objek NDEFReader baru. Menelepon write() menampilkan promise. Pengguna mungkin akan dimintai jika akses tidak diizinkan diberikan sebelumnya. Pada tahap ini, pesan NDEF telah "disiapkan" dan menjanjikan akan diselesaikan jika semua kondisi berikut terpenuhi:

• Fungsi ini hanya dipanggil sebagai respons terhadap {i>gesture <i} pengguna seperti {i>gesture <i}sentuh atau klik mouse.
• Pengguna telah mengizinkan situs untuk berinteraksi dengan perangkat NFC.
• Ponsel pengguna mendukung NFC.
• Pengguna telah mengaktifkan NFC di ponselnya.
• Pengguna telah mengetuk tag NFC dan pesan NDEF berhasil ditulis.

Untuk menulis teks ke tag NFC, teruskan string ke metode write().

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

Untuk menulis data URL ke tag NFC, teruskan kamus yang mewakili NDEF pesan ke write(). Dalam contoh di bawah ini, pesan NDEF adalah kamus dengan kunci records. Nilainya adalah array kumpulan data - dalam hal ini, URL kumpulan data ditentukan sebagai objek dengan kunci recordType yang disetel ke "url" dan data kunci yang disetel ke string URL.

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}.`);
});

Anda juga dapat menulis beberapa catatan ke tag NFC.

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}.`);
});

Catatan: Buku masak berisi banyak contoh cara menulis jenis teks Data NDEF.

Jika tag NFC berisi pesan NDEF yang tidak dimaksudkan untuk ditimpa, atur properti overwrite ke false dalam opsi yang diteruskan ke write() . Dalam hal ini, promise yang dikembalikan akan ditolak jika pesan NDEF yang tersimpan di tag NFC.

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}.`);
});

Membuat tag NFC menjadi hanya baca

Untuk mencegah pengguna berbahaya menimpa konten tag NFC, Anda dapat membuat tag NFC menjadi hanya baca secara permanen. Operasi ini adalah proses satu arah dan tidak dapat dibatalkan. Setelah tag NFC dibuat hanya-baca, tag tersebut tidak dapat ditulis lagi.

Untuk membuat tag NFC menjadi hanya baca, buat instance objek NDEFReader baru terlebih dahulu. Menelepon makeReadOnly() menampilkan promise. Pengguna mungkin akan dimintai jika akses tidak diizinkan diberikan sebelumnya. Promise akan diselesaikan jika semua kondisi berikut terpenuhi terpenuhi:

• Fungsi ini hanya dipanggil sebagai respons terhadap {i>gesture <i} pengguna seperti {i>gesture <i}sentuh atau klik mouse.
• Pengguna telah mengizinkan situs untuk berinteraksi dengan perangkat NFC.
• Ponsel pengguna mendukung NFC.
• Pengguna telah mengaktifkan NFC di ponselnya.
• Pengguna telah mengetuk tag NFC dan tag NFC berhasil dijadikan hanya baca.

const ndef = new NDEFReader();
ndef.makeReadOnly()
.then(() => {
  console.log("NFC tag has been made permanently read-only.");
}).catch(error => {
  console.log(`Operation failed: ${error}`);
});

Berikut cara membuat tag NFC menjadi hanya baca secara permanen setelah menulis ke tag tersebut.

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}`);
}

Karena makeReadOnly() tersedia di Android dengan Chrome 100 atau yang lebih baru, periksa jika fitur ini didukung dengan:

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

Keamanan dan izin

Tim Chrome telah merancang dan menerapkan Web NFC menggunakan prinsip inti didefinisikan dalam Mengontrol Akses ke Platform Web yang Andal Fitur, termasuk kontrol pengguna, transparansi, dan ergonomi.

Karena NFC memperluas domain informasi yang berpotensi tersedia untuk {i>malware<i} situs web, ketersediaan NFC dibatasi untuk memaksimalkan kesadaran dan mengontrol penggunaan NFC.

Perintah pengguna NFC web

NFC web hanya tersedia untuk frame tingkat atas dan konteks penjelajahan yang aman (HTTPS saja). Origin harus meminta izin "nfc" terlebih dahulu saat menangani gestur pengguna (misalnya, klik tombol). NDEFReader scan(), write(), dan Metode makeReadOnly() memicu perintah pengguna, jika sebelumnya akses tidak tersedia diberikan.

  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.
    };
  };

Kombinasi dialog izin yang dimulai pengguna dan permintaan izin fisik di dunia nyata gerakan membawa perangkat ke atas tag NFC target mencerminkan pemilih yang ditemukan di file lain dan API akses perangkat.

Untuk melakukan pemindaian atau penulisan, laman web harus terlihat saat pengguna menyentuh tag NFC dengan perangkatnya. Browser menggunakan respons haptik untuk menunjukkan ketuk. Akses ke radio NFC diblokir jika layar dinonaktifkan atau perangkat dimatikan terkunci. Untuk halaman web yang tidak terlihat, menerima dan mendorong konten NFC ditangguhkan, dan dilanjutkan saat laman web terlihat kembali.

Berkat Page Visibility API, Anda dapat melacak kapan dokumen perubahan visibilitas.

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

Cookbook

Berikut adalah beberapa contoh kode untuk membantu Anda memulai.

Periksa izin

Permissions API memungkinkan pemeriksaan apakah izin "nfc" telah diberikan. Contoh ini menunjukkan cara memindai tag NFC tanpa interaksi pengguna jika akses yang telah diberikan sebelumnya, atau menampilkan tombol sebaliknya. Perhatikan bahwa hal yang sama untuk penulisan tag NFC karena menggunakan izin yang sama berdasarkan layar.

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();
  };
}

Membatalkan operasi NFC

Menggunakan primitif AbortController memudahkan pembatalan NFC operasional bisnis. Contoh di bawah ini menunjukkan cara meneruskan signal dari AbortController melalui opsi NDEFReader scan(), makeReadOnly(), write() dan membatalkan kedua operasi NFC secara bersamaan.

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();
};

Baca setelah tulis

Menggunakan write(), lalu scan() dengan AbortController memungkinkan untuk membaca tag NFC setelah menulis pesan ke tag tersebut. Contoh di bawah ini menunjukkan cara menulis pesan teks ke tag NFC dan membaca pesan baru di tag NFC. Pemindaian akan berhenti memindai setelah tiga detik.

// 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.

Membaca dan menulis kumpulan data teks

Kumpulan data teks data dapat didekode dengan TextDecoder yang dibuat instance-nya dengan mencatat properti encoding. Perhatikan bahwa bahasa rekaman teks tersedia melalui properti lang.

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

Untuk menulis kumpulan data teks sederhana, teruskan string ke metode write() NDEFReader.

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

Catatan teks adalah UTF-8 secara {i>default<i} dan mengasumsikan bahasa dokumen saat ini tetapi kedua properti (encoding dan lang) dapat ditentukan menggunakan sintaksis lengkap untuk membuat data NDEF kustom.

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] });

Membaca dan menulis data URL

Gunakan TextDecoder untuk mendekode data data.

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

Untuk menulis kumpulan data URL, teruskan kamus pesan NDEF ke NDEFReader Metode write(). Catatan URL yang ada di dalam pesan NDEF didefinisikan sebagai objek dengan kunci recordType yang disetel ke "url" dan kunci data yang disetel ke URL {i>string<i}.

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

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

Membaca dan menulis data jenis MIME

Properti mediaType dari kumpulan data jenis MIME mewakili jenis MIME dari Payload data NDEF sehingga data dapat didekode dengan benar. Misalnya, gunakan JSON.parse untuk mendekode teks JSON dan elemen Gambar untuk mendekode data gambar.

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.
  }
}

Untuk menulis kumpulan data jenis MIME, teruskan kamus pesan NDEF ke NDEFReader Metode write(). Kumpulan data jenis MIME yang terdapat dalam pesan NDEF telah ditentukan sebagai objek dengan kunci recordType yang disetel ke "mime", kunci mediaType disetel ke jenis MIME aktual dari konten, dan kunci data yang disetel ke objek yang dapat berupa ArrayBuffer atau memberikan tampilan ke ArrayBuffer (mis. 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] });

Membaca dan menulis data URL absolut

Catatan URL absolut data dapat didekode dengan TextDecoder sederhana.

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

Untuk menulis data URL absolut, teruskan kamus pesan NDEF ke Metode write() NDEFReader. Catatan URL absolut yang terdapat dalam NDEF pesan ditentukan sebagai objek dengan kunci recordType yang disetel ke "absolute-url" dan kunci data yang disetel ke string URL.

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

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

Baca dan tulis catatan poster cerdas

Pencatatan poster cerdas (digunakan dalam iklan majalah, selebaran, baliho, dll.), menjelaskan beberapa konten web sebagai data NDEF yang berisi file NDEF sebagai payload. Panggil record.toRecords() untuk mengubah data ke daftar rekaman yang ada dalam catatan {i>smart poster<i}. URL tersebut harus memiliki catatan URL, kumpulan data teks untuk judul, kumpulan data jenis MIME untuk gambar, dan beberapa catatan kumpulan data jenis lokal, seperti ":t", ":act", dan ":s" masing-masing untuk jenis, tindakan, dan ukuran catatan poster cerdas.

Pencatatan jenis lokal bersifat unik hanya dalam konteks lokal dari penyimpanan data NDEF. Gunakan parameter tersebut ketika arti jenisnya tidak berpengaruh di luar konteks lokal dari catatan yang memuatnya dan kapan penggunaan penyimpanan sulit batasan data. Nama rekaman jenis lokal selalu dimulai dengan : di Web NFC (mis. ":t", ":s", ":act"). Ini untuk membedakan catatan teks dengan ketik rekaman teks.

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;
  }
}

Untuk menulis data poster cerdas, teruskan pesan NDEF ke NDEFReader write() . Catatan poster cerdas yang terkandung dalam pesan NDEF didefinisikan sebagai objek dengan kunci recordType yang disetel ke "smart-poster" dan kunci data disetel ke objek yang mewakili (sekali lagi) pesan NDEF yang terdapat dalam rekaman poster cerdas.

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] });

Membaca dan menulis data jenis eksternal

Untuk membuat kumpulan data yang ditentukan aplikasi, gunakan kumpulan data jenis eksternal. Ini mungkin berisi pesan NDEF sebagai payload yang dapat diakses dengan toRecords(). Mereka nama berisi nama domain organisasi yang menerbitkan, tanda titik dua, dan jenis nama yang panjangnya minimal satu karakter, misalnya "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.
    }
  }
}

Untuk menulis kumpulan data jenis eksternal, teruskan kamus pesan NDEF ke Metode write() NDEFReader. Kumpulan data jenis eksternal yang ada dalam NDEF pesan didefinisikan sebagai objek dengan kunci recordType yang ditetapkan ke nama jenis eksternal dan kunci data yang disetel ke objek yang mewakili pesan NDEF yang ada di dalam catatan jenis eksternal. Perhatikan bahwa kunci data juga dapat ArrayBuffer atau memberikan tampilan ke ArrayBuffer (mis. 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] });

Membaca dan menulis data kosong

Kumpulan data kosong tidak memiliki payload.

Untuk menulis kumpulan data kosong, teruskan kamus pesan NDEF ke NDEFReader Metode write(). Kumpulan data kosong yang terdapat dalam pesan NDEF didefinisikan sebagai objek dengan kunci recordType yang disetel ke "empty".

const emptyRecord = {
  recordType: "empty"
};

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

Dukungan browser

NFC web tersedia di Android pada Chrome 89.

Tips Developer

Berikut ini beberapa hal yang ingin saya ketahui saat mulai menggunakan Web NFC:

• Android menangani tag NFC di tingkat OS sebelum Web NFC dioperasikan.
• Anda dapat menemukan ikon NFC di material.io.
• Gunakan data NDEF id untuk mengidentifikasi kumpulan data dengan mudah saat diperlukan.
• Tag NFC tidak berformat yang mendukung NDEF berisi satu kumpulan data dengan jenis kosong.
• Menulis catatan aplikasi Android itu mudah, seperti yang ditunjukkan di bawah ini.

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] });

Demo

Coba contoh resmi dan lihat beberapa demo NFC Web yang menarik:

• Demo kartu
• Demo Bahan Makanan
• NFC Sensor Intel RSP
• MEO Media

Demo kartu NFC web di Chrome Dev Summit 2019

Masukan

Grup Komunitas NFC Web dan Tim Chrome ingin mengetahui pendapat dan pengalaman Anda saat menggunakan Web NFC.

Beri tahu kami tentang desain API

Apakah ada sesuatu terkait API yang tidak berfungsi seperti yang diharapkan? Atau apakah ada kehilangan metode atau properti yang diperlukan untuk mengimplementasikan ide?

Ajukan masalah spesifikasi di repo GitHub Web NFC atau tambahkan pendapat Anda ke masalah yang ada.

Laporkan masalah terkait penerapan

Apakah Anda menemukan bug pada implementasi Chrome? Ataukah implementasi berbeda dengan spesifikasi?

Laporkan bug di https://new.crbug.com. Pastikan untuk menyertakan sebanyak mungkin sedetail mungkin, berikan petunjuk sederhana untuk mereproduksi {i>bug<i}, dan Komponen ditetapkan ke Blink>NFC. Glitch sangat cocok untuk berbagi repro dengan cepat dan mudah.

Tunjukkan dukungan

Anda berencana menggunakan Web NFC? Dukungan publik Anda membantu tim Chrome memprioritaskan fitur dan menunjukkan kepada vendor browser lain betapa pentingnya untuk mendukung mereka.

Kirim tweet ke @ChromiumDev menggunakan hashtag #WebNFC dan beri tahu kami tempat serta cara Anda menggunakannya.

Link bermanfaat

• Spesifikasi
• Demo Web NFC | Sumber Demo Web NFC
• Bug pelacakan
• Entri ChromeStatus.com
• Komponen Kedipan: Blink>NFC

Ucapan terima kasih

Terima kasih banyak kepada orang-orang di Intel yang telah menerapkan Web NFC. Google Chrome bergantung pada komunitas komitmen yang bekerja sama untuk memindahkan Chromium proyek ke depan. Tidak semua committer Chromium adalah Googler, dan kontributor berhak mendapatkan pengakuan khusus!