Signatur
Beschreibung
Die Eigenschaft message des NDEFReadingEvent-Interfaces ist schreibgeschützt und enthält die Nachricht, die beim Scannen eines NFC-Tags empfangen wurde, als NDEFMessage-Objekt. Das Event kommt vom reading-Event eines NDEFReader, sobald nach dem Aufruf von scan() ein kompatibles Tag in Reichweite des Geräts ist.
Ein NDEFMessage-Objekt hat die Eigenschaft records, ein Array mit NDEFRecord-Objekten. Jeder Datensatz hat unter anderem einen recordType (z. B. "text", "url", "mime", "empty"), optional einen mediaType, eine id, encoding und lang sowie die Nutzdaten in data als DataView.
Wofür braucht man das? Zum Beispiel für Check-ins per NFC-Karte, Inventur mit NFC-Etiketten oder um Links und Konfigurationsdaten zu lesen, die auf einem Tag gespeichert sind. Die Nutzdaten musst du selbst dekodieren, bei Text und URLs meist mit TextDecoder, bei JSON-MIME-Datensätzen zusätzlich mit JSON.parse().
Rückgabewert
message.records (Array von NDEFRecord).Beispiele
Alle Datensätze eines gescannten Tags ausgeben
const scanButton = document.querySelector('#scan');
scanButton.addEventListener('click', async () => {
if (!('NDEFReader' in window)) {
console.warn('Web NFC wird nicht unterstützt.');
return;
}
const reader = new NDEFReader();
try {
await reader.scan(); // muss durch eine Benutzeraktion ausgelöst werden
reader.addEventListener('reading', ({ message, serialNumber }) => {
console.log(`Tag ${serialNumber}: ${message.records.length} Datensatz/Datensätze`);
for (const record of message.records) {
console.log(`Typ: ${record.recordType}, MIME: ${record.mediaType ?? '-'}`);
}
});
reader.addEventListener('readingerror', () => {
console.error('Tag konnte nicht gelesen werden.');
});
} catch (err) {
console.error(`Scan fehlgeschlagen: ${err.name}`);
}
});Text- und URL-Datensätze dekodieren
const decodeRecord = (record) => {
switch (record.recordType) {
case 'text': {
const decoder = new TextDecoder(record.encoding ?? 'utf-8');
return `Text (${record.lang}): ${decoder.decode(record.data)}`;
}
case 'url':
case 'absolute-url':
return `URL: ${new TextDecoder().decode(record.data)}`;
default:
return `Nicht behandelter Typ: ${record.recordType}`;
}
};
const reader = new NDEFReader();
await reader.scan();
reader.onreading = (event) => {
event.message.records.map(decodeRecord).forEach((line) => console.log(line));
};JSON-Nutzdaten aus einem MIME-Datensatz lesen, Scan per AbortController beenden
const controller = new AbortController();
const reader = new NDEFReader();
reader.onreading = ({ message }) => {
const jsonRecord = message.records.find(
(r) => r.recordType === 'mime' && r.mediaType === 'application/json'
);
if (!jsonRecord) return;
const payload = JSON.parse(new TextDecoder().decode(jsonRecord.data));
console.log('Artikel:', payload.sku, 'Lagerort:', payload.location);
controller.abort(); // nach dem ersten Treffer aufhören zu scannen
};
await reader.scan({ signal: controller.signal });// Wichtig · Fallstricke
- Kompatibilität: Web NFC ist experimentell und praktisch nur in Chrome für Android (ab Version 89) verfügbar. Desktop-Browser, Firefox und Safari/iOS unterstützen die API nicht. Prüfe deshalb vorher mit
'NDEFReader' in window, ob sie vorhanden ist. - Die API läuft nur in sicheren Kontexten (HTTPS), nur im Top-Level-Frame und nur, solange die Seite sichtbar ist. Der erste Aufruf von
scan()braucht eine Benutzeraktion und die Erlaubnis für"nfc". record.dataist einDataViewund kannnullsein, etwa beirecordType === "empty". Prüfe das, bevor du dekodierst.- Leere oder nicht formatierte Tags können eine Nachricht ohne Datensätze liefern, dann ist
recordsein leeres Array. Lesefehler lösen stattdessen das Eventreadingerroraus. - Sicherheit: Inhalte von NFC-Tags sind nicht vertrauenswürdig. Füge gelesene Texte oder URLs nie ungeprüft über
innerHTMLein (XSS-Gefahr) und prüfe URLs, bevor du sie öffnest.