Mit NFC-Geräten in Chrome für Android interagieren

Das Lesen und Schreiben in NFC-Tags ist jetzt möglich.

François Beaufort

Was ist Web-NFC?

NFC steht für Near Field Communications, eine Nahfeldkommunikationstechnologie, bei 13,56 MHz für die Kommunikation zwischen Geräten in größerer Entfernung unter 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, in der Nähe des Geräts des Nutzers (normalerweise 5–10 cm) Der aktuelle Geltungsbereich ist auf das NFC Data Exchange Format (NDEF) beschränkt, ein einfaches binäres Nachrichtenformat, das für verschiedene Tag-Formate funktioniert.

</ph>

Empfohlene Anwendungsfälle

Web-NFC ist auf NDEF beschränkt, da die Sicherheitseigenschaften des Lesens und NDEF-Daten schreiben, sind leichter quantifizierbar. Low-Level-E/A-Vorgänge (z.B. ISO-DEP, NFC-A/B, NFC-F), Peer-to-Peer-Kommunikationsmodus und hostbasierte Karte Emulation (HCE) wird nicht unterstützt.

Beispiele für Websites, auf denen Web-NFC verwendet werden kann, sind:

• In Museen und Kunstgalerien können zusätzliche Informationen zu einer Ausstellung Der Nutzer legt mit seinem Gerät eine NFC-Karte in der Nähe der Ausstellung fest.
• Websites zur Inventarverwaltung können Daten aus dem NFC-Tag auf einem -Container, um Informationen zu seinem Inhalt zu aktualisieren.
• Konferenzstandorte können damit während der Veranstaltung NFC-Abzeichen scannen. werden sie gesperrt, um weitere Änderungen an den darauf gespeicherten Informationen zu verhindern.
• Websites dürfen es verwenden, um anfängliche Secrets für ein Gerät oder einen Dienst freizugeben Bereitstellungsszenarien und auch die Bereitstellung von Konfigurationsdaten im Betrieb .

</ph>

Aktueller Status

Web-NFC verwenden

Funktionserkennung

Die Funktionserkennung für Hardware unterscheidet sich von der, die Sie wahrscheinlich kennen. Wenn NDEFReader vorhanden ist, bedeutet das, dass der Browser Web-NFC unterstützt, aber ob die erforderliche Hardware vorhanden ist. Vor allem, wenn die Hardware fehlt, wird das von bestimmten Aufrufen zurückgegebene Versprechen abgelehnt. Ich gebe hier die in den Details, wenn ich NDEFReader erläutere.

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

Terminologie

Ein NFC-Tag ist ein passives NFC-Gerät, das magnetisch ist. Induktion, wenn sich ein aktives NFC-Gerät (z. B. ein Telefon) in der Nähe befindet. NFC-Tags gibt es in vielen verschiedenen Formen und Moden, z. B. als Aufkleber, Kreditkarten, mehr.

</ph>

Das NDEFReader-Objekt ist der Einstiegspunkt in Web-NFC, über das Funktionen bereitgestellt werden. zum Vorbereiten von Lese- und/oder Schreibaktionen, die ausgeführt werden, wenn ein NDEF-Tag in unmittelbarer Nähe. Die NDEF in NDEFReader steht für NFC Data Exchange. Format, ein einfaches Binärnachrichtenformat, das vom NFC-Forum standardisiert wurde.

Das Objekt NDEFReader dient der Reaktion auf eingehende NDEF-Nachrichten von NFC-Tags und zum Schreiben von NDEF-Nachrichten in NFC-Tags in Reichweite.

Ein NFC-Tag, das NDEF unterstützt, ist wie eine Haftnotiz. Jeder kann ihn lesen und wenn sie nicht schreibgeschützt ist, kann jeder darin schreiben. Es enthält eine einzelne NDEF die einen oder mehrere NDEF-Einträge enthält. Jeder NDEF-Eintrag ist ein Binärstruktur, die eine Datennutzlast und zugehörige Typinformationen enthält. Web-NFC unterstützt die folgenden standardisierten Eintragstypen im NFC-Forum: leer, Text, URL, Smart Poster, MIME-Typ, absolute URL, externer Typ, unbekannt und lokal Typ.

