Membaca dan menulis ke tag NFC kini dapat dilakukan.
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.
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.
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.
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 .
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.
}
}
};
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}.`);
});
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.
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:
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!