PWA: Apps instalables desde navegador, sin pasar por una tienda

PWA: O cómo asaltar el móvil del usuario sin pagar peaje en las Stores

Conocen ustedes la escena, porque es vieja como el hambre: navega uno tranquilamente, buscando un dato o un servicio, y de pronto, ¡pum!, el dichoso cartelito de los cojones invitándote a descargar la aplicación oficial. Resultado: el hartazgo. Que si falta espacio en la memoria, que si no recuerdo la contraseña de la Store, que si para un uso de cinco minutos no quiero yo meter a ese troyano en mi casa. Al final, uno maldice entre dientes, cierra la pestaña y se larga con viento fresco a otra parte.

Las PWA (Progressive Web Apps) nacieron, precisamente, para evitar que el personal huya despavorido. En Loopeando.com, que ya nos hemos batido el cobre en mil batallas de código, somos partidarios de las soluciones que funcionan sin dar la murga; así que vamos a ver cómo pergeñar una web con hechuras de aplicación nativa, pero ahorrándose el trago de pasar por el aro de Apple o de Google.

Pasa, disfruta, aprende y comparte.

¿De qué va este invento de las PWA?

Miren ustedes, una PWA no es más que su web de toda la vida, pero con el pecho curtido y bien armada. Cuando un parroquiano entra desde su teléfono, el sitio, con toda la cortesía del mundo, le sugiere: “¿Añadir a la pantalla de inicio?”. Si el tipo acepta, se le planta un icono en el escritorio, codo con codo con WhatsApp o Instagram, como si fuera de la misma alcurnia.

Pero la verdadera chicha, el momento de la verdad, llega al abrirla. Desaparece la baranda de navegación, la interfaz se queda limpia de polvo y paja y, si usted ha hecho sus deberes con la caché, la aplicación sigue dando el callo aunque el usuario esté en mitad de un túnel sin cobertura. No hay instaladores pesados de cien megas; hay una gestión inteligente de los recursos locales para que todo vuele como un proyectil.

La impedimenta técnica: lo necesario

Si quiere que su web dé el salto y se convierta en una PWA de ley, hay tres elementos que deben estar en su sitio, sin falta ni excusa, en el servidor:

• Service Workers: Esos centinelas que corren en la sombra, por debajo de la piel de la web. Son los encargados de interceptar las peticiones y decidir, con pulso firme, qué se saca de la caché y qué se le reclama al servidor. Sin estos tipos, el modo offline es un sueño de borrachos.
• Web App Manifest: Un sucinto archivo JSON donde se le detalla al móvil el nombre del invento, qué iconos debe lucir y de qué color queremos que sea la librea de la barra de estado.
• HTTPS: Innegociable, caballeros. Si no hay certificado SSL, el navegador, por una cuestión de higiene y seguridad, ni se molestará en activar la maquinaria.

Para que se hagan una idea de la simplicidad del asunto, aquí tienen un manifest.json básico:

{ "short_name": "Loopeando", "name": "Loopeando - Tecnología", "icons": [ { "src": "/images/logo-192.png", "type": "image/png", "sizes": "192x192" } ], "start_url": "/?pwa=1", "background_color": "#ffffff", "display": "standalone", "theme_color": "#ff6600" }

¿Merece la pena el esfuerzo?

Dicho queda que sí, especialmente si no tiene usted la bolsa llena como para mantener a dos cuadrillas de programadores (iOS y Android) y, además, el sitio web. Con las PWA se solventa el problema de un plumazo:

• Sin barreras de acceso: El usuario instala la criatura mientras navega, sin esperas, sin rodeos y sin trámites burocráticos en tiendas ajenas.
• SEO de vieja escuela: Al fin y al cabo, sigue siendo una web. Google puede rastrear hasta el último rincón, algo que con las aplicaciones nativas —esas cajas negras— es sencillamente imposible.
• Actualizaciones al minuto: ¿Un bug traicionero? Se corrige el código, se sube al FTP y sanseacabó. El personal tendrá la versión limpia en cuanto abra la app, sin ruegos ni preguntas.

¿Le ha servido esto para despejar las dudas? Si se ve en un brete configurando el Service Worker o el Manifest, deje su recado abajo en los comentarios y le echaremos una mano.