Interagir avec des appareils NFC sur Chrome pour Android

Il est désormais possible de lire et d'écrire dans des tags NFC.

François Beaufort
François Beaufort
GitHub

Qu'est-ce que la technologie Web NFC ?

NFC est l'abréviation de NFC (communication en champ proche), une technologie sans fil de courte portée. fonctionnant à 13,56 MHz, ce qui permet la communication entre des appareils éloignés inférieure à 10 cm et un débit de transmission jusqu’à 424 kbit/s.

La technologie Web NFC permet aux sites de lire et d'écrire sur des tags NFC lorsqu'ils à proximité de l'appareil de l'utilisateur (généralement entre 5 et 10 cm). Le champ d'application actuel est limité au format NDEF (NFC) binaire qui fonctionne avec différents formats de tags.

<ph type="x-smartling-placeholder">
</ph> Téléphone utilisant un tag NFC pour échanger des données
Schéma d'une opération NFC
.

Cas d'utilisation suggérés

La technologie NFC Web est limitée au format NDEF, car les propriétés de sécurité de la lecture et l'écriture de données NDEF sont plus facilement quantifiables. Opérations d'E/S de bas niveau (par exemple, ISO-DEP, NFC-A/B, NFC-F), mode de communication peer-to-peer et carte basée sur l'hôte L'émulation (HCE) n'est pas prise en charge.

Voici quelques exemples de sites qui peuvent utiliser la technologie Web NFC:

  • Les musées et galeries d'art peuvent afficher des informations supplémentaires sur une exposition Lorsque l'utilisateur place son appareil contre une carte NFC à proximité de l'exposition.
  • Les sites de gestion de l'inventaire peuvent lire ou écrire des données dans le tag NFC d'un pour mettre à jour les informations sur son contenu.
  • Les sites de conférence peuvent l'utiliser pour scanner les badges NFC pendant l'événement et s'assurer que ils sont verrouillés pour empêcher d'autres modifications des informations qui y sont écrites.
  • Les sites peuvent l'utiliser pour partager les secrets initiaux nécessaires à l'appareil ou au service de provisionnement et de déployer des données de configuration .
<ph type="x-smartling-placeholder">
</ph> Un téléphone scanne plusieurs tags NFC
Illustration de la gestion de l'inventaire NFC

État actuel

Étape État
1. Créer une vidéo explicative Fin
2. Créer l'ébauche initiale de la spécification Fin
3. Recueillir des commentaires et itérer sur la conception Fin
4. Phase d'évaluation Fin
5. Lancement Fin

Utiliser la technologie Web NFC

Détection de caractéristiques

La détection des fonctionnalités sur le matériel est différente de ce à quoi vous êtes probablement habitué. La présence de NDEFReader vous indique que le navigateur est compatible avec la technologie Web NFC, mais que et non si le matériel requis est présent. En particulier, si le matériel est manquante, la promesse renvoyée par certains appels est rejetée. Je fournirai plus de détails quand je décris NDEFReader.

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

Terminologie

Un tag NFC est un appareil NFC passif, c'est-à-dire qu'il est alimenté par des champs magnétiques induction lorsqu'un appareil NFC actif (tel qu'un téléphone) se trouve à proximité. Tags NFC se présentent sous de nombreuses formes et sous différentes formes, comme des autocollants, des cartes de crédit, des poignets de poignet et plus encore.

<ph type="x-smartling-placeholder">
</ph> Photo d&#39;un tag NFC transparent
Un tag NFC transparent
.

L'objet NDEFReader est le point d'entrée de la technologie Web NFC qui expose les fonctionnalités servant à préparer les actions de lecture et/ou d'écriture exécutées lorsqu'une balise NDEF à proximité. NDEF dans NDEFReader signifie "NFC Data Exchange". Format de message binaire léger et standardisé par le forum NFC.

L'objet NDEFReader permet d'agir sur les messages NDEF entrants provenant de tags NFC. et pour écrire des messages NDEF dans des tags NFC à portée.

