Índice de contenido
En un mundo en el que ya prácticamente la totalidad de la población con acceso a Internet navega mayoritariamente desde sus smartphones, donde Google ha pasado a priorizar las versiones mobile a la hora de posicionar nuestras webs, y en el que demasiados segundos de carga o la falta de conexión pueden hacernos perder un potencial usuario/cliente… aparecen las Progressive Web Apps. Un nuevo formato de página web que muta, absorbiendo la mayoría de las principales ventajas de las apps, reinas absolutas del mundo móvil hasta ahora, para hacerlas suyas y ofrecer una experiencia igual de nativa y satisfactoria para el usuario.
QUÉ ES UNA PROGRESSIVE WEB APP
Las Progressive Web Apps, más cariñosamente conocidas como PWA’s, son sitios que combinan lo mejor de las webs y lo mejor de las apps. Más adelante veremos las ventajas que supone a la hora de navegar por ella. Pero sobretodo, para Google, una PWA debe siempre poder ser descrita con estas tres características fundamentales.
FIABLE
Una Progressive Web App debe ser accesible, total o parcialmente, aún y sin conexión. El usuario nunca tiene que ver a nuestro querido y odiado downasaur. Es sin duda una de las principales ventajas de este tipo de web.
Nuestro querido Downosaur se encamina a una nueva extinción…
RÁPIDA
Debe ser rápida, cargar casi al instante, dando una gran sensación de inmediatez. Además una PWA responde rápido y con suavidad a cualquier interacción por parte de usuario: un click en un enlace, en un botón, un scroll…
CAUTIVADORA
También tiene que sentirse nativa, tener lo que se llama el ‘look & feel’ de una app. Hemos de sentir al navegar por ella que es algo desarrollado desde un principio para mobile, sin elementos que nos saquen de esta inmersión como barras de navegador, cursores, webs cortadas por un lado o letras demasiado pequeñas.
VENTAJAS DE LAS PROGRESSIVE WEB APPS
Antes decíamos que una PWA coge conceptos y características de las apps, lo que le da algunos ‘superpoderes’ que hasta ahora no eran posibles en una web mobile.
INSTALABLE
Podremos instalar la web en nuestro smartphone, añadiendo su icono y nombre en el escritorio como si se tratara de una app más. Esto mejorará tanto la visibilidad como la inmediatez de acceso en futuras visitas. Además al tratarse realmente de una web, no necesita ocupar espacio en el propio dispositivo y se instalará casi al instante.
SE ACTUALIZA AUTOMÁTICAMENTE
Tampoco será necesario estar pendiente de futuras actualizaciones para descargarlas. La propia PWA se encargará de ver qué versión tienes y de actualizar automáticamente y en un segundo planocualquier nuevo elemento o modificación que haya podido haber.
ACCESIBLE SIN CONEXIÓN
Gracias a las funciones de pre-cacheo de las Progressive Web App, la navegación es siempre posible (y rápida) independientemente de la calidad de conexión en ese momento. Se acabó el quedarnos sin poder usar la web al entrar en un túnel o caerse Internet.
NOTIFICACIONES PUSH
Una de las funciones más llamativas y claramente heredada de las apps, la posibilidad de mandar notificaciones Push al smartphone aún y cuando estos no tienen la PWA abierta. Es una manera de poder atraer la atención del usuario para que vuelva a navegar por nuestra web.
NATIVA
Como ya hemos comentado, al disponer de icono en el escritorio, cargar con un splashscreen, mostrarse a pantalla completa y sin ningún tipo de elemento de navegador… todo esto da una sensación de app enorme, de ser algo desarrollado nativamente para mobile.
ENLAZABLE
Otra ventaja frente a las apps ya que, al tratarse de una web, todas las URL’s son perfectamente enlazables y fáciles de compartir.
Sensación al utilizar una PWA
ELEMENTOS PRINCIPALES
Vale, ahora ya sabemos qué funciones principales tiene una Progressive Web App pero ¿cómo es posible que haga esas cosas? Bueno, vamos a ver los diferentes actores que encontramos en cualquier PWA. Algunos imprescindibles y otros más optativos.
APPLICATION MANIFEST
Imprescidible. El Application Manifest es un archivo en formato .json en el que definiremos muchas de las características de aspecto visual y de usabilidad de la PWA. Por ejemplo, podremos especificar cosas como:
- El nombre de la PWA
- El icono que se mostrará cuando sea instalada
- La página de inicio una vez hagamos clic en el icono
- El color principal
- Si preferimos que sea visualizada en vertical u horizontal
- Si queremos que se vean más o menos elementos del navegador al navegar por ella
- Una breve descripción sobre qué trata la web
- El idioma principal
Este archivo se llamará generalmente manifest.json (aunque puedes ponerle otro nombre) y deberá estar alojado en la raíz del dominio si lo que queremos es que toda la web sea una Progressive Web App. Si por el contrario sólo queremos que una parte de la página sea PWA, el App Manifest debería alojarse en la raíz del directorio escogido.
SERVICE WORKER
Imprescindible. El gran motor de las PWA y motivo principal de la mayoría de sus características. Un Service Worker es un JavaScript peculiar, ya que no actúa únicamente en una URL, sino en toda la web. Una vez entramos en la Progressive Web App, se registra y activa, quedando activo entre el usuario y el servidor siempre en segundo plano, incluso aunque cerremos la web.
Al estar siempre activo, reacciona a los diferentes eventos que le llegan tanto del servidor como del usuario. Estos eventos pueden ser principalmente de tres tipos.
- Fetch: Peticiones del usuario para descargar elementos del servidor.
- Push: Peticiones del servidor para enviar notificaciones al usuario.
- Sync: Sincronización de datos.
Según reciba peticiones de uno u otro evento, irá activando diferentes funciones: cacheo, sincronización en segundo plano, notificaciones push, entrega de la versión cacheada de la web si el usuario no tiene conexión en el momento que hace las peticiones…
Importante tener en cuenta que, debido a que los Service Worker capturan mucha y muy comprometida información de esta comunicación entre el navegador y el servidor, la navegación en una Progressive Web App debe ser siempre bajo HTTPS. Necesitamos una navegación cifrada y segura para evitar problemas.
DISEÑO RESPONSIVE
Imprescindible. Hoy en día parece ya algo de cajón, pero una web tiene que poder visualizarse correctamente en cualquier tipo de dispositivo, sea cual sea sus medidas y resolución. Por tanto, el diseño responsive es básico, más si tenemos en cuenta la naturaleza mobile de una PWA.
Se ha hablado mucho y muy bien de cómo y por qué de este tema, con lo que no diremos mucho más aquí.
API DE GEOLOCALIZACIÓN
API necesaria si queremos poder pedir acceso a la geolocalización del usuario. También para esto necesitaremos tener una web segura en HTTPS.
API MEDIA
Por último, con esta otra API tendríamos acceso a las funciones nativas del dispositivo como pueden ser la cámara o el micrófono.
¿CÓMO INSTALAR UNA PWA EN EL MÓVIL?
Para instalar en la pantalla de nuestro smartphone una Progressive Web App, los usuarios tendrán dos formas de hacerlo.
La manera más directa y que facilitará que tus usuarios se instalen la web, aunque para que el navegador muestre este faldón o ‘prompt’ de instalación, la PWA tendrá que cumplir unos mínimos:
- Un manifest.json con al menos el nombre, nombre corto, página de inicio e icono de 192×192.
- Un service worker registrado en la web.
- Navegación segura a través de HTTPS.
- Recibir al menos dos visitas con un mínimo de 5 minutos de espacio entre ellas.
Si cumplimos estos requisitos veremos algo así:
Si en cambio no cumplimos esos mínimos o el usuario no acepto instalar la PWA cuando el navegador le mostró el aviso, la opción que nos queda es hacerlo desde el propio menú del navegador. Dando al icono de los tres puntitos y después a ‘Añadir a pantalla de inicio’.
En la siguiente imagen puedes ver la lista de compatibilidad de los diferentes navegadores con los Service Workers, aunque si necesitas más información sobre funciones específicas puedas mirar aquí.
CONCLUSIONES Y EJEMPLOS
En resumidas cuentas, las PWA’s parecen haber llegado para quedarse, ya que parecen un paso muy lógico a la hora de seguir evolucionando las webs hacia el mundo mobile. En 2014 fue el gran momento de adaptarse, parece que 2018 será el de mimetizarse casi completamente gracias a las Progressive Web Apps y las mejoras que imaginamos irán añadiéndose a lo largo de los próximos meses. Estaremos atentos para contároslo todo.
Si queréis ver ejemplos de páginas que ya se han pasado a PWA, podéis ver un buen puñado de ellos en la web de pwa.rocks.
Consultor SEO desde 2014, a lo largo de mi carrera he liderado el SEO de grandes webs tanto a nivel agencia como inhouse y actualmente freelance.
Divulgador y ponente, también colaboro desde hace años como profesor en varios máster SEO, así como en masterclasses y cursos para diferentes plataformas.