</ph>

NFC-Tags scannen

Instanziieren Sie zum Scannen von NFC-Tags zuerst ein neues NDEFReader-Objekt. scan() wird angerufen ein Versprechen zurück. Der Nutzer wird möglicherweise aufgefordert, vorher darauf zuzugreifen. gewährt wird. Das Promise wird aufgelöst, wenn alle folgenden Bedingungen erfüllt sind:

• Sie wurde nur als Reaktion auf eine Nutzergeste wie eine Touch-Geste oder Mausklick.
• Der Nutzer hat der Website die Interaktion mit NFC-Geräten erlaubt.
• Das Smartphone des Nutzers unterstützt NFC.
• Der Nutzer hat NFC auf seinem Smartphone aktiviert.

Sobald das Promise aufgelöst wurde, sind eingehende NDEF-Nachrichten verfügbar durch reading-Ereignisse über einen Event-Listener abonnieren. Sie sollten auch ein Abo abschließen, an readingerror Ereignisse, um benachrichtigt zu werden, wenn sich inkompatible NFC-Tags befinden Nähe.

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}.`);
});

Wenn sich ein NFC-Tag in der Nähe befindet, wird ein NDEFReadingEvent-Ereignis ausgelöst. Es enthält zwei eindeutige Eigenschaften:

• serialNumber steht für die Seriennummer des Geräts (z. B. 00-11-22-33-44-55-66) oder einen leeren String, wenn keiner verfügbar ist.
• message steht für die NDEF-Nachricht, die im NFC-Tag gespeichert ist.

Zum Lesen des Inhalts der NDEF-Nachricht führen Sie eine Schleife durch message.records und verarbeiten ihre data-Mitglieder basierend auf ihren recordType verantwortlich. Das Mitglied data wird als DataView bereitgestellt, da dies die Verarbeitung erlaubt. Fälle, in denen Daten in UTF-16 codiert sind.

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.
    }
  }
};

NFC-Tags schreiben

Instanziieren Sie zuerst ein neues NDEFReader-Objekt, um NFC-Tags zu schreiben. Anrufen write() gibt ein Promise zurück. Der Nutzer wird möglicherweise aufgefordert, darauf zuzugreifen. zuvor gewährt wurde. An diesem Punkt ist eine NDEF-Nachricht „vorbereitet“ und versprechen wird aufgelöst, wenn alle folgenden Bedingungen erfüllt sind:

• Sie wurde nur als Reaktion auf eine Nutzergeste wie eine Touch-Geste oder Mausklick.
• Der Nutzer hat der Website die Interaktion mit NFC-Geräten erlaubt.
• Das Smartphone des Nutzers unterstützt NFC.
• Der Nutzer hat NFC auf seinem Smartphone aktiviert.
• Der Nutzer hat auf ein NFC-Tag getippt und eine NDEF-Nachricht wurde geschrieben.

Wenn Sie Text in ein NFC-Tag schreiben möchten, übergeben Sie einen String an die Methode write().

const ndef = new NDEFReader();
ndef.write(
  "Hello World"
).then(() => {
  console.log("Message written.");
}).catch(error => {
  console.log(`Write failed :-( try again: ${error}.`);
});

Übergeben Sie ein Wörterbuch, das eine NDEF darstellt, um einen URL-Eintrag in ein NFC-Tag zu schreiben. Nachricht an write(). Im folgenden Beispiel ist die NDEF-Nachricht ein Wörterbuch mit einem records-Schlüssel. Sein Wert ist ein Array von Datensätzen – in diesem Fall eine URL Datensatz, der als Objekt mit dem Schlüssel recordType auf "url" und einem data definiert ist Schlüssel auf den URL-String festgelegt.

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}.`);
});

