Das Lesen und Schreiben in NFC-Tags ist jetzt möglich.
Aktualisiert
What is Web NFC?
NFC steht für Near Field Communications, eine drahtlose Nahbereichstechnologie
Betrieb mit 13,56 MHz, der die Kommunikation zwischen Geräten aus der Ferne ermöglicht
weniger als 10 cm und eine Übertragungsrate von bis zu 424 kbit / s.
Web-NFC bietet Websites die Möglichkeit, NFC-Tags zu lesen und zu schreiben, wenn sie vorhanden sind
in unmittelbarer Nähe zum Gerät des Benutzers (normalerweise 5-10 cm, 2-4 Zoll).
Der aktuelle Bereich ist auf das NFC Data Exchange Format (NDEF) beschränkt, ein Leichtgewicht
Binäres Nachrichtenformat, das in verschiedenen Tag-Formaten funktioniert.
Vorgeschlagene Anwendungsfälle
Web NFC ist auf NDEF beschränkt, da die Sicherheitseigenschaften von Lesen und
Das Schreiben von NDEF-Daten ist leichter quantifizierbar. Low-Level-E / A-Operationen (z
ISO-DEP, NFC-A / B, NFC-F), Peer-to-Peer-Kommunikationsmodus und Host-basierte Karte
Emulation (HCE) wird nicht unterstützt.
Beispiele für Websites, die Web-NFC verwenden können, sind:
- Museen und Kunstgalerien können zusätzliche Informationen zu einer Anzeige anzeigen
wenn der Benutzer mit seinem Gerät eine NFC-Karte in der Nähe des Exponats berührt. - Inventarverwaltungsseiten können Daten in das NFC-Tag auf einem lesen oder schreiben
Container, um Informationen über seinen Inhalt zu aktualisieren. - Konferenzseiten können damit NFC-Ausweise während der Veranstaltung scannen.
- Sites können es verwenden, um anfängliche Geheimnisse zu teilen, die für das Gerät oder den Dienst benötigt werden
Bereitstellungsszenarien und auch die Bereitstellung von Konfigurationsdaten im Betrieb
Modus.
Aktueller Status
| Schritt | Status |
|---|---|
| 1. Erklären Sie | Komplett |
| 2. Erstellen Sie einen ersten Entwurf der Spezifikation | Komplett |
| 3. Sammeln Sie Feedback und wiederholen Sie das Design | In Bearbeitung |
| 4. Ursprungsversuch | In Bearbeitung |
| 5. Starten Sie | Nicht angefangen |
Verwenden von Web NFC
Aktivieren des Supports während der Origin-Testphase
Web NFC wird auf Android als Origin-Testversion in Chrome 81 verfügbar sein. Der Ursprung
Die Testversion wird voraussichtlich in Chrome 84 enden.
Mit Origin-Tests können Sie neue Funktionen ausprobieren und Feedback dazu geben
Benutzerfreundlichkeit, Praktikabilität und Effektivität für die Community der Webstandards. Zum
Weitere Informationen finden Sie in der Origin Trials Guide für Webentwickler.
Um sich für diese oder eine andere Herkunftsstudie anzumelden, besuchen Sie die Registrierungsseite.
Registrieren Sie sich für den Ursprungsversuch
- Fordern Sie einen Token an für Ihre Herkunft.
- Fügen Sie das Token Ihren Seiten hinzu. Dafür gibt es zwei Möglichkeiten:
- Fügen Sie eine hinzu
Ursprungsversuchtag to the Kopf of each page. For example,
das könnte ungefähr so aussehen: - Wenn Sie Ihren Server konfigurieren können, können Sie auch das Token hinzufügen
mit einemOrigin-TrialHTTP Header. The resulting response header should
sehen ungefähr so aus:Origin-Trial: TOKEN_GOES_HERE
- Fügen Sie eine hinzu
Aktivierung über chrome: // flags
Um mit Web NFC lokal auf Android zu experimentieren, ohne ein Originaltest-Token,
Aktivieren Sie die #experimental-Web-Plattform-Funktionen Flagge in chrome://flags.
Funktionserkennung
Feature detection for Hardware- is different from what you’re probably used to.
Das Vorhandensein von NDEFReader und NDEFWriter sagt dir, dass der Browser
unterstützt Web NFC, jedoch nicht, ob die erforderliche Hardware vorhanden ist. Im
Insbesondere wenn die Hardware fehlt, wird das Versprechen von bestimmten Anrufen zurückgegeben
wird ablehnen. Ich werde Details angeben, wenn ich beschreibe NDEFReader und NDEFWriter.
wenn ('NDEFReader' im Fenster) { }
wenn ('NDEFWriter' im Fenster) { }Terminologie
Ein NFC-Tag ist ein passives NFC-Gerät, dh es wird mit Magnet betrieben
Induktion, wenn sich ein aktives NFC-Gerät (z. B. ein Telefon) in der Nähe befindet. NFC-Tags
Es gibt viele Formen und Moden wie Aufkleber, Kreditkarten, Armhandgelder usw.
Das NDEFReader und NDEFWriter Objekte sind die beiden Einstiegspunkte in Web NFC
Diese Funktionen bieten Funktionen zum Vorbereiten von Lese- und / oder Schreibaktionen
erfüllt, wenn ein NDEF-Tag in die Nähe kommt. Das NDEF im NDEFReader und
NDEFWriter steht für NFC Data Exchange Format, eine einfache binäre Nachricht
Format standardisiert durch die NFC-Forum.
Das NDEFReader Das Objekt dient zum Eingehen auf eingehende NDEF-Nachrichten von NFC-Tags
während NDEFWriter Objekt dient zum Schreiben von NDEF-Nachrichten in NFC-Tags innerhalb
Reichweite.
Ein NFC-Tag, das NDEF unterstützt, ist wie eine Haftnotiz. Jeder kann es lesen und
Sofern es nicht schreibgeschützt ist, kann jeder darauf schreiben. Es enthält eine einzelne NDEF
Nachricht, die einen oder mehrere NDEF-Datensätze kapselt. Jeder NDEF-Datensatz ist ein
Binärstruktur, die eine Datennutzlast und zugehörige Typinformationen enthält.
Web NFC unterstützt die folgenden standardisierten Datensatztypen des NFC-Forums: leer, Text,
Url, smart poster, Mime type, absolute URL, external type, unknown, and local
Art.
NFC-Tags scannen
Um NFC-Tags zu scannen, instanziieren Sie zuerst eine neue NDEFReader Objekt. Berufung scan ()
gibt ein Versprechen zurück. Der Benutzer wird möglicherweise aufgefordert, wenn zuvor kein Zugriff erfolgt ist
gewährt. Das Versprechen wird aufgelöst, wenn alle folgenden Bedingungen erfüllt sind:
- Der Benutzer hat der Website erlaubt, mit NFC-Geräten zu interagieren, wenn sie auf ihre tippen
Telefon. - Das Telefon des Benutzers unterstützt NFC.
- Der Benutzer hat NFC auf seinem Telefon aktiviert.
Sobald das Versprechen erfüllt ist, sind eingehende NDEF-Nachrichten von verfügbar
Abonnieren von «Lesen» -Ereignissen über einen Ereignis-Listener. Sie sollten auch abonnieren
zu «Fehler» -Ereignissen, die benachrichtigt werden sollen, wenn sich inkompatible NFC-Tags in der Nähe befinden
Reichweite.
const Leser = new NDEFReader();
Leser.scan().then(() => {
console.Log("Scan started successfully.");
Leser.onerror = () => {
console.Log("Cannot read data from the NFC tag. Try another one?");
};
Leser.onreading = Veranstaltung => {
console.Log("NDEF message read.");
};
}).catch(Error => {
console.Log(`Error! Scan failed to start: ${Error}.`);
});Wenn sich ein NFC-Tag in der Nähe befindet, a NDEFReadingEvent Ereignis wird ausgelöst. Artikel
enthält zwei einzigartige Eigenschaften:
Ordnungsnummerrepräsentiert die Seriennummer des Geräts (.eg
00-11-22-33-44-55-66) oder eine leere Zeichenfolge, falls keine verfügbar ist.Botschaftrepräsentiert die im NFC-Tag gespeicherte NDEF-Nachricht.
Um den Inhalt der NDEF-Nachricht zu lesen, durchlaufen Sie die Schleife message.records und
verarbeiten ihre Daten Mitglieder passend basierend auf ihren Aufnahmetyp.
Das Daten Mitglied ist als ausgesetzt Datenansicht wie es die Handhabung ermöglicht
Fälle, in denen Daten in UTF-16 codiert sind.
Leser.onreading = Veranstaltung => {
const Botschaft = Veranstaltung.Botschaft;
zum (const Aufzeichnung of Botschaft.Aufzeichnungen) {
console.Log("Record type: " + Aufzeichnung.Aufnahmetyp);
console.Log("MIME type: " + Aufzeichnung.Medientyp);
console.Log("Record id: " + Aufzeichnung.gehen);
switch (Aufzeichnung.Aufnahmetyp) {
case "text":
brechen;
case "url":
brechen;
Standard:
}
}
};Das Kochbuch enthält viele Beispiele zum Lesen von NDEF-Datensätzen basierend auf
ihre Typen.
Sie können NDEF-Nachrichten auch filtern, indem Sie Optionen an übergeben scan ().
gehenstimmt mit der Datensatzkennung jedes NDEFRecord überein.Aufnahmetypentspricht dem Typ jedes NDEFRecord.MedientypMuster entspricht demMedientypEigenschaft jedes NDEFRecord.
const Leser = new NDEFReader();
erwarten Leser.scan({
Medientyp: "application/*json"
});
const Leser = new NDEFReader();
erwarten Leser.scan({
gehen: "my-restaurant-daily-menu",
Medientyp: "application/octet-stream"
});
const Leser = new NDEFReader();
erwarten Leser.scan({
Aufnahmetyp: "example.com:shoppingItem"
});Schreiben Sie NFC-Tags
Um NFC-Tags zu schreiben, instanziieren Sie zuerst ein neues NDEFWriter Objekt. Berufung
schreiben () gibt ein Versprechen zurück. Der Benutzer wird möglicherweise aufgefordert, wenn der Zugriff nicht erfolgt ist
zuvor gewährt. Zu diesem Zeitpunkt ist eine NDEF-Nachricht «vorbereitet» und vielversprechend
wird aufgelöst, wenn die folgenden Bedingungen erfüllt sind:
- Der Benutzer hat der Website erlaubt, mit NFC-Geräten zu interagieren, wenn sie auf ihre tippen
Telefon. - Das Telefon des Benutzers unterstützt NFC.
- Der Benutzer hat NFC auf seinem Telefon aktiviert.
- Der Benutzer hat auf ein NFC-Tag getippt und eine NDEF-Nachricht wurde erfolgreich geschrieben.
Um Text in ein NFC-Tag zu schreiben, übergeben Sie eine Zeichenfolge an das schreiben () Methode.
const writer = new NDEFWriter();
writer.write(
"Hello World"
).then(() => {
console.Log("Message written.");
}).catch(Error => {
console.Log(`Write failed :-( try again: ${Error}.`);
});Übergeben Sie zum Schreiben eines URL-Datensatzes in ein NFC-Tag ein Wörterbuch, das eine NDEF darstellt
Nachricht an schreiben (). Im folgenden Beispiel ist die NDEF-Nachricht ein Wörterbuch
mit einer Aufzeichnungen Schlüssel. Sein Wert ist ein Array von Datensätzen - in diesem Fall eine URL
Datensatz definiert als Objekt mit a Aufnahmetyp Schlüssel eingestellt auf "url" und ein Daten
Schlüssel auf die URL-Zeichenfolge gesetzt.
const writer = new NDEFWriter();
writer.write({
Aufzeichnungen: [{ Aufnahmetyp: "url", Daten: "https://w3c.github.io/web-nfc/" }]
}).then(() => {
console.Log("Message written.");
}).catch(Error => {
console.Log(`Write failed :-( try again: ${Error}.`);
});Es ist auch möglich, mehrere Datensätze in ein NFC-Tag zu schreiben.
const writer = new NDEFWriter();
writer.write({ Aufzeichnungen: [
{ Aufnahmetyp: "url", Daten: "https://w3c.github.io/web-nfc/" },
{ Aufnahmetyp: "url", Daten: "https://web.dev/nfc/" }
]}).then(() => {
console.Log("Message written.");
}).catch(Error => {
console.Log(`Write failed :-( try again: ${Error}.`);
});Das Kochbuch enthält viele Beispiele für das Schreiben anderer Arten von
NDEF-Datensätze.
Wenn ein NFC-Tag gelesen werden soll, während ein NFC-Schreibvorgang ausgeführt wird, legen Sie den Wert fest
ignoreRead Eigentum an falsch in den Optionen an die übergeben schreiben () Methode.
const Leser = new NDEFReader();
Leser.scan().then(() => {Leser.onreading = Veranstaltung => {
};
const writer = new NDEFWriter();
Rückkehr writer.write("Writing data is fun!", { ignoreRead: falsch });
}).catch(Error => {
console.Log(`Write failed :-( try again: ${Error}.`);
});
Wenn das NFC-Tag eine NDEF-Nachricht enthält, die nicht überschrieben werden soll, setzen Sie
das überschreiben Eigentum an falsch in den Optionen an die übergeben schreiben ()
Methode. In diesem Fall wird das zurückgegebene Versprechen abgelehnt, wenn eine NDEF-Nachricht vorliegt
bereits im NFC-Tag gespeichert.
const writer = new NDEFWriter();
writer.write("Writing data on an empty NFC tag is fun!", { überschreiben: falsch })
.then(() => {
console.Log("Message written.");
}).catch(_ => {
console.Log(`Write failed :-( try again: ${Error}.`);
});Sicherheit und Berechtigungen
Das Chrome-Team hat Web-NFC nach den Grundprinzipien entworfen und implementiert
definiert in Steuern des Zugriffs auf eine leistungsstarke Webplattform
Eigenschaften, einschließlich Benutzerkontrolle, Transparenz und Ergonomie.
Weil NFC den Bereich der Informationen erweitert, die möglicherweise für böswillige Personen verfügbar sind
Websites ist die Verfügbarkeit von NFC beschränkt, um das Bewusstsein der Benutzer zu maximieren und
Kontrolle über die Verwendung von NFC.
Web NFC is only available to top-level frames and secure browsing contexts (HTTPS
nur). Ursprünge müssen zuerst die anfordern "nfc" Genehmigung beim Umgang mit a
user gesture (e.g a button klicken). The NDEFReader scan () und NDEFWriter
schreiben () methods auslösen a user prompt, if access was not previously granted.
Dokument.querySelector("#scanButton").onclick = asynchron () => {
const Leser = new NDEFReader();
erwarten Leser.scan();
Leser.onreading = Veranstaltung => {
};
};Die Kombination aus einer vom Benutzer initiierten Berechtigungsaufforderung und einer realen, physischen
movement of bringing the device over a Ziel NFC tag mirrors the chooser
Muster in den anderen Datei- und Gerätezugriffs-APIs.
Um einen Scan oder Schreibvorgang durchzuführen, muss die Webseite sichtbar sein, wenn der Benutzer sie berührt
ein NFC-Tag mit ihrem Gerät. Der Browser verwendet haptisches Feedback, um a anzuzeigen
Zapfhahn. Der Zugriff auf das NFC-Radio ist blockiert, wenn das Display ausgeschaltet ist oder das Gerät ausgeschaltet ist
gesperrt. Bei nicht sichtbaren Webseiten werden NFC-Inhalte empfangen und gepusht
angehalten und fortgesetzt, wenn eine Webseite wieder sichtbar wird.
Danke an die API für Seitensichtbarkeitist es möglich zu verfolgen, wann Dokument
Sichtbarkeitsänderungen.
Dokument.onvisibilitychange = Veranstaltung => {
wenn (Dokument.versteckt) {
} else {
}
};Kochbuch
Hier sind einige Codebeispiele, um Ihnen den Einstieg zu erleichtern.
Überprüfen Sie die Erlaubnis
Das Berechtigungs-API ermöglicht die Überprüfung, ob die "nfc" Erlaubnis war
gewährt. Dieses Beispiel zeigt, wie NFC-Tags ohne Benutzerinteraktion gescannt werden, wenn
Der Zugriff wurde zuvor gewährt, oder es wird eine andere Schaltfläche angezeigt. Beachten Sie, dass das gleiche
Der Mechanismus funktioniert zum Schreiben von NFC-Tags, da er dieselbe Berechtigung unter dem verwendet
Kapuze.
const Leser = new NDEFReader();asynchron Funktion startScanning() {
erwarten Leser.scan();
Leser.onreading = Veranstaltung => {
};
}
const nfcPermissionStatus = erwarten Navigator.permissions.Abfrage({ Süßkartoffel: "nfc" });
wenn (permissionStatus.Zustand === "granted") {
startScanning();
} else {
Dokument.querySelector("#scanButton").Stil.Anzeige = "block";
Dokument.querySelector("#scanButton").onclick = Veranstaltung => {
startScanning();
};
}
NFC-Operationen abbrechen
Verwendung der AbortController primitiv macht es einfach, NFC-Operationen abzubrechen. Das
Das folgende Beispiel zeigt Ihnen, wie Sie das übergeben Signal eines AbortControllers durch
die Optionen von NDEFReader scan () und NDEFWriter schreiben () Methoden und Abbruch
beide NFC-Operationen gleichzeitig.
const abortController = new AbortController();
abortController.Signal.onabort = Veranstaltung => {
};const Leser = new NDEFReader();
erwarten Leser.scan({ Signal: abortController.Signal });
const writer = new NDEFWriter();
erwarten writer.write("Hello world", { Signal: abortController.Signal });
Dokument.querySelector("#abortButton").onclick = Veranstaltung => {
abortController.abort();
};
Lesen und schreiben Sie einen Textdatensatz
Der Textdatensatz Daten kann mit a dekodiert werden TextDecoder instanziiert mit dem
Aufzeichnung Codierung Eigentum. Beachten Sie, dass die Sprache des Textdatensatzes ist
verfügbar durch seine lang Eigentum.
Funktion readTextRecord(Aufzeichnung) {
console.behaupten(Aufzeichnung.Aufnahmetyp === "text");
const textDecoder = new TextDecoder(Aufzeichnung.Codierung);
console.Log(`Text: ${textDecoder.decode(Aufzeichnung.Daten)} (${Aufzeichnung.lang})`);
}Um einen einfachen Textdatensatz zu schreiben, übergeben Sie eine Zeichenfolge an den NDEFWriter schreiben () Methode.
const writer = new NDEFWriter();
erwarten writer.write("Hello World");Textdatensätze sind standardmäßig UTF-8 und übernehmen jedoch die Sprache des aktuellen Dokuments
beide Eigenschaften (Codierung und lang) kann mit der vollständigen Syntax angegeben werden
zum Erstellen eines benutzerdefinierten NDEF-Datensatzes.
Funktion a2utf16(string) {
Lassen result = new Uint16Array(string.Länge);
zum (Lassen ich = 0; ich < string.Länge; ich++) {
result[ich] = string.codePointAt(ich);
}
Rückkehr result;
}const textRecord = {
Aufnahmetyp: "text",
lang: "fr",
Codierung: "utf-16",
Daten: a2utf16("Bonjour, François !")
};
const writer = new NDEFWriter();
erwarten writer.write({ Aufzeichnungen: [textRecord] });
Lesen und schreiben Sie einen URL-Datensatz
Benutzen TextDecoder um die Datensätze zu dekodieren Daten.
Funktion readUrlRecord(Aufzeichnung) {
console.behaupten(Aufzeichnung.Aufnahmetyp === "url");
const textDecoder = new TextDecoder();
console.Log(`URL: ${textDecoder.decode(Aufzeichnung.Daten)}`);
}Übergeben Sie zum Schreiben eines URL-Datensatzes ein NDEF-Nachrichtenwörterbuch an den NDEFWriter
schreiben () Methode. Der in der NDEF-Nachricht enthaltene URL-Datensatz ist als definiert
Objekt mit a Aufnahmetyp Schlüssel eingestellt auf "url" und ein Daten Schlüssel auf die URL gesetzt
Zeichenfolge.
const urlRecord = {
Aufnahmetyp: "url",
Daten:"https://w3c.github.io/web-nfc/"
};const writer = new NDEFWriter();
erwarten writer.write({ Aufzeichnungen: [urlRecord] });
Lesen und schreiben Sie einen MIME-Datensatz
Das Medientyp Die Eigenschaft eines MIME-Typdatensatzes repräsentiert den MIME-Typ des
NDEF zeichnet Nutzdaten auf, damit Daten kann richtig dekodiert werden. Verwenden Sie zum Beispiel
JSON.parse zum Dekodieren von JSON-Text und eines Image-Elements zum Dekodieren von Bilddaten.
Funktion readMimeRecord(Aufzeichnung) {
console.behaupten(Aufzeichnung.Aufnahmetyp === "Mime");
wenn (Aufzeichnung.Medientyp === "application/json") {
const textDecoder = new TextDecoder();
console.Log(`JSON: ${JSON.parse(decoder.decode(Aufzeichnung.Daten))}`);
}
else wenn (Aufzeichnung.Medientyp.startsWith('image/')) {
const Klecks = new Klecks([Aufzeichnung.Daten], { Art: Aufzeichnung.Medientyp });
const img = new Bild();
img.src = Url.createObjectURL(Klecks);
Dokument.Körper.appendChild(img);
}
else {
}
}Übergeben Sie zum Schreiben eines Datensatzes vom Typ MIME ein NDEF-Nachrichtenwörterbuch an den NDEFWriter
schreiben () Methode. Der in der NDEF-Nachricht enthaltene MIME-Typdatensatz ist definiert
als Objekt mit a Aufnahmetyp Schlüssel eingestellt auf "Mime"zu Medientyp Schlüssel eingestellt auf
den tatsächlichen MIME-Typ des Inhalts und a Daten Schlüsselsatz für ein Objekt, das kann
sei entweder ein ArrayBuffer oder bietet einen Blick auf eine ArrayBuffer (z.B
Uint8Array, Datenansicht).
const encoder = new TextEncoder();
const Daten = {
firstname: "François",
lastname: "Beaufort"
};
const jsonRecord = {
Aufnahmetyp: "Mime",
Medientyp: "application/json",
Daten: encoder.encode(JSON.stringify(Daten))
};const imageRecord = {
Aufnahmetyp: "Mime",
Medientyp: "image/png",
Daten: erwarten (erwarten holen("icon1.png")).arrayBuffer()
};
const writer = new NDEFWriter();
erwarten writer.write({ Aufzeichnungen: [jsonRecord, imageRecord] });
Lesen und schreiben Sie einen absoluten URL-Datensatz
Der absolute URL-Datensatz Daten kann mit einem einfachen dekodiert werden TextDecoder.
Funktion readAbsoluteUrlRecord(Aufzeichnung) {
console.behaupten(Aufzeichnung.Aufnahmetyp === "absolute-url");
const textDecoder = new TextDecoder();
console.Log(`Absolute URL: ${textDecoder.decode(Aufzeichnung.Daten)}`);
}Um einen absoluten URL-Datensatz zu schreiben, übergeben Sie ein NDEF-Nachrichtenwörterbuch an
NDEFWriter schreiben () Methode. Der in der NDEF enthaltene absolute URL-Datensatz
Nachricht ist definiert als ein Objekt mit einem Aufnahmetyp Schlüssel eingestellt auf "absolute-url"
und ein Daten Schlüssel auf die URL-Zeichenfolge gesetzt.
const absoluteUrlRecord = {
Aufnahmetyp: "absolute-url",
Daten:"https://w3c.github.io/web-nfc/"
};const writer = new NDEFWriter();
erwarten writer.write({ Aufzeichnungen: [absoluteUrlRecord] });
Lesen und schreiben Sie eine intelligente Posteraufzeichnung
Eine intelligente Plakataufzeichnung (verwendet in Zeitschriftenwerbung, Flugblättern, Werbetafeln,
usw.) beschreibt einige Webinhalte als NDEF-Datensatz, der eine NDEF enthält
Nachricht als Nutzlast. Anruf record.toRecords () transformieren Daten zu einer Liste
von Datensätzen, die im Smart-Poster-Datensatz enthalten sind. Es sollte einen URL-Eintrag haben, a
Textdatensatz für den Titel, ein MIME-Datensatz für das Bild und einige Benutzerdefiniert
lokale Typdatensätze sowie ": t", ": Handlung", und ": s" jeweils für die
Typ, Aktion und Größe des Smart Poster-Datensatzes.
Vorsicht:
Smart Poster-Datensätze werden in einer späteren Version von Chrome unterstützt.
Lokale Typdatensätze sind nur im lokalen Kontext des enthaltenen Datums eindeutig
NDEF-Aufzeichnung. Verwenden Sie sie, wenn die Bedeutung der Typen außerhalb keine Rolle spielt
des lokalen Kontexts des enthaltenen Datensatzes und wenn die Speichernutzung schwierig ist
Zwang. Datensatznamen für lokale Typen beginnen immer mit : in Web NFC (z
": t", ": s", ": Handlung"). Dies dient dazu, einen Textdatensatz von einem lokalen zu unterscheiden
Geben Sie beispielsweise einen Textdatensatz ein.
Funktion readSmartPosterRecord(smartPosterRecord) {
console.behaupten(Aufzeichnung.Aufnahmetyp === "Smart-Poster");
Lassen Aktion, Text, URL;zum (const Aufzeichnung of smartPosterRecord.toRecords()) {
wenn (Aufzeichnung.Aufnahmetyp == "text") {
const decoder = new TextDecoder(Aufzeichnung.Codierung);
Text = decoder.decode(Aufzeichnung.Daten);
} else wenn (Aufzeichnung.Aufnahmetyp == "url") {
const decoder = new TextDecoder();
URL = decoder.decode(Aufzeichnung.Daten);
} else wenn (Aufzeichnung.Aufnahmetyp == ": Handlung") {
Aktion = Aufzeichnung.Daten.getUint8(0);
} else {
}
}
switch (Aktion) {
case 0:
brechen;
case 1:
brechen;
case 2:
brechen;
}
}
Übergeben Sie eine NDEF-Nachricht an den NDEFWriter, um einen Smart Poster-Datensatz zu schreiben schreiben ()
Methode. Der in der NDEF-Nachricht enthaltene Smart-Poster-Datensatz ist als definiert
Objekt mit a Aufnahmetyp Schlüssel eingestellt auf "Smart-Poster" und ein Daten Schlüssel eingestellt auf
ein Objekt, das (noch einmal) eine NDEF-Nachricht darstellt, die in der
Smart Poster Rekord.
const encoder = new TextEncoder();
const smartPosterRecord = {
Aufnahmetyp: "Smart-Poster",
Daten: {
Aufzeichnungen: [
{
Aufnahmetyp: "url",
Daten: "https://my.org/content/19911"
},
{
Aufnahmetyp: "text",
Daten: "Funny dance"
},
{
Aufnahmetyp: ": t",
Daten: encoder.encode("image/gif")
},
{
Aufnahmetyp: ": s",
Daten: new Uint32Array([4096])
},
{
Aufnahmetyp: ": Handlung",
Daten: new Uint8Array([0])
},
{
Aufnahmetyp: "Mime",
Medientyp: "image/png",
Daten: erwarten (erwarten holen("icon1.png")).arrayBuffer()
},
{
Aufnahmetyp: "Mime",
Medientyp: "image/jpg",
Daten: erwarten (erwarten holen("icon2.jpg")).arrayBuffer()
}
]
}
};const writer = new NDEFWriter();
erwarten writer.write({ Aufzeichnungen: [smartPosterRecord] });
Lesen und schreiben Sie einen externen Typdatensatz
Verwenden Sie zum Erstellen von anwendungsdefinierten Datensätzen externe Typdatensätze. Diese können
eine NDEF-Nachricht als Nutzlast enthalten, auf die zugegriffen werden kann toRecords (). Ihr
name enthält den Domainnamen der ausstellenden Organisation, einen Doppelpunkt und einen Typ
Name, der zum Beispiel mindestens ein Zeichen lang ist "example.com:foo".
Funktion readExternalTypeRecord(externalTypeRecord) {
zum (const Aufzeichnung of externalTypeRecord.toRecords()) {
wenn (Aufzeichnung.Aufnahmetyp == "text") {
const decoder = new TextDecoder(Aufzeichnung.Codierung);
console.Log(`Text: ${textDecoder.decode(Aufzeichnung.Daten)} (${Aufzeichnung.lang})`);
} else wenn (Aufzeichnung.Aufnahmetyp == "url") {
const decoder = new TextDecoder();
console.Log(`URL: ${decoder.decode(Aufzeichnung.Daten)}`);
} else {
}
}
}Übergeben Sie zum Schreiben eines externen Typdatensatzes ein NDEF-Nachrichtenwörterbuch an
NDEFWriter schreiben () Methode. Der in der NDEF enthaltene externe Typdatensatz
Nachricht ist definiert als ein Objekt mit einem Aufnahmetyp Schlüssel auf den Namen des gesetzt
externer Typ und a Daten Schlüsselsatz für ein Objekt, das eine NDEF-Nachricht darstellt
im externen Typdatensatz enthalten. Notiere dass der Daten Schlüssel kann auch sein
entweder ein ArrayBuffer oder bietet einen Blick auf eine ArrayBuffer (z.B
Uint8Array, Datenansicht).
const externalTypeRecord = {
Aufnahmetyp: "example.game:a",
Daten: {
Aufzeichnungen: [
{
Aufnahmetyp: "url",
Daten: "https://example.game/42"
},
{
Aufnahmetyp: "text",
Daten: "Game context given here"
},
{
Aufnahmetyp: "Mime",
Medientyp: "image/png",
Daten: erwarten (erwarten holen("image.png")).arrayBuffer()
}
]
}
};const writer = new NDEFWriter();
writer.write({ Aufzeichnungen: [externalTypeRecord] });
Lesen und schreiben Sie einen leeren Datensatz
Ein leerer Datensatz hat keine Nutzlast.
Um einen leeren Datensatz zu schreiben, übergeben Sie ein NDEF-Nachrichtenwörterbuch an den NDEFWriter
schreiben () Methode. Der in der NDEF-Nachricht enthaltene leere Datensatz ist definiert als
ein Objekt mit einem Aufnahmetyp Schlüssel eingestellt auf "leer".
const emptyRecord = {
Aufnahmetyp: "leer"
};const writer = new NDEFWriter();
erwarten writer.write({ Aufzeichnungen: [emptyRecord] });
Entwicklertipps
Hier ist eine Liste von Dingen, von denen ich mir wünschte, ich hätte sie gewusst, als ich anfing, mit Web NFC zu spielen:
- Android verarbeitet NFC-Tags nativ, bevor Web NFC betriebsbereit ist.
- Sie finden ein NFC-Symbol auf material.io.
- Verwenden Sie den NDEF-Datensatz
gehenum einen Datensatz bei Bedarf einfach zu identifizieren. - Ein unformatiertes NFC-Tag, das NDEF unterstützt, enthält einen einzelnen Datensatz des leeren Typs.
- Schreiben eines Android-Anwendungsdatensatz ist einfach, wie unten gezeigt.
const encoder = new TextEncoder();
const aarRecord = {
Aufnahmetyp: "android.com:pkg",
Daten: encoder.encode("com.example.myapp")
};const writer = new NDEFWriter();
erwarten writer.write({ Aufzeichnungen: [aarRecord] });
Demos
Probieren Sie das aus offizielle Probe und sehen Sie sich einige coole Web-NFC-Demos an:
Feedback
Das Web-NFC-Community-Gruppe und das
Das Chrome-Team würde gerne etwas über Ihre Gedanken und Erfahrungen mit Web NFC erfahren.
Tell us about the API design
Gibt es etwas an der API, das nicht wie erwartet funktioniert? Oder sind da
Fehlende Methoden oder Eigenschaften, die Sie zur Umsetzung Ihrer Idee benötigen?
Legen Sie ein Spezifikationsproblem auf der Web NFC GitHub Repo oder füge deine Gedanken hinzu
ein bestehendes Problem.
Melden Sie ein Problem mit der Implementierung
Did you find a Fehler with Chrome’s implementation? Or is the implementation
anders als die Spezifikation?
Datei einen Fehler bei https://new.crbug.com. Achten Sie darauf, so viel einzuschließen
Detail wie möglich, geben Sie einfache Anweisungen zum Reproduzieren des Fehlers und haben
Komponenten einstellen Blinken> NFC. Panne funktioniert gut für
schnelle und einfache Repros teilen.
Unterstützung zeigen
Planen Sie die Verwendung von Web NFC? Ihre öffentliche Unterstützung hilft dem Chrome-Team
Priorisieren Sie Funktionen und zeigen Sie anderen Browser-Anbietern, wie wichtig dies ist
unterstütze sie.
Send a Tweet zu @ChromiumDev und lassen Sie uns wissen, wo und wie
du benutzt es.
Hilfreiche Links
Danksagung
Vielen Dank an die Leute bei Intel for implementing Web NFC. Google Chrom
hängt von einer Gemeinschaft von Committern ab, die zusammenarbeiten, um das Chrom zu bewegen
Projekt vorwärts. Nicht jeder Chromium-Committer ist ein Googler, und diese
Mitwirkende verdienen besondere Anerkennung!
