Communiceer met NFC-apparaten in Chrome voor Android

Het is nu mogelijk om NFC-tags te lezen en ernaar te schrijven.

François Beaufort

Wat is Web NFC?

NFC staat voor Near Field Communications. Het is een draadloze technologie met een kort bereik die werkt op 13,56 MHz en communicatie tussen apparaten op een afstand van minder dan 10 cm en een transmissiesnelheid tot 424 kbit/s mogelijk maakt.

Web NFC biedt websites de mogelijkheid om NFC-tags te lezen en ernaar te schrijven wanneer deze zich dicht bij het apparaat van de gebruiker bevinden (meestal 5-10 cm). De huidige reikwijdte is beperkt tot NFC Data Exchange Format (NDEF), een lichtgewicht binair berichtenformaat dat werkt met verschillende tagformaten.

Voorgestelde gebruiksscenario's

Web NFC is beperkt tot NDEF omdat de beveiligingseigenschappen van het lezen en schrijven van NDEF-gegevens gemakkelijker te kwantificeren zijn. I/O-bewerkingen op laag niveau (bijv. ISO-DEP, NFC-A/B, NFC-F), peer-to-peer-communicatiemodus en hostgebaseerde kaartemulatie (HCE) worden niet ondersteund.

Voorbeelden van sites die Web NFC kunnen gebruiken zijn:

• Musea en kunstgalerijen kunnen extra informatie over een tentoonstelling weergeven wanneer de gebruiker met zijn apparaat een NFC-kaart in de buurt van de tentoonstelling aanraakt.
• Voorraadbeheersites kunnen gegevens lezen of schrijven naar de NFC-tag op een container om informatie over de inhoud ervan bij te werken.
• Conferentiecentra kunnen hiermee NFC-badges scannen tijdens het evenement en ervoor zorgen dat deze vergrendeld zijn om te voorkomen dat de informatie die erop staat, verder wordt gewijzigd.
• Sites kunnen het gebruiken voor het delen van initiële geheimen die nodig zijn voor scenario's voor het inrichten van apparaten of services en ook voor het implementeren van configuratiegegevens in de operationele modus.

Huidige status

Gebruik Web NFC

Functiedetectie

Hardware-kenmerkdetectie is anders dan u waarschijnlijk gewend bent. De aanwezigheid van NDEFReader geeft aan dat de browser Web NFC ondersteunt, maar niet of de vereiste hardware aanwezig is. Vooral als de hardware ontbreekt, wordt de belofte die door bepaalde aanroepen wordt geretourneerd, afgewezen. Ik zal hier meer over vertellen wanneer ik NDEFReader beschrijf.

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

Terminologie

Een NFC-tag is een passief NFC-apparaat. Dit betekent dat het wordt aangestuurd door magnetische inductie wanneer een actief NFC-apparaat (zoals een telefoon) in de buurt is. NFC-tags zijn er in vele vormen en maten, zoals stickers, creditcards, polsbanden en meer.

Het NDEFReader object is het toegangspunt in Web NFC dat functionaliteit beschikbaar stelt voor het voorbereiden van lees- en/of schrijfacties die worden uitgevoerd wanneer een NDEF-tag in de buurt komt. De NDEF in NDEFReader staat voor NFC Data Exchange Format, een lichtgewicht binair berichtenformaat dat is gestandaardiseerd door het NFC Forum .

Het NDEFReader object dient om te reageren op binnenkomende NDEF-berichten van NFC-tags en om NDEF-berichten te schrijven naar NFC-tags binnen bereik.

Een NFC-tag die NDEF ondersteunt, is vergelijkbaar met een post-it. Iedereen kan hem lezen en, tenzij hij alleen-lezen is, kan iedereen ernaar schrijven. Hij bevat één NDEF-bericht dat één of meer NDEF-records bevat. Elk NDEF-record is een binaire structuur met een data-payload en bijbehorende type-informatie. Web NFC ondersteunt de volgende gestandaardiseerde recordtypen van het NFC Forum: leeg, tekst, URL, smart poster, MIME-type, absolute URL, extern type, onbekend en lokaal type.

