Cómo interactuar con dispositivos NFC en Chrome para Android

Ahora es posible leer y escribir en etiquetas NFC.

François Beaufort
François Beaufort
GitHub

¿Qué es la API de Web NFC?

NFC significa Near Field Communications, una tecnología inalámbrica de corto alcance que funciona a 13.56 MHz y permite la comunicación entre dispositivos a una distancia inferior a 10 cm y una velocidad de transmisión de hasta 424 kbit/s.

Web NFC permite que los sitios lean y escriban en etiquetas NFC cuando están cerca del dispositivo del usuario (por lo general, de 5 a 10 cm, o de 2 a 4 pulgadas). El alcance actual se limita al formato de intercambio de datos NFC (NDEF), un formato de mensaje binario ligero que funciona en diferentes formatos de etiquetas.

Teléfono que alimenta una etiqueta NFC para intercambiar datos
Diagrama de una operación de NFC

Casos de uso sugeridos

La API de Web NFC se limita a NDEF porque las propiedades de seguridad de la lectura y escritura de datos NDEF son más fáciles de cuantificar. No se admiten las operaciones de E/S de bajo nivel (p.ej., ISO-DEP, NFC-A/B, NFC-F), el modo de comunicación peer-to-peer ni la emulación de tarjeta basada en host (HCE).

Estos son algunos ejemplos de sitios que pueden usar Web NFC:

  • Los museos y las galerías de arte pueden mostrar información adicional sobre una exposición cuando el usuario acerca su dispositivo a una tarjeta NFC cerca de la exhibición.
  • Los sitios de administración de inventario pueden leer o escribir datos en la etiqueta NFC de un contenedor para actualizar la información sobre su contenido.
  • Los sitios de conferencias pueden usarla para escanear las credenciales NFC durante el evento y asegurarse de que estén bloqueadas para evitar más cambios en la información escrita en ellas.
  • Los sitios pueden usarlo para compartir los secretos iniciales necesarios para las situaciones de aprovisionamiento de dispositivos o servicios, y también para implementar datos de configuración en el modo operativo.
El teléfono escanea varias etiquetas NFC
Ilustración de la administración del inventario de NFC

Estado actual

Paso Estado
1. Crea una explicación Completar
2. Crea el borrador inicial de la especificación Completar
3. Recopila comentarios y realiza iteraciones en el diseño Completar
4. Prueba de origen Completar
5. Lanzamiento Completar

Cómo usar la API de Web NFC

Detección de características

La detección de funciones para el hardware es diferente de lo que probablemente conoces. La presencia de NDEFReader indica que el navegador admite Web NFC, pero no si el hardware requerido está presente. En particular, si falta el hardware, se rechazará la promesa que devuelven ciertas llamadas. Proporcionaré detalles cuando describa NDEFReader.

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

Terminología

Una etiqueta NFC es un dispositivo NFC pasivo, lo que significa que se alimenta por inducción magnética cuando un dispositivo NFC activo (como un teléfono) está cerca. Las etiquetas NFC vienen en muchas formas y estilos, como calcomanías, tarjetas de crédito, pulseras y mucho más.

Foto de una etiqueta NFC transparente
Una etiqueta NFC transparente

El objeto NDEFReader es el punto de entrada en la API de Web NFC que expone la funcionalidad para preparar acciones de lectura o escritura que se cumplen cuando una etiqueta NDEF se acerca. El NDEF en NDEFReader significa NFC Data Exchange Format, un formato de mensaje binario liviano estandarizado por el NFC Forum.

El objeto NDEFReader se usa para actuar sobre los mensajes NDEF entrantes de etiquetas NFC y para escribir mensajes NDEF en etiquetas NFC dentro del alcance.

Una etiqueta NFC que admite NDEF es como un papel adhesivo. Cualquiera puede leerlo y, a menos que sea de solo lectura, cualquiera puede escribir en él. Contiene un solo mensaje NDEF que encapsula uno o más registros NDEF. Cada registro NDEF es una estructura binaria que contiene una carga útil de datos y la información de tipo asociada. Web NFC admite los siguientes tipos de registros estandarizados por el Foro NFC: vacío, texto, URL, póster inteligente, tipo de MIME, URL absoluta, tipo externo, desconocido y tipo local.

Diagrama de un mensaje NDEF
Diagrama de un mensaje NDEF

Escanear etiquetas NFC

Para analizar etiquetas NFC, primero crea una instancia de un objeto NDEFReader nuevo. Si se llama a scan(), se devuelve una promesa. Es posible que se le solicite al usuario si no se le otorgó acceso anteriormente. La promesa se resolverá si se cumplen todas las siguientes condiciones:

  • Solo se llamaba en respuesta a un gesto del usuario, como un gesto táctil o un clic del mouse.
  • El usuario permitió que el sitio web interactúe con dispositivos NFC.
  • El teléfono del usuario admite NFC.
  • El usuario habilitó la NFC en su teléfono.

