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 Web NFC?

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

NFC web proporciona a los sitios la capacidad de leer y escribir en etiquetas NFC cuando están cerca del dispositivo del usuario (por lo general, de 5 a 10 cm, de 2 a 4 pulgadas). El alcance actual se limita al formato de intercambio de datos NFC (NDEF), un formato liviano. formato de mensaje binario que funciona en diferentes formatos de etiquetas.

Un teléfono activa una etiqueta NFC para intercambiar datos
Diagrama de una operación de NFC

Casos de uso sugeridos

Web NFC se limita a NDEF porque las propiedades de seguridad de lectura y la escritura de datos NDEF son más fáciles de cuantificar. Operaciones de E/S de bajo nivel (p.ej., ISO-DEP, NFC-A/B, NFC-F), modo de comunicación entre pares y tarjeta basada en host No se admite la emulación (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 exhibición Cuando el usuario toca con su dispositivo una tarjeta NFC cerca de la exposición.
  • Los sitios de administración de inventario pueden leer o escribir datos en la etiqueta NFC en un para actualizar la información sobre su contenido.
  • Los sitios de conferencias pueden usarlo para escanear insignias NFC durante el evento y asegurarse de que para evitar que se realicen más cambios en la información que se escribe en ellos.
  • Los sitios pueden usarlo para compartir los secretos iniciales necesarios para el dispositivo o el servicio de un sistema operativo, y también implementar datos de configuración en operaciones .
Escaneo de varias etiquetas NFC en el teléfono
Ilustración de la administración de inventario NFC
.

Estado actual

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

Usar NFC web

Detección de funciones

La detección de funciones en hardware es diferente de la que es probable que estés acostumbrado. La presencia de NDEFReader indica que el navegador es compatible con NFC web, pero si el hardware requerido está presente. En particular, si el hardware es si falta, se rechazará la promesa que devuelven ciertas llamadas. Te daré detalles cuando describo NDEFReader.

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

Terminología

Una etiqueta NFC es un dispositivo NFC pasivo, lo que significa que funciona con tecnología magnética. inducción cuando hay un dispositivo NFC activo (como un teléfono) cerca. Etiquetas NFC vienen en muchas formas y modas, como calcomanías, tarjetas de crédito, muñecas y más.

Foto de una etiqueta NFC transparente
Una etiqueta NFC transparente

El objeto NDEFReader es el punto de entrada en Web NFC que expone la funcionalidad. para preparar acciones de lectura o escritura que se completan cuando una etiqueta NDEF se acerca. El NDEF en NDEFReader significa intercambio de datos de NFC Es un formato ligero de mensaje binario y estandarizado por el Foro de NFC.

El objeto NDEFReader sirve para actuar sobre los mensajes NDEF entrantes de las etiquetas NFC. y para escribir mensajes NDEF en etiquetas NFC dentro del rango.

Una etiqueta NFC que admite NDEF es como una nota adhesiva. Cualquier persona puede leerlo a menos que sea de solo lectura, cualquiera puede escribir allí. Contiene un solo NDEF que encapsula uno o más registros NDEF. Cada registro NDEF es un 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 del foro de NFC: vacío, texto, URL, póster inteligente, tipo de MIME, URL absoluta, tipo externo, desconocido y local el tipo de letra.

Diagrama de un mensaje NDEF
Diagrama de un mensaje NDEF

Escanear etiquetas NFC

Para escanear etiquetas NFC, primero crea una instancia de un nuevo objeto NDEFReader. Llamando a scan() devuelve una promesa. Es posible que se le solicite al usuario si el acceso no se había autorizado anteriormente. otorgada. La promesa se resolverá si se cumplen todas las siguientes condiciones:

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

Una vez que se resuelve la promesa, los mensajes NDEF entrantes estarán disponibles suscripción a eventos reading a través de un objeto de escucha de eventos También deberías suscribirte a eventos de readingerror para recibir notificaciones cuando haya etiquetas NFC incompatibles proximidad.

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 hay una etiqueta NFC cerca, se activa un evento NDEFReadingEvent. Integra 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 ninguna disponible.
  • message representa el mensaje NDEF almacenado en la etiqueta NFC.

Para leer el contenido del mensaje NDEF, realiza un bucle a lo largo de message.records y procesar a sus miembros de data de forma adecuada en función de su recordType El miembro data se expone como un DataView, ya que permite controlar. 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 nuevo objeto NDEFReader. Llamando write() muestra una promesa. Es posible que se le solicite al usuario si no se otorgó el acceso. otorgadas anteriormente. En este punto, un mensaje NDEF está "preparado" y promete se resolverá si se cumplen todas las siguientes condiciones:

  • Solo se llamó en respuesta a un gesto del usuario, como un gesto táctil o hacer clic con el mouse.
  • El usuario permitió que el sitio web interactúe con dispositivos NFC.
  • El teléfono del usuario es compatible con NFC.
  • El usuario habilitó 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 valor NDEF. mensaje 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, una URL. registro definido como un objeto con una clave recordType establecida en "url" y un data configurada 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 debe sobrescribirse, establece la propiedad overwrite a false en las opciones que se pasan a write() . En ese caso, la promesa que se devuelve se rechazará si se rechaza un mensaje NDEF. ya se almacenó 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}.`);
});

Hacer que las etiquetas NFC sean de solo lectura

Para evitar que usuarios maliciosos reemplacen el contenido de una etiqueta NFC, es posible hacer que las etiquetas NFC sean permanentemente de solo lectura. Esta operación es un proceso unidireccional y no se puede revertir. Una vez que una etiqueta NFC se establece en solo lectura, no se puede escribir a los usuarios.

Para que las etiquetas NFC sean de solo lectura, primero crea una instancia de un nuevo objeto NDEFReader. Llamando makeReadOnly() muestra una promesa. Es posible que se le solicite al usuario si no se otorgó el acceso. otorgadas anteriormente. La promesa se resolverá si se cumplen todas las siguientes condiciones se cumplen:

  • Solo se llamó en respuesta a un gesto del usuario, como un gesto táctil o hacer clic con el mouse.
  • El usuario permitió que el sitio web interactúe con dispositivos NFC.
  • El teléfono del usuario es compatible con NFC.
  • El usuario habilitó NFC en su teléfono.
  • El usuario presionó una etiqueta NFC y esta se estableció 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}`);
});