Un tag NFC compatible avec NDEF ressemble à un post-it. Tout le monde peut le lire, et à moins qu'il ne soit en lecture seule, n'importe qui peut y écrire. Elle contient un seul NDEF qui encapsule un ou plusieurs enregistrements NDEF. Chaque enregistrement NDEF est une structure binaire qui contient une charge utile de données et les informations de type associées. La technologie Web NFC est compatible avec les types d'enregistrements standardisés suivants du forum NFC: vide, texte, URL, Smart Poster, type MIME, URL absolue, type externe, inconnu et local de mots clés.

<ph type="x-smartling-placeholder">
</ph> Schéma d&#39;un message NDEF
Schéma d'un message NDEF
.

Scanner des tags NFC

Pour scanner des tags NFC, instanciez d'abord un nouvel objet NDEFReader. Vous appelez scan()... renvoie une promesse. L'utilisateur peut recevoir une invite s'il n'y a pas eu accès auparavant accordé. La promesse sera résolue si les conditions suivantes sont toutes remplies:

  • Il n'était appelé qu'en réponse à un geste de l'utilisateur, tel qu'un geste tactile ou clic de souris.
  • L'utilisateur a autorisé le site Web à interagir avec des appareils NFC.
  • Le téléphone de l'utilisateur est compatible NFC.
  • L'utilisateur a activé la technologie NFC sur son téléphone.

Une fois la promesse résolue, les messages NDEF entrants sont disponibles par s'abonner à des événements reading via un écouteur d'événements. Vous devriez également vous abonner à readingerror événements pour être averti en cas de tags NFC incompatibles la proximité.

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

Lorsqu'un tag NFC se trouve à proximité, un événement NDEFReadingEvent est déclenché. Il comporte deux propriétés uniques:

  • serialNumber représente le numéro de série de l'appareil (par exemple, 00-11-22-33-44-55-66) ou une chaîne vide si aucune valeur n'est disponible.
  • message représente le message NDEF stocké dans le tag NFC.

Pour lire le contenu du message NDEF, effectuez une boucle dans message.records et traiter leurs membres data de manière appropriée en fonction de leurs recordType ; Le membre data est exposé en tant que DataView, car il permet de gérer dans les cas où les données sont encodées en 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.
    }
  }
};

Écrire des tags NFC

Pour écrire des tags NFC, instanciez d'abord un nouvel objet NDEFReader. Appel en cours write() renvoie une promesse. L'utilisateur peut recevoir une invite si l'accès n'a pas été accordé précédemment. À ce stade, un message NDEF est "préparé" et promettre est résolu si les conditions suivantes sont toutes remplies:

  • Il n'était appelé qu'en réponse à un geste de l'utilisateur, tel qu'un geste tactile ou clic de souris.
  • L'utilisateur a autorisé le site Web à interagir avec des appareils NFC.
  • Le téléphone de l'utilisateur est compatible NFC.
  • L'utilisateur a activé la technologie NFC sur son téléphone.
  • L'utilisateur a appuyé sur un tag NFC et un message NDEF a bien été écrit.

Pour écrire du texte dans un tag NFC, transmettez une chaîne à la méthode write().

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

Pour écrire un enregistrement d'URL dans un tag NFC, transmettez un dictionnaire qui représente un message à write(). Dans l'exemple ci-dessous, le message NDEF est un dictionnaire à l'aide d'une clé records. Sa valeur est un tableau d'enregistrements, dans ce cas, une URL enregistrement défini comme un objet avec une clé recordType définie sur "url" et un élément data définie sur la chaîne de l'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}.`);
});

Il est également possible d'écrire plusieurs enregistrements sur un 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}.`);
});

Si le tag NFC contient un message NDEF qui n'est pas destiné à être écrasé, définissez la propriété overwrite à false dans les options transmises à write() ; . Dans ce cas, la promesse renvoyée rejette si un message NDEF est déjà stockées dans le 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}.`);
});

Rendre les tags NFC en lecture seule

Pour éviter que des utilisateurs malveillants n'écrasent le contenu d'un tag NFC, il est possible de rendre les tags NFC en lecture seule permanents. Cette opération est un processus à sens unique et est irréversible. Une fois qu'un tag NFC est passé en lecture seule, il ne peut plus être écrit. plus.

Pour rendre les tags NFC en lecture seule, instanciez d'abord un nouvel objet NDEFReader. Appel en cours makeReadOnly() renvoie une promesse. L'utilisateur peut recevoir une invite si l'accès n'a pas été accordé précédemment. La promesse sera résolue si les conditions suivantes sont toutes rempli:

  • Il n'était appelé qu'en réponse à un geste de l'utilisateur, tel qu'un geste tactile ou clic de souris.
  • L'utilisateur a autorisé le site Web à interagir avec des appareils NFC.
  • Le téléphone de l'utilisateur est compatible NFC.
  • L'utilisateur a activé la technologie NFC sur son téléphone.
  • L'utilisateur a appuyé sur un tag NFC, et celui-ci est maintenant en lecture seule.
const ndef = new NDEFReader();
ndef.makeReadOnly()
.then(() => {
  console.log("NFC tag has been made permanently read-only.");
}).catch(error => {
  console.log(`Operation failed: ${error}`);
});

Voici comment définir un tag NFC en lecture seule de façon permanente après avoir écrit dessus.

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

Comme makeReadOnly() est disponible sur Android dans Chrome 100 ou version ultérieure, consultez si cette fonctionnalité est compatible avec:

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

Sécurité et autorisations

L'équipe Chrome a conçu et implémenté la technologie Web NFC selon les principes fondamentaux défini dans la section Contrôler l'accès à une plate-forme Web performante Fonctionnalités, y compris contrôle utilisateur, transparence et ergonomie.

La technologie NFC étendant le domaine des informations potentiellement accessibles sur les sites Web, la disponibilité de la technologie NFC est limitée afin d'optimiser la sensibilisation et de contrôler l'utilisation de la technologie NFC.

<ph type="x-smartling-placeholder">
</ph> Capture d&#39;écran d&#39;une invite NFC Web sur un site Web
Invite utilisateur NFC Web
.

La technologie Web NFC n'est disponible que pour les cadres de niveau supérieur et les contextes de navigation sécurisée (HTTPS uniquement). Les origines doivent d'abord demander l'autorisation "nfc" lors du traitement d'une un geste de l'utilisateur (par exemple, un clic sur un bouton). Les NDEFReader scan(), write() et Les méthodes makeReadOnly() déclenchent une invite utilisateur, si l'accès n'était pas accordé.

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

la combinaison d’une demande d’autorisation déclenchée par l’utilisateur et d’une demande le mouvement de passage de l'appareil au-dessus d'un tag NFC cible s'inspire du sélecteur. que vous pouvez trouver dans les autres API de fichiers et d'accès aux appareils.

Pour effectuer une numérisation ou une écriture, la page Web doit être visible lorsque l'utilisateur appuie sur un tag NFC avec leur appareil. Le navigateur utilise un retour haptique pour indiquer appuyez. L'accès à la radio NFC est bloqué si l'écran est éteint ou si l'appareil est verrouillé. Pour les pages Web non visibles, la réception et la transmission de contenu NFC sont suspendues et réactivées lorsqu'une page Web redevient visible.

Grâce à l'API Page Visibility, il est possible de suivre à quel moment un document les changements de visibilité.

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

Livre de recettes

Voici quelques exemples de code pour vous aider à démarrer.

Vérifier les autorisations

L'API Permissions permet de vérifier si l'autorisation "nfc" était accordé. Cet exemple montre comment scanner des tags NFC sans interaction de l'utilisateur si une autorisation d'accès a déjà été accordée, ou afficher un bouton dans le cas contraire. Notez que le même fonctionne pour écrire des tags NFC, car il utilise la même autorisation sous le sous le capot.

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

Annuler les opérations NFC

L'utilisation de la primitive AbortController permet d'abandonner facilement la technologie NFC. opérations. L'exemple ci-dessous montre comment transmettre l'signal d'une AbortController via les options de NDEFReader scan(), makeReadOnly(), write() et annulez les deux opérations NFC en même temps.

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