Una vez que se resuelve la promesa, los mensajes NDEF entrantes están disponibles si te suscribes a los eventos reading a través de un objeto de escucha de eventos. También debes suscribirte a los eventos de readingerror para recibir notificaciones cuando haya etiquetas NFC incompatibles cerca.

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

Cuando una etiqueta NFC está cerca, se activa un evento NDEFReadingEvent. Contiene dos propiedades únicas:

  • serialNumber representa el número de serie del dispositivo (p. ej., 00-11-22-33-44-55-66) o una cadena vacía si no hay ninguno disponible.
  • message representa el mensaje NDEF almacenado en la etiqueta NFC.

Para leer el contenido del mensaje NDEF, itera a través de message.records y procesa sus miembros data de forma adecuada según su recordType. El miembro data se expone como un DataView, ya que permite controlar los casos en los que los datos están codificados 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.
    }
  }
};

Escribir etiquetas NFC

Para escribir etiquetas NFC, primero crea una instancia de un objeto NDEFReader nuevo. Si se llama a write(), se devuelve una promesa. Es posible que se le solicite al usuario que otorgue acceso si no lo hizo anteriormente. En este punto, se "prepara" un mensaje NDEF y la promesa se resolverá si se cumplen todas las siguientes condiciones:

  • Solo se llamaba en respuesta a un gesto del usuario, como un gesto táctil o un clic del mouse.
  • El usuario permitió que el sitio web interactúe con dispositivos NFC.
  • El teléfono del usuario admite NFC.
  • El usuario habilitó la NFC en su teléfono.
  • El usuario presionó una etiqueta NFC y se escribió correctamente un mensaje NDEF.

Para escribir texto en una etiqueta NFC, pasa una cadena al método write().

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

Para escribir un registro de URL en una etiqueta NFC, pasa un diccionario que represente un mensaje NDEF a write(). En el siguiente ejemplo, el mensaje NDEF es un diccionario con una clave records. Su valor es un array de registros; en este caso, un registro de URL definido como un objeto con una clave recordType establecida en "url" y una clave data establecida en la cadena de 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}.`);
});

También es posible escribir varios registros en una etiqueta 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 la etiqueta NFC contiene un mensaje NDEF que no se debe reemplazar, configura la propiedad overwrite como false en las opciones que se pasan al método write(). En ese caso, la promesa devuelta se rechazará si ya hay un mensaje NDEF almacenado en la etiqueta 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}.`);
});

Cómo hacer que las etiquetas NFC sean de solo lectura

Para evitar que usuarios malintencionados sobrescriban el contenido de una etiqueta NFC, es posible hacer que las etiquetas NFC sean de solo lectura de forma permanente. Esta operación es un proceso unidireccional y no se puede revertir. Una vez que una etiqueta NFC se establece como de solo lectura, ya no se puede escribir en ella.

Para que las etiquetas NFC sean de solo lectura, primero crea una instancia de un objeto NDEFReader nuevo. Si se llama a makeReadOnly(), se devuelve una promesa. Es posible que se le solicite al usuario que otorgue acceso si no lo hizo anteriormente. La promesa se resolverá si se cumplen todas las siguientes condiciones:

  • Solo se llamaba en respuesta a un gesto del usuario, como un gesto táctil o un clic del mouse.
  • El usuario permitió que el sitio web interactúe con dispositivos NFC.
  • El teléfono del usuario admite NFC.
  • El usuario habilitó la NFC en su teléfono.
  • El usuario tocó una etiqueta NFC y esta se configuró correctamente como de solo lectura.
const ndef = new NDEFReader();
ndef.makeReadOnly()
.then(() => {
  console.log("NFC tag has been made permanently read-only.");
}).catch(error => {
  console.log(`Operation failed: ${error}`);
});

Sigue estos pasos para que una etiqueta NFC sea de solo lectura de forma permanente después de escribir en ella.

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

Como makeReadOnly() está disponible en Android en Chrome 100 o versiones posteriores, verifica si esta función es compatible con lo siguiente:

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

Seguridad y permisos

El equipo de Chrome diseñó e implementó la API de Web NFC según los principios fundamentales definidos en Controlling Access to Powerful Web Platform Features, incluidos el control del usuario, la transparencia y la ergonomía.

Dado que la NFC expande el dominio de la información potencialmente disponible para los sitios web maliciosos, la disponibilidad de la NFC está restringida para maximizar la conciencia de los usuarios y el control sobre el uso de la NFC.

Captura de pantalla de un mensaje de NFC web en un sitio web
Mensaje para el usuario de Web NFC

La API de Web NFC solo está disponible para los marcos de nivel superior y los contextos de navegación seguros (solo HTTPS). Primero, los orígenes deben solicitar el permiso de "nfc" mientras controlan un gesto del usuario (p. ej., un clic en un botón). Los métodos NDEFReader scan(), write() y makeReadOnly() activan un mensaje para el usuario si no se otorgó acceso previamente.

  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 combinación de un mensaje de permiso iniciado por el usuario y el movimiento físico del mundo real de acercar el dispositivo a una etiqueta NFC de destino imita el patrón del selector que se encuentra en las otras APIs de acceso a archivos y dispositivos.

Para realizar un escaneo o una escritura, la página web debe estar visible cuando el usuario toca una etiqueta NFC con su dispositivo. El navegador usa la respuesta háptica para indicar un toque. Se bloquea el acceso a la radio NFC si la pantalla está apagada o el dispositivo está bloqueado. En el caso de las páginas web no visibles, se suspende la recepción y el envío de contenido NFC, y se reanudan cuando una página web vuelve a ser visible.

Gracias a la API de Page Visibility, es posible hacer un seguimiento de los cambios en la visibilidad del documento.

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

Libro de recetas

A continuación, se incluyen algunas muestras de código para comenzar.

Verifica si tu app tiene permisos

La Permissions API permite verificar si se otorgó el permiso "nfc". En este ejemplo, se muestra cómo analizar etiquetas NFC sin interacción del usuario si se otorgó acceso previamente o, de lo contrario, mostrar un botón. Ten en cuenta que el mismo mecanismo funciona para escribir etiquetas NFC, ya que usa el mismo permiso de forma interna.

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

Anula las operaciones de NFC

Usar la primitiva AbortController facilita la anulación de las operaciones de NFC. En el siguiente ejemplo, se muestra cómo pasar el signal de un AbortController a través de las opciones de los métodos scan(), makeReadOnly() y write() de NDEFReader y anular ambas operaciones de NFC al mismo tiempo.

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

Lectura después de la escritura

Usar write() y, luego, scan() con la primitiva AbortController permite leer una etiqueta NFC después de escribir un mensaje en ella. En el siguiente ejemplo, se muestra cómo escribir un mensaje de texto en una etiqueta NFC y leer el nuevo mensaje en la etiqueta NFC. La búsqueda se detiene después de tres segundos.

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

Leer y escribir un registro de texto

El registro de texto data se puede decodificar con un TextDecoder que se instancia con la propiedad encoding del registro. Ten en cuenta que el idioma del registro de texto está disponible a través de su propiedad lang.

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

Para escribir un registro de texto simple, pasa una cadena al método write() de NDEFReader.

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

Los registros de texto son UTF-8 de forma predeterminada y suponen el idioma del documento actual, pero ambas propiedades (encoding y lang) se pueden especificar con la sintaxis completa para crear un registro NDEF personalizado.

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

Cómo leer y escribir un registro de URL

Usa TextDecoder para decodificar el data del registro.

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

Para escribir un registro de URL, pasa un diccionario de mensajes NDEF al método write() de NDEFReader. El registro de URL incluido en el mensaje NDEF se define como un objeto con una clave recordType establecida en "url" y una clave data establecida en la cadena de URL.

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

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

Cómo leer y escribir un registro de tipo de MIME

La propiedad mediaType de un registro de tipo de MIME representa el tipo de MIME de la carga útil del registro NDEF para que data se pueda decodificar correctamente. Por ejemplo, usa JSON.parse para decodificar texto JSON y un elemento Image para decodificar datos de imágenes.

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

Para escribir un registro de tipo MIME, pasa un diccionario de mensajes NDEF al método write() de NDEFReader. El registro de tipo MIME que se incluye en el mensaje NDEF se define como un objeto con una clave recordType establecida en "mime", una clave mediaType establecida en el tipo de MIME real del contenido y una clave data establecida en un objeto que puede ser un ArrayBuffer o proporcionar una vista de un ArrayBuffer (p.ej., 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] });

Cómo leer y escribir un registro de URL absoluta

El registro de URL absoluta data se puede decodificar con un TextDecoder simple.

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

Para escribir un registro de URL absoluta, pasa un diccionario de mensajes NDEF al método write() de NDEFReader. El registro de URL absoluta que se incluye en el mensaje NDEF se define como un objeto con una clave recordType establecida en "absolute-url" y una clave data establecida en la cadena de URL.

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

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

Cómo leer y escribir un registro de Smart Poster