A continuación, se explica cómo hacer 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 para Android en Chrome 100 o versiones posteriores, verifica lo siguiente: 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ó Web NFC usando los principios básicos se define en Controlar el acceso a una plataforma web potente Funciones, como control del usuario, transparencia y ergonomía

Debido a que NFC expande el dominio de la información potencialmente disponible para aplicaciones maliciosas sitios web, la disponibilidad de NFC se restringe para maximizar reconocimiento y control del uso de NFC.

Captura de pantalla de un mensaje de NFC web en un sitio web
Mensaje del usuario de NFC web

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

  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 una solicitud de permiso iniciada por el usuario y elementos físicos el movimiento de colocar el dispositivo sobre una etiqueta NFC de destino refleja el selector patrón que se encuentra en el otro archivo y las APIs de acceso a dispositivos.

Para realizar un escaneo o escribir, la página web debe estar visible cuando el usuario toca una etiqueta NFC con su dispositivo. El navegador usa la respuesta táctil para indicar presiona. El acceso a la radio NFC se bloquea si la pantalla está apagada o el dispositivo está bloqueado. En el caso de las páginas web no visibles, se recomienda recibir y enviar contenido NFC se suspende y se reanuda cuando una página web vuelve a estar visible.

Gracias a la API de visibilidad de páginas, es posible hacer un seguimiento de cuándo se documentan cambios en la visibilidad.

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, te mostramos algunas muestras de código para comenzar.

Verifica el permiso

La API de Permissions permite verificar si el permiso "nfc" se otorgada. Este ejemplo muestra cómo escanear etiquetas NFC sin la interacción del usuario si se le haya otorgado acceso previamente o, de lo contrario, mostrará un botón. Ten en cuenta que los mismos funciona para escribir etiquetas NFC, ya que usa el mismo permiso bajo la de un vehículo.

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

Anular operaciones de NFC

El uso de la primitiva AbortController facilita la anulación de NFC las operaciones. En el siguiente ejemplo, se muestra cómo pasar el signal de un AbortController a través de las opciones de NDEFReader scan(), makeReadOnly(), write() y anulan 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();
};

Leer luego de la escritura

Usa write() y, luego, scan() con AbortController. permite leer una etiqueta NFC después de escribirle un mensaje. El siguiente ejemplo muestra cómo escribir un mensaje de texto a una etiqueta NFC y leerlo el nuevo mensaje en la etiqueta NFC. Dejará de buscar luego 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.

Lee y escribe un registro de texto