NFC-tags scannen

Om NFC-tags te scannen, moet u eerst een nieuw NDEFReader object instantiëren. Het aanroepen van scan() retourneert een belofte. De gebruiker kan een melding krijgen als er eerder geen toegang is verleend. De belofte wordt verwerkt als aan alle volgende voorwaarden is voldaan:

• Het werd alleen aangeroepen als reactie op een gebaar van de gebruiker, zoals een aanraakgebaar of een muisklik.
• De gebruiker heeft de website toestemming gegeven om te communiceren met NFC-apparaten.
• De telefoon van de gebruiker ondersteunt NFC.
• De gebruiker heeft NFC ingeschakeld op zijn telefoon.

Zodra de belofte is opgelost, zijn inkomende NDEF-berichten beschikbaar door u te abonneren op reading via een eventlistener. U dient zich ook te abonneren op readingerror -gebeurtenissen om een melding te ontvangen wanneer er incompatibele NFC-tags in de buurt zijn.

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

Wanneer een NFC-tag in de buurt is, wordt een NDEFReadingEvent -gebeurtenis geactiveerd. Deze bevat twee unieke eigenschappen:

• serialNumber vertegenwoordigt het serienummer van het apparaat (bijv. 00-11-22-33-44-55-66) of een lege tekenreeks als er geen beschikbaar is.
• message vertegenwoordigt het NDEF-bericht dat is opgeslagen in de NFC-tag.

Om de inhoud van het NDEF-bericht te lezen, doorloopt u message.records en verwerkt u de data elementen op de juiste manier op basis van hun recordType . Het data element wordt weergegeven als een DataView , omdat het gevallen mogelijk maakt waarin gegevens in UTF-16 zijn gecodeerd.

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 schrijven

Om NFC-tags te schrijven, moet u eerst een nieuw NDEFReader object instantiëren. Het aanroepen van write() retourneert een promise. De gebruiker kan een melding krijgen als er eerder geen toegang is verleend. Op dit punt wordt een NDEF-bericht "voorbereid" en wordt de promise verwerkt als aan alle volgende voorwaarden is voldaan:

• Het werd alleen aangeroepen als reactie op een gebaar van de gebruiker, zoals een aanraakgebaar of een muisklik.
• De gebruiker heeft de website toestemming gegeven om te communiceren met NFC-apparaten.
• De telefoon van de gebruiker ondersteunt NFC.
• De gebruiker heeft NFC ingeschakeld op zijn telefoon.
• De gebruiker heeft op een NFC-tag getikt en er is met succes een NDEF-bericht geschreven.

Om tekst naar een NFC-tag te schrijven, geeft u een tekenreeks door aan de write() methode.

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

Om een URL-record naar een NFC-tag te schrijven, geeft u een woordenboek door dat een NDEF-bericht vertegenwoordigt aan write() . In het onderstaande voorbeeld is het NDEF-bericht een woordenboek met een records sleutel. De waarde ervan is een array van records - in dit geval een URL-record gedefinieerd als een object met een recordType -sleutel ingesteld op "url" en een data ingesteld op de URL-string.

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

Het is ook mogelijk om meerdere records naar een NFC-tag te schrijven.

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

Als de NFC-tag een NDEF-bericht bevat dat niet overschreven moet worden, stel dan de overwrite eigenschap in op false in de opties die aan de write() methode zijn doorgegeven. In dat geval wordt de geretourneerde promise afgewezen als er al een NDEF-bericht in de NFC-tag is opgeslagen.

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 alleen-lezen maken

Om te voorkomen dat kwaadwillende gebruikers de inhoud van een NFC-tag overschrijven, is het mogelijk om NFC-tags permanent alleen-lezen te maken. Deze bewerking is een eenrichtingsverkeer en kan niet ongedaan worden gemaakt. Zodra een NFC-tag alleen-lezen is gemaakt, kan er niet meer naar worden geschreven.