Es ist auch möglich, mehrere Datensätze in ein NFC-Tag zu schreiben.

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}.`);
});

Wenn das NFC-Tag eine NDEF-Nachricht enthält, die nicht überschrieben werden soll, legen Sie Folgendes fest: das Attribut overwrite für false in den Optionen, die an write() übergeben werden . In diesem Fall wird das zurückgegebene Promise abgelehnt, wenn eine NDEF-Nachricht bereits im NFC-Tag gespeichert.

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}.`);
});

NFC-Tags schreibgeschützt machen

Um zu verhindern, dass böswillige Nutzer den Inhalt eines NFC-Tags überschreiben, können Sie NFC-Tags dauerhaft schreibgeschützt machen. Dieser Vorgang ist nur in eine Richtung möglich. kann nicht rückgängig gemacht werden. Sobald ein NFC-Tag schreibgeschützt ist, kann es nicht mehr geschrieben werden noch mehr.

Instanziieren Sie zuerst ein neues NDEFReader-Objekt, um NFC-Tags schreibgeschützt zu machen. Anrufen makeReadOnly() gibt ein Promise zurück. Der Nutzer wird möglicherweise aufgefordert, darauf zuzugreifen. zuvor gewährt wurde. Das Versprechen wird aufgehoben, wenn die folgenden Bedingungen alle erfüllt sind erfüllt:

• Sie wurde nur als Reaktion auf eine Nutzergeste wie eine Touch-Geste oder Mausklick.
• Der Nutzer hat der Website die Interaktion mit NFC-Geräten erlaubt.
• Das Smartphone des Nutzers unterstützt NFC.
• Der Nutzer hat NFC auf seinem Smartphone aktiviert.
• Der Nutzer hat auf ein NFC-Tag getippt und das NFC-Tag wurde schreibgeschützt.

const ndef = new NDEFReader();
ndef.makeReadOnly()
.then(() => {
  console.log("NFC tag has been made permanently read-only.");
}).catch(error => {
  console.log(`Operation failed: ${error}`);
});