El registro de texto data se puede decodificar con una instancia de TextDecoder que tiene el registro encoding. Ten en cuenta que el idioma del registro de texto es 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 asumen el idioma actual del documento, pero se pueden especificar ambas propiedades (encoding y lang) 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] });

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 a NDEFReader write(). El registro de URL contenido en el mensaje NDEF se define como un un objeto con una clave recordType establecida en "url" y una clave data establecida en la URL una cadena vacía.

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

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

Leer y escribir un registro de tipo MIME

La propiedad mediaType de un registro de tipo MIME representa el tipo de MIME del Carga útil del registro NDEF para que data se pueda decodificar de forma correcta. 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 a NDEFReader write(). El registro de tipo MIME incluido 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 configurada para un objeto que puede ser un objeto ArrayBuffer o proporcionar una vista de un objeto ArrayBuffer (p.ej., Uint8Array y 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] });

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 NDEFReader write(). El registro de URL absoluta contenido en el archivo NDEF El mensaje 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] });

Leer y escribir un registro de póster inteligente

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

Los registros de tipo local son únicos solo dentro del contexto local de la registro NDEF. Úsalas cuando el significado de los tipos no importa fuera de del contexto local del registro contenedor y cuando el uso del almacenamiento es “compute.vmExternalIpAccess”. Los nombres de registros de tipos locales siempre comienzan con : en Web NFC (p.ej., ":t", ":s" y ":act"). Esto permite diferenciar un registro de texto de un registro escribir registro de texto, 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 póster inteligente, pasa un mensaje NDEF al write() de NDEFReader . El registro de póster inteligente contenido en el mensaje NDEF se define como un 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 contenido en el Smart poster.

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

Leer y escribir un registro de tipo externo

Para crear registros definidos por la aplicación, usa registros de tipos externos. Pueden contienen un mensaje NDEF como carga útil a la que se puede acceder con toRecords(). Su name contiene el nombre de dominio de la organización emisora, dos puntos y un tipo nombre que tenga al menos un carácter, 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 NDEFReader write(). El registro de tipo externo contenido en el archivo NDEF mensaje se define como un objeto con una clave recordType establecida en el nombre del tipo externo y una clave data configurada en un objeto que representa un mensaje NDEF contenidos en el registro de tipo externo. Ten en cuenta que la clave data también se puede un objeto ArrayBuffer o proporciona una vista de un elemento ArrayBuffer (p.ej., Uint8Array y 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] });

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 NDEFReader write(). El registro vacío contenido en el mensaje NDEF se define como un objeto con una clave recordType configurada 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 las cosas que me hubiese gustado saber cuando empecé a jugar con Web NFC:

  • Android controla las etiquetas NFC a nivel del SO antes de que esté operativo la NFC web.
  • Puedes encontrar un ícono de NFC en material.io.
  • Usa el registro NDEF id para identificar con facilidad un registro cuando sea necesario.
  • Una etiqueta NFC sin formato que admite NDEF contiene un único registro de tipo vacío.
  • Escribir un registro de aplicación para Android es sencillo, 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

Consulta el ejemplo oficial y algunas demostraciones geniales de NFC web:

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

Comentarios

El Grupo de la Comunidad de NFC Web y la Al equipo de Chrome le gustaría conocer tus opiniones y experiencias con Web NFC.

Cuéntanos sobre el diseño de la API

¿Existe algún aspecto de la API que no funcione según lo esperado? ¿O hay o propiedades faltantes que necesites para implementar tu idea?

Presenta un problema de especificaciones en el repositorio web de NFC en GitHub o agrega lo que piensas en un problema existente.

Informar un problema con la implementación

¿Encontraste un error en la implementación de Chrome? ¿O la implementación diferente de la especificación?

Informa un error en https://new.crbug.com. Asegúrate de incluir tantos detalles como puedas, proporcionar instrucciones sencillas para reproducir el error y contar con Componentes establecidos en Blink>NFC. Glitch funciona muy bien para para compartir repros rápidos y fáciles.

Demostrar apoyo

¿Planeas usar NFC web? Tu asistencia pública ayuda al equipo de Chrome prioriza funciones y muestra a otros proveedores de navegadores la importancia de respaldarlos.

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

Vínculos útiles

Agradecimientos

Muchas gracias a los miembros de Intel por implementar Web NFC. Google Chrome depende de una comunidad de confirmadores que trabajan juntos para trasladar Chromium. el proyecto. No todos los confirmadores de Chromium son empleados de Google, y estos los colaboradores merecen un reconocimiento especial.