Un registro de póster inteligente (que se usa en anuncios de revistas, folletos, vallas publicitarias, etc.) describe cierto contenido web como un registro NDEF que contiene un mensaje NDEF como carga útil. Llama a record.toRecords() para transformar data en una lista de registros incluidos en el registro del póster inteligente. Debe tener un registro de URL, un registro de texto para el título, un registro de tipo de MIME para la imagen y algunos registros de tipo local personalizados, como ":t", ":act" y ":s", respectivamente, para el tipo, la acción y el tamaño del registro de póster inteligente.

Los registros de tipo local solo son únicos dentro del contexto local del registro NDEF que los contiene. Úsalos cuando el significado de los tipos no importe fuera del contexto local del registro contenedor y cuando el uso del almacenamiento sea una restricción estricta. Los nombres de registros de tipo local siempre comienzan con : en Web NFC (p.ej., ":t", ":s", ":act"). Esto permite diferenciar un registro de texto de un registro de texto de tipo local, por ejemplo.

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

Para escribir un registro de Smart Poster, pasa un mensaje NDEF al método write() de NDEFReader. El registro de póster inteligente incluido en el mensaje NDEF se define como un objeto con una clave recordType establecida en "smart-poster" y una clave data establecida en un objeto que representa (una vez más) un mensaje NDEF incluido en el registro de póster inteligente.

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

Cómo leer y escribir un registro de tipo externo

Para crear registros definidos por la aplicación, usa registros de tipo externo. Estos pueden contener un mensaje NDEF como carga útil que es accesible con toRecords(). Su nombre contiene el nombre de dominio de la organización emisora, dos puntos y un nombre de tipo que tiene al menos un carácter de longitud, por ejemplo, "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.
    }
  }
}

Para escribir un registro de tipo externo, pasa un diccionario de mensajes NDEF al método write() de NDEFReader. El registro de tipo externo incluido en el mensaje NDEF se define como un objeto con una clave recordType establecida en el nombre del tipo externo y una clave data establecida en un objeto que representa un mensaje NDEF incluido en el registro de tipo externo. Ten en cuenta que la clave data también puede ser un ArrayBuffer o proporcionar una vista de un ArrayBuffer (p.ej., 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] });

Cómo leer y escribir un registro vacío

Un registro vacío no tiene carga útil.

Para escribir un registro vacío, pasa un diccionario de mensajes NDEF al método write() de NDEFReader. El registro vacío que se incluye en el mensaje NDEF se define como un objeto con una clave recordType establecida en "empty".

const emptyRecord = {
  recordType: "empty"
};

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

Navegadores compatibles

La NFC web está disponible en Android en Chrome 89.

Sugerencias para desarrolladores

Esta es una lista de cosas que me hubiera gustado saber cuando comencé a usar la API de Web NFC:

  • Android controla las etiquetas NFC a nivel del SO antes de que la Web NFC esté operativa.
  • Puedes encontrar un ícono de NFC en material.io.
  • Usa el registro NDEF id para identificar fácilmente un registro cuando sea necesario.
  • Una etiqueta NFC sin formato que admite NDEF contiene un solo registro del tipo vacío.
  • Escribir un registro de aplicación para Android es fácil, como se muestra a continuación.
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] });

Demostraciones

Prueba el ejemplo oficial y mira algunas demostraciones interesantes de la API de Web NFC:

Demostración de tarjetas NFC web en Chrome Dev Summit 2019

Comentarios

Al Grupo de la comunidad de Web NFC y al equipo de Chrome les encantaría conocer tus opiniones y experiencias con Web NFC.

Cuéntanos sobre el diseño de la API

¿Hay algo en la API que no funciona como se espera? ¿O faltan métodos o propiedades que necesitas para implementar tu idea?

Informa un problema de especificación en el repositorio de GitHub de Web NFC o agrega tus ideas a un problema existente.

Informa un problema con la implementación

¿Encontraste un error en la implementación de Chrome? ¿O la implementación es diferente de las especificaciones?

Informa el error en https://new.crbug.com. Asegúrate de incluir la mayor cantidad de detalles posible, proporcionar instrucciones sencillas para reproducir el error y configurar Components como Blink>NFC.

Mostrar apoyo

¿Planeas usar Web NFC? Tu apoyo público ayuda al equipo de Chrome a priorizar funciones y muestra a otros proveedores de navegadores lo importante que es admitirlas.

Envía un tweet a @ChromiumDev con el hashtag #WebNFC y cuéntanos dónde y cómo lo usas.

Vínculos útiles

Agradecimientos

Muchas gracias a la gente de Intel por implementar la API de Web NFC. Google Chrome depende de una comunidad de confirmadores que trabajan en conjunto para impulsar el proyecto de Chromium. No todos los desarrolladores de Chromium son Googlers, y estos colaboradores merecen un reconocimiento especial.