Web NFC: Leer y Escribir Etiquetas Directamente Desde Chrome

Respuesta rápida

Chrome para Android puede leer y escribir etiquetas NFC directamente desde una página web, usando la interfaz NDEFReader de la API Web NFC — sin instalar ninguna app. La limitación está en el alcance: esto solo funciona en Chrome sobre Android, solo con etiquetas en formato NDEF, y se queda bastante corto frente a lo que puede hacer una app dedicada. No existe Web NFC en Chrome de escritorio, y tampoco en Safari en iOS — consulta qué puede hacer realmente cada plataforma con NFC si estás decidiendo entre iOS y Android para un proyecto.

Paso a paso

Leer una etiqueta con NDEFReader

Creas un lector, llamas a scan(), y escuchas el evento reading:

const ndef = new NDEFReader();
ndef.scan().then(() => {
  ndef.onreading = (event) => {
    for (const record of event.message.records) {
      console.log("Record type:", record.recordType);
    }
  };
});

scan() activa el aviso de permiso "nfc" de Chrome la primera vez que una página lo llama, y debe invocarse en respuesta a un toque o clic real, no al cargar la página. Una vez concedido, cada etiqueta en rango dispara un evento reading con su número de serie y sus registros NDEF — texto, URL, smart poster, tipo MIME, y algunos otros tipos estándar. Detecta la función con 'NDEFReader' in window primero, y maneja readingerror para las etiquetas que no responden.

Escribir una etiqueta con seguridad

Escribir usa la misma interfaz, pero el patrón documentado es escanear-y-luego-escribir, no escribir a ciegas: llama a scan(), espera un evento reading para confirmar qué etiqueta está realmente presente, y solo entonces llama a write(). Eso evita sobrescribir una etiqueta que no querías tocar.

const ndef = new NDEFReader();
await ndef.scan();
await ndef.write({ records: [{ recordType: "url", data: "https://example.com" }] });

write() acepta una opción overwrite para evitar sobrescribir una etiqueta que ya tiene contenido, y desde Chrome 100, makeReadOnly() bloquea permanentemente una etiqueta contra cualquier escritura futura. Ese bloqueo no se puede deshacer — trátalo como una puerta de un solo sentido.

Dónde el modelo de seguridad se pone estricto

Web NFC solo funciona en un contexto seguro (HTTPS) y solo en un frame de primer nivel — un iframe incrustado no puede usarlo. Cada llamada a scan(), write() o makeReadOnly() tiene que originarse en un gesto del usuario, y Chrome añade encima una regla de visibilidad en primer plano: el radio NFC se bloquea cuando la pantalla está apagada o bloqueada, y la página tiene que estar visible en el momento en que tocas la etiqueta.

Esa combinación — HTTPS, gesto, solo en primer plano — descarta el escaneo furtivo que podría hacer un servicio en segundo plano. Siempre sabes que una página con Web NFC está leyendo o escribiendo, porque eres tú quien sostiene el teléfono junto a la etiqueta.

Problemas comunes y soluciones

"NDEFReader is undefined". No estás en Chrome para Android — ese es el límite real de la plataforma, no un error. Para iOS, Safari o escritorio, hace falta una app nativa o una app dedicada de lectura/escritura NFC.

El aviso de permiso nunca aparece, o scan() se rechaza de inmediato. Comprueba que la llamada esté conectada a un clic o toque real, no a algo que se ejecuta al cargar la página — Chrome rechaza en silencio las llamadas sin gesto.

La escritura parece completarse pero no cambia nada. O la etiqueta no estaba en NDEF desde el principio, o salió del campo del teléfono a mitad de la escritura. Web NFC solo habla NDEF, sin alternativa para otros formatos.

Cómo hacer esto con NFCore

Todo lo que Web NFC no cubre — comandos ISO-DEP en bruto, comunicación de igual a igual, Host Card Emulation, o poner una contraseña a una etiqueta más allá del bloqueo irreversible de makeReadOnly() — es justo donde una app nativa tiene margen para hacer más. NFCore lee y escribe las mismas etiquetas NDEF en iOS y Android, además de operaciones de más bajo nivel que una pestaña del navegador no alcanza: escritura por lotes, plantillas reutilizables, y un inspector de etiquetas completo para revisar lock bytes y mapa de memoria antes de escribir nada. Si ya te quedaste corto con lo que hace una pestaña del navegador, aquí lo explicamos con más detalle. Descarga NFCore en la App Store o Google Play cuando necesites ese alcance extra.

Preguntas frecuentes

¿Funciona Web NFC en iPhone o en Safari?

No. Web NFC (la API NDEFReader) solo está disponible en Chrome para Android. Safari en iOS no tiene soporte para Web NFC, y no hay señales públicas de que vaya a llegar — el acceso NFC de Apple para terceros pasa por Core NFC de forma nativa, no por el navegador.

¿Necesito instalar algo para usar Web NFC?

No hace falta instalar nada — funciona en Chrome para Android sobre una página HTTPS normal. La contrapartida está en el alcance: obtienes lectura y escritura NDEF y nada de más bajo nivel, y la página tiene que estar abierta y visible cuando tocas la etiqueta.

¿Puede un sitio web leer cualquier etiqueta NFC con Web NFC?

Solo etiquetas en formato NDEF, y solo después de que concedas explícitamente el permiso "nfc" y toques la etiqueta mientras la página está abierta y visible. No hay escaneo en segundo plano ni acceso a formatos que no sean NDEF, como los sectores en bruto de MIFARE Classic.

¿Qué no puede hacer Web NFC que sí puede hacer una app NFC nativa?

No puede enviar comandos ISO-DEP/APDU en bruto, no puede hacer NFC de igual a igual ni Host Card Emulation, y no tiene forma de poner una contraseña a una etiqueta ni restringir el acceso de lectura/escritura — la única opción de protección es makeReadOnly(), que es permanente. Una app nativa como NFCore cubre ese conjunto más completo de comandos tanto en iOS como en Android.

Conclusión

Web NFC es una forma real, sin instalación, de leer y escribir etiquetas NDEF desde una página web — limitada por un modelo de seguridad estricto de primer plano y permisos, y un alcance restringido a NDEF. Para todo lo que queda fuera de eso — otras plataformas, comandos de etiqueta en bruto, o proteger de verdad una etiqueta que has escrito — ahí es donde entra una app dedicada.