So machen Sie ein NFC-Tag nach dem Schreiben dauerhaft schreibgeschützt.

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}`);
}

Da makeReadOnly() für Android in Chrome 100 oder höher verfügbar ist, solltest du Diese Funktion wird unterstützt mit:

if ("NDEFReader" in window && "makeReadOnly" in NDEFReader.prototype) {
  // makeReadOnly() is supported.
}

Sicherheit und Berechtigungen

Das Chrome-Team hat Web-NFC nach den Grundprinzipien entwickelt und implementiert. definiert in Zugriff auf leistungsstarke Web-Plattformen steuern Funktionen wie Nutzersteuerung, Transparenz und Ergonomie.

Da NFC die Domain der Informationen erweitert, die potenziell böswilligen Nutzern zur Verfügung stehen, Websites ist, ist die Verfügbarkeit von NFC eingeschränkt, um Bekanntheit und Kontrolle über die Nutzung von NFC.

</ph>

Web-NFC ist nur für Frames auf oberster Ebene und sichere Browserkontexte (HTTPS) verfügbar ) Ursprünge müssen bei der Verarbeitung eines Elements zuerst die Berechtigung "nfc" anfordern Nutzergeste (z.B. Klicken auf eine Schaltfläche) Die NDEFReader scan(), write() und makeReadOnly()-Methoden lösen eine Nutzeraufforderung aus, wenn zuvor kein Zugriff gewährt wurde gewährt wird.

  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.
    };
  };

Die Kombination aus einer vom Nutzer initiierten Berechtigungsaufforderung und realen, physischen Die Bewegung, bei der das Gerät über ein Ziel-NFC-Tag gebracht wird, spiegelt die Auswahl wider. in den anderen APIs für den Datei- und Gerätezugriff gefunden wird.

Zum Ausführen eines Scans oder Schreibens muss die Webseite sichtbar sein, wenn der Nutzer darauf tippt mit einem NFC-Tag verbunden. Der Browser nutzt haptisches Feedback, um auf antippen. Der Zugriff auf die NFC-Funkschnittstelle ist blockiert, wenn das Display ausgeschaltet oder das Gerät gesperrt. Für nicht sichtbare Webseiten sind der Empfang und die Übertragung von NFC-Inhalten gesperrt und fortgesetzt, sobald eine Webseite wieder sichtbar ist.

Mit der Page Visibility API können Sie ermitteln, die Sichtbarkeit ändern.

document.onvisibilitychange = event => {
  if (document.hidden) {
    // All NFC operations are automatically suspended when document is hidden.
  } else {
    // All NFC operations are resumed, if needed.
  }
};

Kochbuch

Hier sind einige Codebeispiele für den Einstieg.

Berechtigung prüfen

Mit der Permissions API können Sie prüfen, ob die Berechtigung "nfc" gewährt wird. Dieses Beispiel zeigt, wie NFC-Tags ohne Nutzerinteraktion gescannt werden, wenn Zugriff wurde zuvor gewährt oder es wird eine Schaltfläche angezeigt. Beachten Sie, dass dieselben zum Schreiben von NFC-Tags funktioniert, da hierfür dieselbe Berechtigung unter der

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();
  };
}

NFC-Vorgänge abbrechen

Mit dem Primitiv AbortController kann NFC einfach abgebrochen werden Geschäftsabläufe. Das folgende Beispiel zeigt, wie Sie den signal eines AbortController über die Optionen von NDEFReader scan(), makeReadOnly(), write()-Methoden und brechen Sie beide NFC-Vorgänge gleichzeitig ab.

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();
};

Lesen nach Schreiben

write(), dann scan() mit AbortController verwenden Primitiv ermöglicht es, ein NFC-Tag zu lesen, nachdem eine Nachricht in das Tag geschrieben wurde. Das folgende Beispiel zeigt, wie Sie eine Textnachricht in ein NFC-Tag schreiben und die neue Nachricht im NFC-Tag. Der Scanvorgang wird nach drei Sekunden beendet.

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

Textdatensatz lesen und schreiben

Der Textdatensatz data kann mit einem TextDecoder decodiert werden, der mit dem Datensatz encoding fest. Beachten Sie, dass die Sprache des Texteintrags über die lang-Property verfügbar.

function readTextRecord(record) {
  console.assert(record.recordType === "text");
  const textDecoder = new TextDecoder(record.encoding);
  console.log(`Text: ${textDecoder.decode(record.data)} (${record.lang})`);
}

Um einen einfachen Textdatensatz zu schreiben, übergeben Sie einen String an die NDEFReader-Methode write().

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

Texteinträge sind standardmäßig UTF-8-codiert und setzen die Sprache des aktuellen Dokuments voraus. Beide Attribute (encoding und lang) können mit der vollständigen Syntax angegeben werden zum Erstellen eines benutzerdefinierten NDEF-Eintrags.

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] });

URL-Eintrag lesen und schreiben

Decodieren Sie den data des Eintrags mit TextDecoder.

function readUrlRecord(record) {
  console.assert(record.recordType === "url");
  const textDecoder = new TextDecoder();
  console.log(`URL: ${textDecoder.decode(record.data)}`);
}

Übergeben Sie ein NDEF-Nachrichtenwörterbuch an den NDEFReader, um einen URL-Eintrag zu schreiben write()-Methode. Der in der NDEF-Nachricht enthaltene URL-Eintrag ist definiert als Objekt mit einem recordType-Schlüssel, der auf "url" und einem data-Schlüssel auf die URL gesetzt ist .

const urlRecord = {
  recordType: "url",
  data:"https://w3c.github.io/web-nfc/"
};

const ndef = new NDEFReader();
await ndef.write({ records: [urlRecord] });

MIME-Typ-Eintrag lesen und schreiben

Die Eigenschaft mediaType eines MIME-Typ-Eintrags steht für den MIME-Typ des Nutzlast des NDEF-Eintrags, damit data ordnungsgemäß decodiert werden kann. Verwenden Sie beispielsweise JSON.parse zum Decodieren von JSON-Text und ein Bildelement zum Decodieren von Bilddaten.

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

Um einen MIME-Typ-Eintrag zu schreiben, übergeben Sie ein NDEF-Nachrichtenwörterbuch an den NDEFReader write()-Methode. Der in der NDEF-Nachricht enthaltene MIME-Typ-Eintrag ist definiert als Objekt mit einem recordType-Schlüssel, der auf "mime" gesetzt ist, wird ein mediaType-Schlüssel auf den tatsächlichen MIME-Typ des Inhalts und einen data-Schlüssel, der auf ein Objekt festgelegt ist, ist entweder eine ArrayBuffer oder bietet eine Ansicht für ein ArrayBuffer (z.B. 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] });

Absoluten-URL-Datensatz lesen und schreiben

Der absolute URL-Eintrag data kann mit einem einfachen TextDecoder decodiert werden.

function readAbsoluteUrlRecord(record) {
  console.assert(record.recordType === "absolute-url");
  const textDecoder = new TextDecoder();
  console.log(`Absolute URL: ${textDecoder.decode(record.data)}`);
}

Um einen absoluten URL-Eintrag zu schreiben, übergeben Sie ein NDEF-Nachrichtenwörterbuch an den NDEFReader-Methode write(). Der absolute URL-Eintrag, der in der NDEF enthalten ist Nachricht ist als Objekt mit einem recordType-Schlüssel definiert, der auf "absolute-url" gesetzt ist und einen data-Schlüssel, der auf den URL-String festgelegt ist.

const absoluteUrlRecord = {
  recordType: "absolute-url",
  data:"https://w3c.github.io/web-nfc/"
};

const ndef = new NDEFReader();
await ndef.write({ records: [absoluteUrlRecord] });

Smart-Poster-Aufzeichnung lesen und schreiben

Plakate (für Zeitschriftenwerbung, Flyer, Plakatwände, usw.), werden einige Webinhalte als NDEF-Eintrag beschrieben, der eine NDEF enthält. Nachricht als Nutzlast. record.toRecords() aufrufen, um data in eine Liste umzuwandeln der im Smart Poster-Datensatz enthaltenen Datensätze. Es sollte über einen URL-Datensatz verfügen, Textdatensatz für den Titel, einen MIME-Typ-Datensatz für das Bild und einige benutzerdefinierte lokale Typeinträge wie ":t", ":act" und ":s" für den Typ, Aktion und Größe des Smart Poster-Datensatzes.

Lokale Datensätze sind nur innerhalb des lokalen Kontexts der beinhaltenden NDEF-Eintrag. Verwenden Sie sie, wenn die Bedeutung der Typen außerhalb der Suchanfrage keine Rolle spielt. des lokalen Datensatzes und der Speichernutzung Einschränkung. Namen lokaler Datensätze beginnen in Web-NFC immer mit : (z.B. ":t", ":s", ":act"). Dies dient der Unterscheidung zwischen einem Textdatensatz und einem lokalen Typ Text-Datensatz für Instanz.

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;
  }
}

Übergeben Sie eine NDEF-Nachricht an den NDEFReader write(), um einen Smart Poster-Eintrag zu schreiben . Der in der NDEF-Nachricht enthaltene Smart Poster-Datensatz ist definiert als Objekt mit dem Schlüssel recordType auf "smart-poster" und dem Schlüssel data auf ein Objekt, das (wieder) eine NDEF-Nachricht im Smart-Poster-Datensatz.

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] });

Externen Typdatensatz lesen und schreiben

Verwenden Sie Datensätze vom Typ „Externer Typ“, um anwendungsdefinierte Datensätze zu erstellen. Diese können eine NDEF-Nachricht als Nutzlast enthalten, auf die mit toRecords() zugegriffen werden kann. Ihr name enthält den Domainnamen der ausstellenden Organisation, einen Doppelpunkt und einen Typ Name, der mindestens ein Zeichen lang ist, zum Beispiel "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.
    }
  }
}

Übergeben Sie ein NDEF-Nachrichtenwörterbuch an das NDEFReader-Methode write(). Der in der NDEF enthaltene Eintrag des externen Typs Nachricht ist als Objekt mit einem recordType-Schlüssel definiert, der auf den Namen des externen Typ und ein data-Schlüssel, der auf ein Objekt festgelegt ist, das eine NDEF-Nachricht darstellt im externen Typdatensatz enthalten. Der Schlüssel data kann auch entweder ein ArrayBuffer oder liefert eine Ansicht für ein ArrayBuffer (z.B. 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] });

Leeren Datensatz lesen und schreiben

Ein leerer Datensatz hat keine Nutzlast.

Übergeben Sie ein NDEF-Nachrichtenwörterbuch an den NDEFReader, um einen leeren Eintrag zu schreiben write()-Methode. Der leere Eintrag in der NDEF-Nachricht ist definiert als Ein Objekt mit einem recordType-Schlüssel, der auf "empty" gesetzt ist.

const emptyRecord = {
  recordType: "empty"
};

const ndef = new NDEFReader();
await ndef.write({ records: [emptyRecord] });

Unterstützte Browser

Web-NFC ist für Android ab Chrome 89 verfügbar.

Entwicklertipps

Hier ist eine Liste von Dingen, die ich gerne gewusst hätte, als ich angefangen habe, mit Web-NFC zu spielen:

• Android verarbeitet NFC-Tags auf Betriebssystemebene, bevor Web-NFC betriebsbereit ist.
• Sie finden ein NFC-Symbol unter material.io.
• Mit dem NDEF-Eintrag id können Sie einen Eintrag bei Bedarf einfach identifizieren.
• Ein unformatiertes NFC-Tag, das NDEF unterstützt, enthält einen einzelnen Eintrag mit leerem Typ.
• Das Erstellen eines Android App-Eintrags ist einfach, wie unten gezeigt.

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] });

Demos

Testen Sie das offizielle Beispiel und sehen Sie sich einige coole Web-NFC-Demos an:

• Demo zu Karten
• Lebensmittel-Demo
• Intel-RSP-Sensor für NFC
• Medien-MEMO

Feedback

Die Web NFC Community Group und die Das Chrome-Team würde gern Ihre Meinung zu Web-NFC hören.

Informationen zum API-Design

Gibt es etwas an der API, das nicht wie erwartet funktioniert? Oder gibt es fehlende Methoden oder Eigenschaften, die Sie benötigen, um Ihre Idee umzusetzen?

Reichen Sie ein Spezifikationsproblem im Web-NFC-GitHub-Repository ein oder fügen Sie Ihre Gedanken zu ein Problem besteht.

Problem mit der Implementierung melden

Haben Sie bei der Implementierung von Chrome einen Fehler gefunden? Oder ist die Implementierung von der Spezifikation abweichen?

Melden Sie den Fehler unter https://new.crbug.com. Achten Sie darauf, so viele wie möglich, eine einfache Anleitung zum Reproduzieren des Fehlers geben und Components wurden auf Blink>NFC festgelegt. Glitch eignet sich hervorragend für schnelle und einfache Reproduktionen.

Support anzeigen

Möchten Sie Web-NFC verwenden? Ihre öffentliche Unterstützung hilft dem Chrome-Team Funktionen priorisieren und anderen Browseranbietern zeigen, wie wichtig es ist, sie zu unterstützen.

Sende einen Tweet mit dem Hashtag an @ChromiumDev #WebNFC und teilen Sie uns mit, wo und wie Sie sie nutzen.

Nützliche Links

• Spezifikation
• Web-NFC-Demo | Web-NFC-Demoquelle
• Tracking-Fehler
• ChromeStatus.com-Eintrag
• Blink-Komponente: Blink>NFC

Danksagungen

Vielen Dank an die Folk bei Intel für die Implementierung von Web-NFC. Google Chrome hängt davon ab, dass eine Gemeinschaft von Aktivisten zusammenarbeiten, um Chromium zu migrieren Projekt voranbringen können. Nicht jeder Chromium-Committer ist ein Google-Mitarbeiter. Beitragende verdienen besondere Anerkennung!