fbpx

Introducción progressive web app

Introducción progressive web app

¡Hola Multipliqueros! Hoy vamos a dar comienzo a nuestro nuevo curso…¡Sí! Nos volvemos a poner manos a la obra y esta vez queremos enseñar un paso más sobre el diseño web y hacia dónde estamos evolucionando en el mundo digital. Ya sabéis que no es el primer curso de diseño web que realizamos pero, como no este es diferente. En concreto hablaremos sobre la evolución que están teniendo las nuevas tecnologías y las aplicaciones en el mundo del diseño web. ¡Allá vamos!

Las progressive web app (PWA) son una tecnología para realizar una nueva generación de aplicaciones. Estas aplicaciones incrementan su funcionalidad según la capacidad del dispositivo (progressive) y se construyen utilizando tecnología web como HTML, CSS y Javascript (web). Además, se comportan como aplicaciones nativas (app).

Pero, ¿qué es progressive web app?

Es una tecnología promovida por Google, que utiliza las últimas tecnologías disponibles en los navegadores para ofrecer una experiencia en móviles lo más parecida a la de una aplicación nativa.

Estas aplicaciones usan un conjunto de nuevos estándares para conseguir que un proyecto web funcione como una aplicación. Pero lo mejor de todo para el usuario es que estas aplicaciones disminuyen el tiempo de carga, gracias a su gestión de la caché, llegando a funcionar sin conexión a Internet.

Las características de una  PWA son:

  • Progresiva: Funciona para todos los usuarios.
  • Adaptable: Se adapta a cualquier formato.
  • Independiente: Con este término nos referimos que, si el usuario está conectado a una mala red de Internet o se ha desconectado de Internet, nuestra PWA pueda seguir funcionando.
  • Estilo APP: Al usuario le parece una app.
  • Fresca: Siempre actualiza gracias a service worker.
  • Segura: Funciona con certificados SSL, es decir, la URL empieza por HTTPS.
  • Instalable: el usuario puede conservar la app.
  • Vinculable: se puede compartir fácilmente.

A continuación, veremos un vídeo de una entrevista a Alex Russell desarrollador de esta tecnología:

¿Qué es el Shell de la app?

Cuando hablamos de Shell en una progressive web app, nos estamos refiriendo a toda la parte visual, o de front office de un proyecto, es decir, el HTML, CSS y javascript. Estas aplicaciones se dividen entre el Shell y el contenido. Y éste es la información que se muestra dentro de la web.

La parte de Shell de nuestro proyecto es la que se va a almacenar en caché para darle velocidad de carga a la aplicación y que ésta pueda también funcionar sin conexión a Internet. Esta parte debe tener una carga inicial muy rápida y guardarse automáticamente en la caché del dispositivo, con esto conseguimos mejores velocidades de carga, ya que estos elementos se cargarían desde nuestro dispositivo y no desde la red.

A continuación, veremos un vídeo que compara los distintos tipos de aplicaciones:

Service worker

Los services workers son unos comandos que el navegador ejecuta en un segundo plano. Con esta tecnología podemos incorporar funciones como notificaciones.  Y la función principal es la capacidad de interceptar y manejar solicitudes de red, incluida la gestión de la caché.

Con un service worker permite soportar experiencias sin conexión, así el desarrollador tendrá control total sobre la experiencia.

El service worker usa el lenguaje de programación Javascript, con ello podemos acceder al DOM directamente. Es un proxy de red programable, con esto controlamos la manera en que se llevan adelante las solicitudes de red de nuestro proyecto. Cuando no se está utilizando se apaga y cuando se necesita se reinicia.

Manifest.json

El manifes.json es un archivo en formato JSON, es el único archivo que toda WebExtension debe contener necesariamente. En este archivo especificamos los metadatos como el nombre y versión.

Este archivo permite guardar un acceso a nuestro proyecto en la pantalla de inicio del dispositivo. Tiene un icono y un nombre únicos. Muestra contenido mientras se descargan los recursos o se restauran a partir de la caché. Y tambié, proporciona características predeterminadas de visualización al navegador para evitar una transición brusca.

Para impartir este curso y profundizar aún más en las progressives web apps nos basaremos en el mejor material, el que nos proporciona sus desarrolladores, es decir, Google. Pero estaros atentos a nuestras redes sociales porque os iremos contando cómo vamos evolucionando y sobre todo, nuestros alumnos. ¡Hasta la próxima Multipliqueros!

Foto Francisco
Francisco Villén.
Desarrollador web de


Deja un comentario

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