Om NFC-tags alleen-lezen te maken, moet u eerst een nieuw NDEFReader object instantiëren. Het aanroepen makeReadOnly() retourneert een belofte. De gebruiker kan een melding krijgen als er eerder geen toegang is verleend. De belofte wordt verwerkt als aan alle volgende voorwaarden is voldaan:

• Het werd alleen aangeroepen als reactie op een gebaar van de gebruiker, zoals een aanraakgebaar of een muisklik.
• De gebruiker heeft de website toestemming gegeven om te communiceren met NFC-apparaten.
• De telefoon van de gebruiker ondersteunt NFC.
• De gebruiker heeft NFC ingeschakeld op zijn telefoon.
• De gebruiker heeft op een NFC-tag getikt en de NFC-tag is succesvol alleen-lezen gemaakt.

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

Hier leest u hoe u een NFC-tag permanent alleen-lezen kunt maken nadat ernaar is geschreven.

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

Omdat makeReadOnly() beschikbaar is op Android in Chrome 100 of later, controleer of deze functie wordt ondersteund met het volgende:

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

Beveiliging en machtigingen

Het Chrome-team heeft Web NFC ontworpen en geïmplementeerd op basis van de kernprincipes die zijn gedefinieerd in Controlling Access to Powerful Web Platform Features , waaronder gebruikerscontrole, transparantie en ergonomie.

Omdat NFC het informatiedomein vergroot dat potentieel beschikbaar is voor kwaadaardige websites, wordt de beschikbaarheid van NFC beperkt om het bewustzijn en de controle van gebruikers over NFC-gebruik te maximaliseren.

Web NFC is alleen beschikbaar voor frames op het hoogste niveau en beveiligde browsercontexten (alleen HTTPS). Bronnen moeten eerst de toestemming "nfc" aanvragen tijdens het verwerken van een gebruikersgebaar (bijvoorbeeld een klik op een knop). De methoden scan() , write() en makeReadOnly() NDEFReader activeren een gebruikersprompt als er eerder geen toegang is verleend.

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

De combinatie van een door de gebruiker geïnitieerde toestemmingsprompt en een fysieke beweging van het apparaat over een NFC-doeltag in de echte wereld weerspiegelt het keuzepatroon dat in de andere API's voor toegang tot bestanden en apparaten wordt aangetroffen.

Om te scannen of te schrijven, moet de webpagina zichtbaar zijn wanneer de gebruiker een NFC-tag aanraakt met zijn apparaat. De browser gebruikt haptische feedback om een tik aan te geven. De toegang tot de NFC-radio is geblokkeerd als het scherm is uitgeschakeld of het apparaat is vergrendeld. Voor niet-zichtbare webpagina's wordt het ontvangen en versturen van NFC-content opgeschort en hervat zodra een webpagina weer zichtbaar wordt.

Dankzij de Page Visibility API kunt u bijhouden wanneer de zichtbaarheid van documenten verandert.

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

Kookboek

Hier zijn enkele codevoorbeelden om u op weg te helpen.

Controleer toestemming

Met de Permissions API kunt u controleren of de "nfc" -machtiging is verleend. Dit voorbeeld laat zien hoe u NFC-tags kunt scannen zonder gebruikersinteractie als er eerder toegang is verleend, of hoe u anders een knop kunt weergeven. Merk op dat hetzelfde mechanisme werkt voor het schrijven van NFC-tags, aangezien het onder de motorkap dezelfde machtiging gebruikt.

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-bewerkingen afbreken

Met de AbortController primitive is het eenvoudig om NFC-bewerkingen af te breken. Het onderstaande voorbeeld laat zien hoe u het signal van een AbortController via de opties van de NDEFReader-methoden scan() , makeReadOnly() en write() kunt doorgeven en beide NFC-bewerkingen tegelijkertijd kunt afbreken.

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

Lezen na schrijven

