Un código QR para dos tiendas de apps: una pequeña página de redirección

Por Nesim Razon, desarrollador Android independiente · 2026-11-16

#Notas de desarrollo#Herramientas y calculadoras

Mi web tiene un botón «Instalar con QR» para quienes la visitan desde un ordenador. Antes era sencillo, porque todas las apps eran solo para Android. Luego las apps llegaron también al iPhone y tuve que decidir qué debía mostrar ese botón. Acabé con un único código QR que sirve para las dos tiendas. Así funciona y esto es lo que cuesta.

La pregunta: ¿qué muestra ahora el botón?

Hasta hace poco el código QR contenía la dirección de Google Play de la app, con un parámetro de referencia para que Play Console me dijera cuántas instalaciones venían del QR. Con una versión en la App Store, un solo código parecía insuficiente.

Consideré cuatro opciones: dos códigos QR separados, una imagen con dos códigos lado a lado, pestañas que alternan entre un código de Play y otro de la App Store, o un único código universal. Las tres primeras ponen una elección delante del visitante, y el visitante no sabe cuál es la correcta hasta que ya tiene el teléfono en la mano.

Por qué basta un código

El botón solo se ve en el escritorio. En la hoja de estilos exige un dispositivo tipo ratón (hover y puntero preciso) y una ventana de al menos 900 píxeles de ancho, así que los teléfonos y las tabletas nunca lo ven. Eso significa que quien escanea el código sostiene justo el teléfono que debe instalar la app, y ese teléfono ya sabe a qué tienda pertenece.

Por eso el código no tiene que llevar la elección. Solo necesita llevar una dirección que haga la elección cuando el teléfono la abra.

La página de redirección

El código QR apunta a una dirección corta con la forma /go/<app>/ en mi sitio. Un pequeño script generador escribe esa página para cada app que existe en la App Store. La página hace tres cosas.

Primero, lee el user agent. Si contiene iPhone, iPad o iPod, el visitante está en iOS. Hay una trampa: desde iPadOS 13 un iPad se identifica con un user agent de Mac, así que un user agent de Mac junto con más de un punto táctil también se cuenta como iOS. Un Mac de verdad no tiene pantalla táctil, por lo que no se cuela por error.

Segundo, envía el teléfono a la tienda correcta con location.replace. Elegí replace en lugar de asignar location.href porque no deja la página de redirección en el historial. Si no, el botón Atrás volvería a mi página, que redirigiría de nuevo al instante, y el visitante quedaría atrapado en un bucle.

Tercero, en Android abre la misma dirección de Google Play de antes, con la referencia que marca la visita como procedente de un QR. Así el desglose de origen de las instalaciones en Play Console sigue funcionando y puedo seguir viendo cuántas instalaciones vienen de códigos QR.

Alternativa en escritorio y sin JavaScript

Si la página se abre en un ordenador, o el navegador no tiene JavaScript, no se redirige nada. Entonces la página muestra las dos insignias oficiales de las tiendas, una de Google Play y otra de la App Store, con un enlace a la página de la app en mi sitio. Nadie se encuentra una página en blanco, y quien comparta el enlace corto por error igualmente recibe algo útil.

La página está marcada como noindex. Existe para quien escanea, no para los buscadores, y no quiero un montón de páginas casi idénticas en los resultados de búsqueda.

Un código más pequeño como extra

El código QR ahora contiene una dirección corta en lugar de la larga URL de Play con su referencia. Menos caracteres significa un patrón menos denso con cuadros más grandes, que la cámara de un teléfono lee con más facilidad desde una pantalla, sobre todo la de un portátil en ángulo. El generador usa la biblioteca segno con nivel de corrección de errores M.

Solo donde existe una app para iPhone

No todas las apps tienen versión para iPhone. Un pequeño archivo JSON lista las apps que están en la App Store, y solo ellas reciben una página /go/ y el código universal. Las apps solo para Android conservan un QR directo a Google Play, sin ninguna página intermedia.

Una trampa en la compilación del sitio

La compilación de mi web divide cada página en carpetas por idioma y escribe entradas en el mapa del sitio. Al añadir la nueva carpeta /go/, la compilación la trató como una página normal del sitio y empezó a generar copias traducidas y líneas de mapa del sitio para ella. La solución fue una sola palabra: añadir la carpeta a la lista de directorios que la compilación de idiomas omite, junto a carpetas como las imágenes QR y las insignias. Un auxiliar de redirección no debería estar en el mapa del sitio.

Cómo lo probé y los inconvenientes

Abrí la dirección corta en un teléfono Android y se abrió la ficha de Play. El escaneo con la cámara de un iPhone también se confirmó, así que los dos teléfonos se han comprobado una vez a mano. Es una prueba pequeña, no un laboratorio de dispositivos.

Los inconvenientes son los honestos. La elección automática necesita JavaScript; sin él, el visitante tiene que tocar una insignia. Y una página intermedia es un salto más: un breve destello de mi página antes de que se abra la tienda y una cosa más que podría fallar, aunque es un único archivo estático.