Lovable + NFC
Safari no da a los sitios web ningún acceso a NFC, y Web NFC solo existe en Chrome para Android. Envuelta con WebViewGold, tu app de Lovable inicia un escaneo NFC nativo con un solo enlace y recibe el contenido de la etiqueta en una función de JavaScript: en Android mediante la API NFC documentada, en iPhone mediante el plugin NFC de WebViewGold. Los check-ins, las etiquetas de equipos y las tarjetas de contacto que se guardan con un toque se reducen a unas pocas líneas de código.
Desde $109 de pago único por plataforma, o deja que nuestro equipo lo haga todo desde $698.
Una etiqueta en la entrada, en un escritorio o en el aula guarda un token. El usuario acerca el teléfono, readnfc:// entrega el token a tu app web y tu backend registra la visita para el usuario con sesión iniciada. Funciona en un local a oscuras y sin tener que apuntar la cámara a nada.
Pega una etiqueta en una máquina, una bicicleta de alquiler o una caja del almacén y programa su ID una sola vez con writenfc://?value=…. Más tarde, el personal la toca con el teléfono y abre el registro correcto: historial de mantenimiento, estado del alquiler, recuento de inventario.
Escribe una vCard en una tarjeta o una pegatina (prefijo VCARD_, propiedades separadas por guiones bajos) y otros teléfonos podrán guardar el contacto con un toque. Útil para apps de eventos, networking e inmobiliarias.
Una etiqueta que contiene un simple enlace https a tu dominio (programada con cualquier grabador NFC) la lee el propio teléfono en los iPhone recientes y en la mayoría de los Android. Con Universal Links y App Links configurados, ese enlace abre la app directamente.
Pega esto en Lovable para implementar la parte de la web app. Revisa el resultado, publica y luego prueba dentro de la app WebViewGold.
Añade check-in NFC con un toque para el envoltorio de app WebViewGold que rodea esta app. 1) Crea las tablas de Supabase nfc_tags (id, token unique, location_name, active) y checkins (id, user_id, tag_id, created_at) con row-level security para que los usuarios solo puedan insertar y leer sus propios check-ins. 2) Crea una edge function validate-checkin que reciba un token, busque una etiqueta activa, rechace un segundo check-in del mismo usuario en un plazo de 10 minutos e inserte el check-in. 3) Añade una página Check-in con un botón grande "Acerca tu teléfono a la etiqueta" que navegue a readnfc:// solo cuando navigator.userAgent contenga WebViewGold (el token de user agent personalizado que configuro en la app); en un navegador normal, muestra en su lugar un campo de código que llame a la misma edge function. 4) En un useEffect de esa página, asigna window.readNFCResult = (data, id, tag) => ... que envíe data a validate-checkin y muestre un toast de éxito o de error; id y tag solo llegan en iOS. Elimina la función al desmontar. 5) Añade una página Programar etiquetas, solo para administradores, que genere un token aleatorio de letras y dígitos, lo guarde en nfc_tags y navegue a writenfc://?value=TOKEN para que se escriba en la siguiente etiqueta que se acerque al teléfono.
¡Estoy muy feliz de haber comprado esta aplicación! Documentación extremadamente fácil y excelente. Estaba en contacto con el servicio al cliente, respondieron muy rápido y de forma muy amigable. Resolvieron mi pregunta en un día. 10/10 lo recomendaría".
Una tarde, casi toda dedicada a probar con etiquetas reales.
Las pegatinas y tarjetas NTAG213, NTAG215 o NTAG216 funcionan con iPhone y con teléfonos Android y almacenan de 144 a 888 bytes: suficiente para un token o una URL corta, no para archivos. Pide algunas de más para las pruebas.
Android: la API de lectura y escritura se describe en la documentación de Android. iOS: NFC es un plugin de WebViewGold que queda fuera del alcance general de funciones; solicítalo (consulta gratuita, presupuesto sin compromiso) e introduce el token que recibas en NFCEnabled en Config.swift. Apple exige además la capability de lectura de etiquetas NFC y una descripción de uso que nombre tu caso concreto.
Cuando el usuario toque "Acerca tu teléfono a la etiqueta", navega a readnfc://, pero solo dentro de la app (comprueba el user agent personalizado que configuraste en WebViewGold). En iPhone, iOS muestra su propia hoja de escaneo mientras la sesión escucha.
Define una función global readNFCResult. iOS la llama con (data, id, tag): contenido, identificador y tipo de la etiqueta. Android la llama con (data). Basa tu lógica en data para que se comporte igual en ambas plataformas.
Envía el valor a tu backend junto con la sesión del usuario y decide allí si el check-in cuenta. Las etiquetas se pueden copiar, así que rota los tokens o añade ventanas de tiempo para todo lo que tenga valor.
Navega a writenfc://?value=…: la app entra en modo escritura y guarda el valor en la siguiente etiqueta que se acerque al teléfono. Mantén los valores cortos y seguros para URL (letras, dígitos, guiones) y codifica los espacios como %20.
Pega esto en tu app de Lovable o pide al agente que escriba el equivalente en tu framework. /api/checkin representa tu propia ruta de check-in; en tu proyecto de Lovable, eso corresponde a: Supabase o Lovable Cloud (Postgres, almacenamiento, edge functions). El token del user agent es el que configuras en WebViewGold.
var IN_APP = navigator.userAgent.indexOf("WebViewGold") !== -1; // tu token de user agent personalizado
function scanTag() {
if (!IN_APP) { showMessage("El check-in con un toque funciona en nuestra app móvil. Introduce el código en su lugar."); return; }
window.location.href = "readnfc://";
}
// WebViewGold la llama después de leer una etiqueta.
// iOS pasa (data, id, tag), Android pasa (data).
window.readNFCResult = function (data, id, tag) {
fetch("/api/checkin", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({ token: data, tagId: id || null })
})
.then(function (r) { return r.json(); })
.then(function (res) { showMessage(res.ok ? "Check-in registrado" : "No reconocemos esta etiqueta"); });
};
// Admin: escribe un token (o una cadena VCARD_) en la siguiente etiqueta
function writeTag(value) {
if (!IN_APP) { return; }
window.location.href = "writenfc://?value=" + value.replace(/ /g, "%20");
}
// writeTag("VCARD_FN:Jane Doe_TEL;TYPE=CELL:5551234567");En Safari no: iOS no da a los sitios web acceso a NFC. Dentro de una app WebViewGold funciona a través del plugin NFC nativo en el iPhone 7 y posteriores. El usuario inicia cada escaneo, e iOS muestra su propia hoja de escaneo mientras escucha.
En Android, la API de lectura y escritura forma parte de la documentación. En iOS, NFC es un plugin fuera del alcance general de funciones: el equipo de WebViewGold lo activa para cada app con un token tras una consulta gratuita y un presupuesto sin compromiso. Las necesidades ampliadas, como tipos de etiqueta especiales, son trabajo a medida en ambas plataformas.
Los códigos QR no cuestan nada, funcionan en cualquier teléfono con cámara y los revisores los prueban fácilmente. NFC es más rápido, funciona a oscuras y da una sensación premium, pero necesita etiquetas y hardware NFC. Muchas apps ofrecen ambos: NFC como vía rápida y un código QR o un código escrito como alternativa.
En iOS, el callback recibe además el identificador y el tipo de la etiqueta. El callback de Android documentado hoy solo devuelve los datos almacenados, así que, para una lógica que deba funcionar en ambas plataformas, escribe tu propio ID o token en la etiqueta.
Normalmente no puede, porque no tiene tu etiqueta. Describe la función en las notas de revisión, proporciona un código demo o un código QR que ejecute el mismo flujo y enlaza una breve grabación de pantalla de un toque real.
El mismo resultado, con distinta cantidad de trabajo por tu parte. Las tres incluyen la garantía de aprobación y soporte humano 24/7.
$109 por plataforma, pago único
La licencia de WebViewGold: un proyecto de Xcode o Android Studio listo para usar. Pega tu URL, define nombre e icono, activa funciones, compila y envía. Actualizaciones gratuitas para siempre.
Ver planes en la página principal$349 por licencia, complemento de pago único
Sin Mac, sin Xcode, sin Android Studio: configura en el navegador, compilamos ambas apps en la nube y las entregamos a App Store Connect y a Play Console.
Cómo funciona el Cloud Builder Prueba la demo gratuita$698 por plataforma $798
Envíanos tu URL y tu icono. Nuestro equipo configura, compila y entrega tu app en 72 horas, en marca blanca y con los proyectos fuente. Ambas plataformas por $1,158.
Detalles del Full Service Con tecnología de
Precios de la Oferta de invierno válidos hasta el 31 de diciembre de 2026.
Garantía de aprobación en App Store & Google Play – o te devolvemos el dinero en 14 días
¿Prefieres delegarlo? Full Service: configuramos, compilamos y entregamos en 72 horas, desde $698 por plataforma. ¿Preguntas? Chatea con nosotros 24/7.
Los reembolsos se conceden bajo las condiciones indicadas en nuestras FAQ: un rechazo por motivos ajenos al contenido por parte de Apple y/o Google, reclamado dentro de los 14 días posteriores a la compra.