Door write() en vervolgens scan() te gebruiken met de AbortController primitive, is het mogelijk om een NFC-tag te lezen nadat er een bericht naartoe is geschreven. Het onderstaande voorbeeld laat zien hoe u een tekstbericht naar een NFC-tag schrijft en het nieuwe bericht in de NFC-tag leest. Het scannen stopt na drie seconden.

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

Een tekstrecord lezen en schrijven

De data kunnen worden gedecodeerd met een TextDecoder die is geïnstantieerd met de eigenschap 'record encoding . Merk op dat de taal van het tekstrecord beschikbaar is via de eigenschap lang .

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

Om een eenvoudige tekstrecord te schrijven, geeft u een tekenreeks door aan de NDEFReader write() methode.

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

Tekstrecords zijn standaard UTF-8 en nemen de taal van het huidige document aan. Beide eigenschappen ( encoding en lang ) kunnen echter worden opgegeven met behulp van de volledige syntaxis voor het maken van een aangepaste NDEF-record.

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

Een URL-record lezen en schrijven

Gebruik TextDecoder om de data van het record te decoderen.

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

Om een URL-record te schrijven, geeft u een NDEF-berichtenwoordenboek door aan de NDEFReader write() methode. Het URL-record in het NDEF-bericht wordt gedefinieerd als een object met een recordType -sleutel ingesteld op "url" en een data ingesteld op de URL-tekenreeks.

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

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

Een MIME-type record lezen en schrijven

De mediaType eigenschap van een MIME-record vertegenwoordigt het MIME-type van de NDEF-recordpayload, zodat data correct kunnen worden gedecodeerd. Gebruik bijvoorbeeld JSON.parse om JSON-tekst te decoderen en een Image-element om afbeeldingsgegevens te decoderen.

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

Om een MIME-record te schrijven, geeft u een NDEF-berichtenwoordenboek door aan de NDEFReader write() methode. Het MIME-record in het NDEF-bericht wordt gedefinieerd als een object met een recordType -sleutel ingesteld op "mime" , een mediaType sleutel ingesteld op het daadwerkelijke MIME-type van de content en een data ingesteld op een object dat een ArrayBuffer kan zijn of een weergave van een ArrayBuffer biedt (bijv. 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] });

Een absolute URL-record lezen en schrijven

De absolute URL- data kunnen worden gedecodeerd met een eenvoudige TextDecoder .

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

Om een absolute URL-record te schrijven, geeft u een NDEF-berichtenwoordenboek door aan de NDEFReader write() methode. De absolute URL-record in het NDEF-bericht wordt gedefinieerd als een object met een recordType -sleutel ingesteld op "absolute-url" en een data ingesteld op de URL-tekenreeks.

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

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

Lees en schrijf een slimme posterregistratie

Een smart poster record (gebruikt in tijdschriftadvertenties, flyers, billboards, enz.) beschrijft bepaalde webcontent als een NDEF-record met een NDEF-bericht als payload. Roep record.toRecords() aan om data te transformeren naar een lijst met records in de smart poster record. Deze moet een URL-record, een tekstrecord voor de titel, een MIME-record voor de afbeelding en enkele aangepaste lokale typerecords bevatten, zoals ":t" , ":act" en ":s" respectievelijk voor het type, de actie en de grootte van de smart poster record.

Lokale typerecords zijn alleen uniek binnen de lokale context van de NDEF-record die ze bevatten. Gebruik ze wanneer de betekenis van de typen er niet toe doet buiten de lokale context van de record die ze bevatten en wanneer opslaggebruik een harde beperking is. Namen van lokale typerecords beginnen altijd met : in Web NFC (bijv. ":t" , ":s" , ":act" ). Dit is bijvoorbeeld om een tekstrecord te onderscheiden van een lokaal tekstrecord.

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