Lecture après écriture

Utiliser write(), puis scan() avec AbortController primitive permet de lire un tag NFC après l'écriture d'un message. L'exemple ci-dessous montre comment écrire un message dans un tag NFC et lire le nouveau message dans le tag NFC. Il arrête la recherche au bout de trois secondes.

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

Lire et écrire un enregistrement texte

L'enregistrement texte data peut être décodé avec un TextDecoder instancié avec le d'enregistrement encoding. Notez que la langue de l'enregistrement de texte est disponible via sa propriété lang.

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

Pour écrire un enregistrement de texte simple, transmettez une chaîne à la méthode write() NDEFReader.

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

Les enregistrements texte sont UTF-8 par défaut et supposent la langue du document actuel, mais les deux propriétés (encoding et lang) peuvent être spécifiées à l'aide de la syntaxe complète pour créer un enregistrement NDEF personnalisé.

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

Lire et écrire un enregistrement d'URL

Utilisez TextDecoder pour décoder le data de l'enregistrement.

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

Pour écrire un enregistrement d'URL, transmettez un dictionnaire de messages NDEF à NDEFReader write(). L'enregistrement d'URL contenu dans le message NDEF est défini en tant que objet avec une clé recordType définie sur "url" et une clé data définie sur l'URL .

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

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

Lire et écrire un enregistrement de type MIME

La propriété mediaType d'un enregistrement de type MIME représente le type MIME du Charge utile de l'enregistrement NDEF afin que data puisse être correctement décodée. Par exemple, utilisez JSON.parse pour décoder le texte JSON et un élément Image pour décoder les données d'image.

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

Pour écrire un enregistrement de type MIME, transmettez un dictionnaire de messages NDEF à NDEFReader write(). L'enregistrement de type MIME contenu dans le message NDEF est défini en tant qu'objet avec une clé recordType définie sur "mime", une clé mediaType définie sur le type MIME réel du contenu et une clé data définie pour un objet être un ArrayBuffer ou qui fournit une vue sur un ArrayBuffer (par exemple, Uint8Array et 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] });

Lire et écrire un enregistrement d'URL absolue

L'enregistrement d'URL absolue data peut être décodé à l'aide d'un simple TextDecoder.

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

Pour écrire un enregistrement d'URL absolue, transmettez un dictionnaire de messages NDEF à la fonction Méthode write() NDEFReader. Enregistrement d'URL absolue contenu dans le fichier NDEF est défini comme un objet avec une clé recordType définie sur "absolute-url". et une clé data définie sur la chaîne de l'URL.

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

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

Lire et rédiger un rapport sur les affiches intelligentes

Une affiche intelligente (utilisée dans les publicités des magazines, les prospectus, les panneaux d'affichage, , etc.), décrit un certain contenu Web comme un enregistrement NDEF contenant un code NDEF comme charge utile. Appeler record.toRecords() pour transformer data en liste des enregistrements contenus dans l'enregistrement Smart Post. Il doit comporter un enregistrement d'URL, un enregistrement de texte pour le titre, un enregistrement de type MIME pour l'image et des attributs personnalisés des enregistrements de type local tels que ":t", ":act" et ":s" respectivement pour le type, l'action et la taille de l'enregistrement Smart Post.

Les enregistrements de type local sont uniques uniquement dans le contexte local du conteneur Enregistrement NDEF. Utilisez-les lorsque la signification des types n'a pas d'importance en dehors du contexte local de l'enregistrement parent et lorsque l'utilisation du stockage est d'une contrainte. Les noms des enregistrements de type local commencent toujours par : dans Web NFC (par exemple, ":t", ":s", ":act"). Cela permet de différencier un enregistrement texte d'un enregistrement local Tapez Text Record par exemple.

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

Pour écrire un enregistrement d'affichage intelligent, transmettez un message NDEF au write() NDEFReader . L'enregistrement Smart Post contenu dans le message NDEF est défini en tant que objet avec une clé recordType définie sur "smart-poster" et une clé data définie sur un objet qui représente (une fois de plus) un message NDEF contenu dans le d'affichage intelligent.

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

Lire et écrire un enregistrement de type externe

Pour créer des enregistrements définis par l'application, utilisez des enregistrements de type externe. Il peut s'agir contenir en tant que charge utile un message NDEF accessible avec toRecords(). Leur "name" contient le nom de domaine de l'organisation émettrice, le signe deux-points et le type nom comportant au moins un caractère, par exemple "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.
    }
  }
}

