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:
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!