Om een smart poster record te schrijven, geeft u een NDEF-bericht door aan de NDEFReader write() methode. De smart poster record in het NDEF-bericht wordt gedefinieerd als een object met een recordType -sleutel ingesteld op "smart-poster" en een data ingesteld op een object dat (wederom) een NDEF-bericht in de smart poster record vertegenwoordigt.

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

Een extern typerecord lezen en schrijven

Gebruik externe typerecords om applicatiegedefinieerde records te maken. Deze kunnen een NDEF-bericht als payload bevatten dat toegankelijk is met toRecords() . Hun naam bevat de domeinnaam van de uitgevende organisatie, een dubbele punt en een typenaam die minstens één teken lang is, bijvoorbeeld "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.
    }
  }
}

Om een extern typerecord te schrijven, geeft u een NDEF-berichtenwoordenboek door aan de NDEFReader write() methode. Het externe typerecord in het NDEF-bericht wordt gedefinieerd als een object met een recordType -sleutel die is ingesteld op de naam van het externe type en een data die is ingesteld op een object dat een NDEF-bericht in het externe typerecord vertegenwoordigt. De data kan ook een ArrayBuffer zijn of een weergave van een ArrayBuffer bieden (bijvoorbeeld 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] });

Een leeg record lezen en schrijven

Een leeg record heeft geen payload.

Om een leeg record te schrijven, geeft u een NDEF-berichtenwoordenboek door aan de NDEFReader write() methode. Het lege record in het NDEF-bericht wordt gedefinieerd als een object met een recordType sleutel ingesteld op "empty" .

const emptyRecord = {
  recordType: "empty"
};

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

Browserondersteuning

Web NFC is beschikbaar op Android in Chrome 89.

Ontwikkelaarstips

Hier is een lijst met dingen die ik had willen weten toen ik begon met Web NFC:

• Android verwerkt NFC-tags op OS-niveau voordat Web NFC operationeel is.
• Je vindt een NFC-icoon op material.io .
• Gebruik NDEF-record id om een record eenvoudig te identificeren wanneer dat nodig is.
• Een ongeformatteerde NFC-tag die NDEF ondersteunt, bevat één record van het lege type.
• Zoals hieronder te zien is, is het schrijven van een Android-applicatierecord eenvoudig.

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's

Probeer het officiële voorbeeld uit en bekijk enkele coole Web NFC-demo's:

• Kaarten demo
• Kruidenierswaren Demo
• Intel RSP-sensor NFC
• Media MEMO

Feedback

De Web NFC Community Group en het Chrome-team horen graag uw mening en ervaringen met Web NFC.

Vertel ons over het API-ontwerp

Werkt er iets in de API niet zoals verwacht? Of ontbreken er methoden of eigenschappen die u nodig hebt om uw idee te implementeren?

Dien een spec-probleem in op de Web NFC GitHub-repository of voeg uw mening toe over een bestaand probleem.

Meld een probleem met de implementatie

Heb je een bug gevonden in de implementatie van Chrome? Of wijkt de implementatie af van de specificatie?

Meld een bug op https://new.crbug.com . Zorg ervoor dat u zoveel mogelijk details verstrekt, eenvoudige instructies geeft voor het reproduceren van de bug en dat Components is ingesteld op Blink>NFC .

Toon steun

Bent u van plan Web NFC te gebruiken? Uw publieke steun helpt het Chrome-team bij het prioriteren van functies en laat andere browserleveranciers zien hoe belangrijk het is om deze te ondersteunen.

Stuur een tweet naar @ChromiumDev met de hashtag #WebNFC en laat ons weten waar en hoe je het gebruikt.

Nuttige links

• Specificatie
• Web NFC-demo
• Tracking-bug
• ChromeStatus.com-vermelding
• Knippercomponent: Blink>NFC

Dankbetuigingen

Hartelijk dank aan de mensen van Intel voor de implementatie van Web NFC. Google Chrome is afhankelijk van een community van committers die samenwerken om het Chromium-project vooruit te helpen. Niet elke Chromium-committer is een Googler, en deze bijdragers verdienen speciale erkenning!