Progressive Web Apps (PWA): Qué son y cómo funcionan

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.

TAMBIÉN PUEDE INTERESARTE:  Checklist SEO para Webmasters y Programadores

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 plano cualquier 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.

elementos-pwa

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
TAMBIÉN PUEDE INTERESARTE:  Webinar: cómo usar Wikipedia para análisis SEO

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.

TAMBIÉN PUEDE INTERESARTE:  Keyword Research: cómo encontrar las mejores palabras clave

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.

A través del botón que te mostrará el navegador

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í:

promp-pwa

 

A través del menú del navegador

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’.

anadir-a-escritorio-pwa

 

Navegadores compatibles

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í.

compatibilidad-navegadores-pwa

 

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.

Estos artículos también pueden interesarte
¿Qué es una landing page? Una landing page, también conocida como página de destino o aterrizaje, es una página web, a la cual accedemos a través de un enlace, diseñada para ay...
Búsquedas de Voz y SEO ¿Qué es la búsqueda por voz? ¿Como afecta al SEO las búsquedas por voz? ¿Estamos optimizando realmente para la búsqueda por voz? Estás y otras pregun...
¿Cómo optimizar el WPO para WordPress? Hoy vamos a hablar de cómo mejorar el WPO para nuestro sitio wordpress. Pero… ¿qué es el WPO? WPO responde a las siglas Web Performance Optimitation, ...
Carlos Ortega (@carlos_darko)
carlos.ortega@digitalgrowth.io

SEO, Desarrollador Web y Community Manager. Enamorado de Internet, me encanta picotear aquí y allá para conocer poco a poco todas las caras que pueda de este inmenso diamante virtual.

Sin comentarios

Escribe un comentario

Uso de cookies

Este sitio web utiliza cookies, tanto propias como de terceros, para recopilar información estadística sobre su navegación y mostrarle publicidad relacionada con sus preferencias, generada a partir de sus pautas de navegación. Si continúa navegando, consideramos que acepta su uso. Más información aquí

ACEPTAR
Aviso de cookies