Conceptos PWAs

Sebastian Vega

Sebastian Vega

Compartir

Conceptos PWAs

Ya vimos lo que son las PWA, sus características y por qué debemos estar aprovechando y utilizándolas en nuestros proyectos.

Como recordatorio, las aplicaciones web progresivas, básicamente son aplicaciones web que usan las últimas tecnologías web y características de navegadores modernos, las cuales buscan experiencias que combinan lo mejor de la web y de las aplicaciones nativas.

La definición anterior, no nos dice mucho en lo concreto. Ahora vamos a descubrir qué son en términos técnicos y cómo las podemos construir, que es lo que nos interesa finalmente.

Dadas sus características, considero que los principales componentes técnicos de una PWA son:

  1. App Manifest
  2. Service Workers
  3. App Shell
  4. HTTPS

Haré una introducción a cada uno de estos componentes, para luego, en una historia posterior profundizar en aquellos que lo requieran.

App Manifest

Este es el primer paso para construir nuestra PWA, debemos crear un archivo de manifiesto, con el que haremos posible que nuestra aplicación sea “instalable”.

El manifest.json, es un archivo JSON en donde se provee información acerca de la aplicación, como nombre, autor, iconos y descripción. Nos permite a los desarrolladores, controlar cómo se ve la app, por ejemplo en la pantalla de inicio de un smartphone, controlar la pantalla de presentación colores del tema e incluso URL que se abre. Además de permitir guardar un ícono de la aplicación web en el inicio de un dispositivo (algo así como “instalar” un acceso directo).

Un ejemplo de este manifiesto sería el siguiente:

{
  "short_name": "Mi App", 
  "name": "Nombre largo",
  "description": "Esta es una app de prueba...!",
  "background_color": "blue",
  "lang": "es-CL",
  "scope": "/miapp/",
  "icons": [
    {
      "src": "images/iconos/icono-1.png",
      "type": "image/png",
      "sizes": "48x48"
    },
    {
      "src": "images/iconos/icono-2.png",
      "type": "image/png",
      "sizes": "96x96"
    }
  ],
  "start_url": "index.html?utm_source=manifiesto"
}

Google y Mozilla nos muestran más detalle y una explicación práctica de lo que se puede hacer con el manifiesto.

Service Workers

Los service workers son uno de los elementos principales de una PWA, es lo que permite a la aplicación funcionar offline, algo así como un proxy en el cliente. Si bien no pertenecen estrictamente a las PWA, de hecho son una especificación W3C y su propósito va más allá de las PWAs, son probablemente el componente técnico más importante a la hora de construir una aplicación web progresiva.

Para entregar una experiencia offline, previamente se utilizaba el mecanismo de AppCache, que si bien funcionaba relativamente bien con apps simples de una página, presentaba “inconvenientes” sobre todo con sitios de varias páginas. Los service workers vienen a solucionar estos inconvenientes.

Por ahora, en términos simples entenderemos a los Service Workers como un proxy por el lado del cliente que intercepta peticiones y puede decidir que hacer con ellas, por ejemplo si no hay conexión puede buscar en caché, de lo contrario puede hacerlo a través de internet.

Aquí podemos ver una buena explicación de esta especificación, en un próximo post profundizaré sobre este tema y meteremos las manos en el código para hacer algo práctico que nos muestre su potencial.

App Shell

Una arquitectura de “aplicación shell”, básicamente, es el HTML, CSS y Javascript mínimo que soporta la interfaz de una aplicación, es decir son los recursos básicos que la aplicación web necesita para cargar el esqueleto de la interfaz de usuario UI. Esto permite que las Aplicaciones Web Progresivas se carguen de forma instantánea y fiable de manera similar a las aplicaciones nativas.

En general el contenido que se incluye aquí son los encabezados, barras de herramientas, menú, pié de página, etc. Básicamente todo lo estático de la aplicación, lo que no cambia o cambia con poca frecuencia puede ser parte de este esqueleto inicial.

La aplicación shell debería:

  • Cargar rápido
  • Usar la menor cantidad de datos posible
  • Usar recursos estáticos de un caché local
  • Separar el contenido de la navegación
  • Recuperar y mostrar contenido específico de la página (HTML, JSON, etc.)
  • Opcionalmente, contenido dinámico de caché


Ejemplos de uso

Como ejemplos de aplicaciones que utilizan esta arquitectura podemos ver:

HTTPS

Finalmente, otro aspecto fundamental para nuestras PWA es que debemos garantizar que la información esta protegida y no se puede interceptar.

Las APIs modernas, no funcionan sin una conexión segura, en donde la información pueda ser comprometida. Por ejemplo los Service Workers deben estar implementados en un sitio bajo HTTPS, podemos utilizarlos con HTTP solo en localhost.

Para obtener nuestros certificados podemos usar Let’s Encrypt.

Ok, voy a dejar esta historia hasta aquí. Pronto seguiremos profundizando estos conceptos, principalmente los service workers, para construir un ejemplo práctico y aprovechar de que angular 5 incluye soporte para construir PWAs.

Referencias

Nos leemos!