Pour écrire un enregistrement de type externe, transmettez un dictionnaire de messages NDEF au Méthode write() NDEFReader. Enregistrement de type externe contenu dans le fichier NDEF est défini comme un objet avec une clé recordType définie sur le nom du un type externe et une clé data définie sur un objet représentant un message NDEF contenue dans l'enregistrement de type externe. Notez que la clé data peut également être un ArrayBuffer ou fournit une vue sur un ArrayBuffer (par exemple, 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] });

Lire et écrire un enregistrement vide

Un enregistrement vide n'a pas de charge utile.

Pour écrire un enregistrement vide, transmettez un dictionnaire de messages NDEF à NDEFReader write(). L'enregistrement vide contenu dans le message NDEF est défini comme suit : un objet dont la clé recordType est définie sur "empty".

const emptyRecord = {
  recordType: "empty"
};

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

Prise en charge des navigateurs

La technologie Web NFC est disponible sur Android dans Chrome 89.

Conseils de développement

Voici ce que j'aurais aimé savoir quand j'ai commencé à jouer avec la technologie Web NFC:

  • Android gère les tags NFC au niveau de l'OS avant que la technologie NFC Web ne soit opérationnelle.
  • Vous trouverez une icône NFC sur material.io.
  • Utilisez l'enregistrement NDEF id pour identifier facilement un enregistrement en cas de besoin.
  • Un tag NFC non formaté et compatible avec NDEF contient un seul enregistrement de type vide.
  • Comme illustré ci-dessous, il est facile de créer un enregistrement d'application Android.
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] });

Démonstrations

Essayez l'exemple officiel et consultez des démonstrations Web NFC sympas:

<ph type="x-smartling-placeholder">
</ph> <ph type="x-smartling-placeholder">.
Démonstration des cartes NFC pour le Web lors du Chrome Dev Summit 2019

Commentaires

Le groupe de la communauté Web NFC et le L'équipe Chrome aimerait connaître votre avis et votre expérience avec la technologie Web NFC.

Présentez-nous la conception de l'API

Y a-t-il un aspect de l'API qui ne fonctionne pas comme prévu ? Ou y a-t-il des méthodes ou des propriétés dont vous avez besoin pour mettre en œuvre votre idée ?

Signalez un problème de spécification dans le dépôt GitHub Web NFC ou faites-nous part de vos commentaires dans un problème existant.

Signaler un problème d'implémentation

Avez-vous détecté un bug dans l'implémentation de Chrome ? Ou l'implémentation différent des spécifications ?

Signalez un bug sur https://new.crbug.com. Assurez-vous d'inclure autant détaillez le plus possible, fournissez des instructions simples pour reproduire le bug Composants définis sur Blink>NFC. Glitch fonctionne parfaitement pour partager des répétitions rapidement et facilement.

Montrez votre soutien

Prévoyez-vous d'utiliser la technologie Web NFC ? Votre assistance publique aide l'équipe Chrome les fonctionnalités et montre aux autres fournisseurs de navigateurs combien il est essentiel de les accompagner.

Envoyez un tweet à @ChromiumDev en utilisant le hashtag. #WebNFC et n'hésitez pas à nous dire où et comment vous l'utilisez.

Liens utiles

Remerciements

Un grand merci à l'équipe d'Intel pour la mise en œuvre de la technologie Web NFC. Google Chrome dépend d'une communauté de contributeurs travaillant ensemble pour faire migrer Chromium projet. Tous les validateurs Chromium ne sont pas tous des Googleurs, et ces contributeurs méritent une reconnaissance particulière !