Berinteraksi dengan perangkat NFC di Chrome untuk Android

Membaca dan menulis ke tag NFC sekarang dapat dilakukan.

Apa itu Web NFC?

NFC adalah singkatan dari Near Field Communications, yaitu teknologi nirkabel jarak pendek yang beroperasi pada 13,56 MHz yang memungkinkan komunikasi antara perangkat pada jarak kurang dari 10 cm dan kecepatan transmisi hingga 424 kbit/dtk.

NFC Web memberi situs kemampuan untuk membaca dan menulis ke tag NFC jika tag berada dekat dengan perangkat pengguna (biasanya 5-10 cm, 2-4 inci). Cakupan saat ini terbatas pada NFC Data Exchange Format (NDEF), sebuah format pesan biner ringan yang berfungsi di berbagai format tag.

Kasus penggunaan yang disarankan

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

Contoh situs yang mungkin menggunakan Web NFC antara lain:

• Museum dan galeri seni dapat menampilkan informasi tambahan tentang tampilan saat pengguna menyentuh perangkat ke kartu NFC di dekat pameran.
• Situs pengelolaan inventaris dapat membaca atau menulis data ke tag NFC di penampung untuk memperbarui informasi di kontennya.
• Situs konferensi dapat menggunakannya untuk memindai badge NFC selama acara dan memastikan situs tersebut terkunci untuk mencegah perubahan lebih lanjut pada informasi yang tertulis di dalamnya.
• Situs dapat menggunakannya untuk membagikan secret awal yang diperlukan untuk skenario penyediaan layanan atau perangkat, serta untuk men-deploy data konfigurasi dalam mode operasional.

Status saat ini

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

Gunakan NFC Web

Deteksi fitur

Deteksi fitur untuk perangkat keras berbeda dari apa yang mungkin Anda biasa gunakan. Kehadiran NDEFReader memberi tahu Anda bahwa browser mendukung Web NFC, tetapi bukan apakah hardware yang diperlukan ada. Secara khusus, jika hardware tidak ada, promise yang ditampilkan oleh panggilan tertentu akan ditolak. Saya akan memberikan detail saat menjelaskan NDEFReader.

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

Terminologi

Tag NFC adalah perangkat NFC pasif, yang berarti diaktifkan oleh induksi magnetik saat perangkat NFC aktif (seperti ponsel) berada di dekat Anda. Tag NFC tersedia dalam berbagai bentuk dan model, seperti stiker, kartu kredit, lengan pergelangan tangan, dan lainnya.

Objek NDEFReader adalah titik entri di Web NFC yang mengekspos fungsi untuk menyiapkan tindakan membaca dan/atau menulis yang akan dipenuhi saat tag NDEF mendekati jarak. NDEF di NDEFReader adalah singkatan dari NFC Data Exchange Format, format pesan biner ringan yang distandardisasi oleh NFC Forum.

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

Tag NFC yang mendukung NDEF mirip seperti catatan tempel. Siapa pun dapat membacanya, dan siapa pun dapat menulisnya kecuali jika hanya-baca. Objek ini berisi satu pesan NDEF yang mengenkapsulasi satu atau beberapa data NDEF. Setiap data NDEF adalah struktur biner yang berisi payload data dan informasi jenis terkait. Web NFC mendukung jenis data standar Forum NFC berikut: kosong, teks, URL, smart poster, jenis MIME, URL absolut, jenis eksternal, tidak diketahui, dan jenis lokal.

Pindai tag NFC

Untuk memindai tag NFC, buat instance objek NDEFReader baru terlebih dahulu. Memanggil scan() akan menampilkan promise. Pengguna mungkin akan diminta jika akses belum diberikan sebelumnya. Promise akan di-resolve jika semua kondisi berikut terpenuhi:

• Panggilan ini hanya dipanggil sebagai respons terhadap gestur pengguna seperti gestur sentuh atau klik mouse.
• Pengguna telah mengizinkan situs berinteraksi dengan perangkat NFC.
• Ponsel pengguna mendukung NFC.
• Pengguna telah mengaktifkan NFC di ponselnya.

Setelah promise diselesaikan, pesan NDEF yang masuk akan tersedia dengan berlangganan peristiwa reading melalui pemroses peristiwa. Anda juga harus berlangganan peristiwa readingerror untuk mendapatkan notifikasi saat tag NFC yang tidak kompatibel berada dalam 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 di dekat Anda, peristiwa NDEFReadingEvent akan diaktifkan. ID ini berisi dua properti 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, lakukan loop message.records dan proses anggota data mereka secara tepat berdasarkan recordType mereka. Anggota data diekspos sebagai DataView karena memungkinkan penanganan kasus ketika data dienkode 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.
    }
  }
};

Menulis tag NFC

Untuk menulis tag NFC, buat instance objek NDEFReader baru terlebih dahulu. Memanggil write() akan menampilkan promise. Pengguna mungkin diminta jika akses tidak diberi sebelumnya. Pada tahap ini, pesan NDEF "siap" dan promise akan diselesaikan jika kondisi berikut terpenuhi:

• Panggilan ini hanya dipanggil sebagai respons terhadap gestur pengguna seperti gestur sentuh atau klik mouse.
• Pengguna telah mengizinkan situs berinteraksi dengan perangkat NFC.
• Ponsel pengguna mendukung NFC.
• Pengguna telah mengaktifkan NFC di ponselnya.
• Pengguna telah mengetuk tag NFC dan pesan NDEF telah 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 pesan NDEF ke write(). Pada contoh di bawah, pesan NDEF adalah kamus dengan kunci records. Nilainya adalah array data - dalam hal ini, data URL yang ditentukan sebagai objek dengan kunci recordType yang ditetapkan ke "url" dan kunci data yang ditetapkan 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}.`);
});

Jika tag NFC berisi pesan NDEF yang tidak dimaksudkan untuk ditimpa, tetapkan properti overwrite ke false dalam opsi yang diteruskan ke metode write(). Dalam hal ini, promise yang ditampilkan akan ditolak jika pesan NDEF sudah disimpan dalam 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}.`);
});

Menjadikan tag NFC bersifat 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 dibuat menjadi hanya baca, tag NFC tidak dapat ditulis lagi.

Untuk membuat tag NFC menjadi hanya baca, buat instance objek NDEFReader baru terlebih dahulu. Memanggil makeReadOnly() akan menampilkan promise. Pengguna mungkin diminta jika akses tidak diberi sebelumnya. Promise akan di-resolve jika semua kondisi berikut terpenuhi:

• Panggilan ini hanya dipanggil sebagai respons terhadap gestur pengguna seperti gestur sentuh atau klik mouse.
• Pengguna telah mengizinkan situs 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 secara permanen hanya-baca setelah menulisnya.

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 pada Chrome 100 atau yang lebih baru, periksa apakah fitur ini didukung dengan hal berikut:

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 yang ditetapkan dalam Mengontrol Akses ke Fitur Platform Web yang Canggih, termasuk kontrol pengguna, transparansi, dan ergonomi.

Karena NFC memperluas domain informasi yang berpotensi tersedia bagi situs berbahaya, ketersediaan NFC dibatasi untuk memaksimalkan kesadaran dan kontrol pengguna atas penggunaan NFC.

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

  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 permintaan izin yang dimulai pengguna dan gerakan fisik dunia nyata yang membawa perangkat melalui tag NFC target mencerminkan pola pemilih yang ditemukan di file lainnya dan API akses perangkat.

Untuk melakukan pemindaian atau menulis, halaman web harus terlihat saat pengguna menyentuh tag NFC dengan perangkat. Browser menggunakan respons haptik untuk menunjukkan ketukan. Akses ke radio NFC diblokir jika layar nonaktif atau perangkat terkunci. Untuk halaman web yang tidak terlihat, menerima dan mengirim konten NFC akan ditangguhkan, dan dilanjutkan saat halaman web kembali terlihat.

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

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

Periksa izin

Permissions API memungkinkan pemeriksaan apakah izin "nfc" diberikan. Contoh ini menunjukkan cara memindai tag NFC tanpa interaksi pengguna jika akses sebelumnya diberikan, atau menampilkan tombol jika tidak. Perhatikan bahwa mekanisme yang sama berfungsi untuk menulis tag NFC karena menggunakan izin yang sama di balik 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();
  };
}

Batalkan operasi NFC

Menggunakan primitif AbortController akan memudahkan untuk membatalkan operasi NFC. Contoh di bawah menunjukkan cara meneruskan signal dari AbortController melalui opsi metode scan(), makeReadOnly(), write() NDEFReader 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

Penggunaan write(), lalu scan() dengan primitif AbortController memungkinkan Anda membaca tag NFC setelah menulis pesan ke tag tersebut. Contoh di bawah menunjukkan cara menulis pesan teks ke tag NFC dan membaca pesan baru dalam tag NFC. Asisten 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

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

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 data teks sederhana, teruskan string ke metode write() NDEFReader.

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

Data teks secara default adalah UTF-8 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 data URL, teruskan kamus pesan NDEF ke metode write() NDEFReader. Data URL yang terdapat dalam pesan NDEF ditentukan sebagai objek dengan kunci recordType yang ditetapkan ke "url" dan kunci data yang ditetapkan ke string URL.

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 data jenis MIME mewakili jenis MIME payload data NDEF sehingga data dapat didekode dengan benar. Misalnya, gunakan JSON.parse untuk mendekode teks JSON dan elemen Image 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 data jenis MIME, teruskan kamus pesan NDEF ke metode write() NDEFReader. Catatan jenis MIME yang terdapat dalam pesan NDEF didefinisikan sebagai objek dengan kunci recordType yang disetel ke "mime", kunci mediaType yang disetel ke jenis MIME konten yang sebenarnya, dan kunci data yang disetel ke objek yang bisa berupa ArrayBuffer atau menyediakan 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

Data 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. Data URL mutlak yang terdapat dalam pesan NDEF 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] });

Membaca dan menulis rekaman poster cerdas

Data poster cerdas (digunakan dalam iklan majalah, selebaran, baliho, dll.), menjelaskan beberapa konten web sebagai data NDEF yang berisi pesan NDEF sebagai payload-nya. Panggil record.toRecords() untuk mengubah data ke daftar data yang ada dalam data poster smart. Data tersebut harus memiliki data URL, data teks untuk judul, data jenis MIME untuk gambar, dan beberapa data jenis lokal kustom seperti ":t", ":act", dan ":s" masing-masing untuk jenis, tindakan, dan ukuran data poster smart.

Data jenis lokal hanya bersifat unik dalam konteks lokal data NDEF yang memuatnya. Gunakan keduanya jika arti jenis tidak penting di luar konteks lokal data yang memuatnya dan jika penggunaan penyimpanan menjadi batasan sulit. Nama data jenis lokal selalu diawali dengan : di Web NFC (misalnya, ":t", ":s", ":act"). Ini untuk membedakan data teks dari data teks jenis lokal, misalnya.

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 smart, teruskan pesan NDEF ke metode write() NDEFReader. Data poster cerdas yang terdapat dalam pesan NDEF ditentukan sebagai objek dengan kunci recordType yang disetel ke "smart-poster" dan kunci data yang disetel ke objek yang mewakili (sekali lagi) pesan NDEF yang terdapat dalam data 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 rekaman jenis eksternal

Untuk membuat kumpulan data yang ditentukan aplikasi, gunakan kumpulan data eksternal. File ini mungkin berisi pesan NDEF sebagai payload yang dapat diakses dengan toRecords(). Namanya berisi nama domain organisasi penerbit, titik dua, dan nama jenis 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 data jenis eksternal, teruskan kamus pesan NDEF ke metode write() NDEFReader. Data jenis eksternal yang terdapat dalam pesan NDEF ditentukan sebagai objek dengan kunci recordType yang ditetapkan ke nama jenis eksternal dan kunci data yang ditetapkan ke objek yang mewakili pesan NDEF yang terdapat dalam kumpulan data jenis eksternal. Perhatikan bahwa kunci data juga dapat berupa 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 kumpulan data kosong

Catatan kosong tidak memiliki payload.

Untuk menulis kumpulan data kosong, teruskan kamus pesan NDEF ke metode write() NDEFReader. Data kosong yang terdapat dalam pesan NDEF ditentukan sebagai objek dengan kunci recordType yang ditetapkan 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 beberapa hal yang seharusnya saya ketahui ketika mulai bermain dengan Web NFC:

• Android menangani tag NFC di tingkat OS sebelum Web NFC berfungsi.
• Anda dapat menemukan ikon NFC di material.io.
• Gunakan data NDEF id untuk mengidentifikasi data dengan mudah saat diperlukan.
• Tag NFC tidak berformat yang mendukung NDEF berisi satu data dengan jenis kosong.
• Menulis data aplikasi Android sangatlah 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

Cobalah contoh resmi dan lihat beberapa demo Web NFC yang keren:

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

Masukan

Grup Komunitas Web NFC dan tim Chrome ingin mengetahui pendapat dan pengalaman Anda dengan Web NFC.

Beri tahu kami tentang desain API

Apakah ada sesuatu pada API yang tidak berfungsi seperti yang diharapkan? Atau apakah ada metode atau properti yang hilang yang Anda perlukan untuk menerapkan ide Anda?

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

Melaporkan masalah terkait penerapan

Apakah Anda menemukan bug pada implementasi Chrome? Atau apakah implementasinya berbeda dengan spesifikasi?

Laporkan bug di https://new.crbug.com. Pastikan Anda menyertakan detail sebanyak mungkin, memberikan petunjuk sederhana untuk mereproduksi bug, dan menyetel Komponen ke Blink>NFC. Glitch berfungsi dengan baik untuk berbagi repro dengan cepat dan mudah.

Tampilkan dukungan

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

Kirim tweet ke @ChromiumDev menggunakan hashtag #WebNFC dan beri tahu kami di mana dan bagaimana Anda menggunakannya.

Link bermanfaat

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

Ucapan terima kasih

Terima kasih banyak kepada orang-orang di Intel yang telah menerapkan Web NFC. Google Chrome bergantung pada komunitas committer yang bekerja sama untuk memajukan project Chromium. Tidak semua committer Chromium adalah Googler, dan kontributor ini pantas mendapatkan pengakuan khusus!