Un nuevo concepto de web ya se está implementando en el desarrollo de webs. Cada vez más y más usuarios acceden al contenido de la web a través de su dispositivo smartphone o tablet y el Progressive Web App es una aplicación ideal que incrementa su funcionalidad según las características del dispositivo en el que se ejecutan. En esencia, se puede definir como página web pero en la práctica y para el usuario final, se adapta al dispositivo desde el que es visualizado.

El avance en el desarrollo de los navegadores web está consiguiendo atravesar las barreras que hasta ahora tenían las webs en dispositivos móviles, smartphones o tablets. Limitaciones como no poder enviar notificaciones push a los usuarios o realizar actualizaciones de los datos en segundo plano sin necesidad de tener la web abierta en el navegador, entre otras muchas.

¿Qué es una Progressive Web App?

Las aplicaciones web progresivas (en inglés PWA acrónimo de Progressive Web App), combinan lo mejor de las webs y lo mejor de las apps nativas. Son confiables, rápidas, atractivas y para todos los usuarios, sin importar cuál sea el navegador usado. Se comunican de manera segura siempre a través del protocolo cifrado HTTPS y se cargan independientemente del estado o calidad de la red, incluida la capacidad de visualización offline a través de service workers.

Como veremos, para definir una Progressive Web App se usa un archivo de manifiesto W3C (manifest.json), una arquitectura app shell, y service workers para ofrecer experiencias de apps nativas en aplicaciones web, como sincronizaciones periódicas en segundo plano, notificaciones push, modo offline, etc.

A diferencia de las apps nativas, las Progressive Web App no necesitan instalarse desde ningún marketplace (tienda de apps), pero desde el navegador se pueden añadir a la página de inicio “Home Screen” de nuestro smartphone o tablet y acceder a ellas a través de un icono, como si de una app nativa se tratase.

MANIFEST

Consiste en un archivo JSON que nos permite definir cómo se mostrará la aplicación web al usuario. Se le puede dar el nombre deseado a este archivo, pero normalmente se utiliza el nombre «manifest.json». De esta manera, será fácil de identificar por los desarrolladores y deducir de qué se trata.

A continuación, vamos a ver un ejemplo básico de un archivo manifest.json:

{
  "short_name": "My PWA",
  "name": "PWA Rebecca Purple",
  "description": "My Awesome PWA by Rebecca Purple",
  "icons": [{
    "src": "launcher-icon-48x48.png",
    "type": "image/png",
    "sizes": "48x48"
  }, {
    "src": "launcher-icon-96x96.png",
    "type": "image/png",
    "sizes": "96x96"
  }, {
    "src": "launcher-icon-192x192.png",
    "type": "image/png",
    "sizes": "192x192"
  }, {
    "src": "launcher-icon-512x512.png",
    "type": "image/png",
    "sizes": "512x512"
  }],
  "start_url": "index.html?homescreen=1",
  "display": "standalone",
  "theme_color": "#663399",
  "background_color": "#ffffff"
}

Una vez tengamos nuestro manifest.json solo nos faltaría referenciarlo en una etiqueta link en el head de nuestras páginas para que el navegador reconozca nuestra web como una Progressive Web App:

<link rel="manifest" href="/manifest.json">

Si deseas más información de cómo configurar tu manifest.json te recomendamos que leas la documentación que nos ofrece Google.

ARQUITECTURA APP SHELL

Se trata de una arquitectura que permite cargar los recursos mínimos (assets, HTML, CSS y JavaScript) independientemente de los recursos del contenido en sí de la página, como por ejemplo, el layout principal, el menú de navegación, incluso dependiendo del diseño el header y el footer, etc. En definitiva, todo lo que tiene en común todas las páginas de nuestra Progressive Web App, ofreciendo una carga progresiva de recursos. Una vez cargardo por primera vez, se guardan en la caché, consiguiendo una carga instantánea en las sucesivas y ofreciendo una experiencia similar a una app nativa.

SERVICE WORKERS

Posiblemente sea la parte más potente de una Progressive Web App con los cuáles se pueden conseguir el comportamiento diferencial con respecto a una web normal.

Se trata de código programado en JavaScript, por lo que es posible acceder al DOM directamente. El navegador es capaz de ejecutar este código en segundo plano a través de promesas (llamadas asincronas que permiten realizar procesos en paralelo con respecto a la ejecución de nuestra Progressive Web App). También permiten gestionar la manera en la cuál se llevan a cabo las solicitudes de red y de nuestra Progressive Web App.

A continuación, te mostramos dos enlaces muy interesantes de cómo funcionan más detalladamente los services workers:

En próximos artículos veremos como crear una PWA en React (también conocido como React.js o ReactJS), una tecnología que nos ofrece en este caso el equipo de desarrollo de Facebook, que consiste en una librería desarrollada en JavaScript y que nos permite crear UI’s para webs en JavaScript basándose en la filosofía de componentes.

¡Hasta la próxima!

¿Prefieres que te echemos un cable?

A veces, ciertas cosas pueden sonar a chino. Estaremos encantados de conocer tu proyecto para darte una solución personalizada.

¡Contáctanos!

¿Te has quedado con ganas de más?

Echa un vistazo a otros posts del blog. ¡Nos esforzamos por crear contenido útil para ti!

¡Ver posts!

    Deja un comentario

    Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *