Una PWA es una aplicación web que posee características adicionales que permiten mejorar la experiencia de usuario, mediante una fácil instalación, carga rápida, la capacidad de funcionar de forma offline y en malas condiciones de red. En este post veremos una breve introducción y cómo hacer nuestra app instalable.

¿Para qué quiero una PWA?

Las PWAs son sumamente interesantes desde el punto de vista del desarrollador porque:

• Se deja de tener una web app y una app mobile separadas.
• Son actualizables sin pasar por la tienda de aplicaciones.
• Poseen capacidades para funcionar sin conexión.
• Si sabés desarrollar para web, no necesitas aprender tecnologías especificas de Android y IOS.
• Son localizables por los motores de búsqueda de la web.

Haciendo nuestra Web App Instalable

En este artículo vamos a ver brevemente cómo hacer tu aplicación web "instalable". Para ello veremos qué es el web app manifest y cómo configurarlo para especificar los datos de tu aplicación.

El Web App manifest

El manifiesto de las apps web es un archivo JSON simple que te permite controlar cómo se muestra tu app al usuario en áreas donde normalmente ven apps nativas (por ejemplo, la pantalla de inicio de un dispositivo móvil), además de indicar lo que el usuario puede iniciar y definir su apariencia al iniciarse.

Un ejemplo de un web manifest es el siguiente:

{
  "short_name": "AirHorner",
  "name": "Kinlan's AirHorner of Infamy",
  "icons": [
    {
      "src": "launcher-icon-1x.png",
      "type": "image/png",
      "sizes": "48x48"
    },
    {
      "src": "launcher-icon-2x.png",
      "type": "image/png",
      "sizes": "96x96"
    },
    {
      "src": "launcher-icon-4x.png",
      "type": "image/png",
      "sizes": "192x192"
    }
  ],
  "start_url": "index.html?launcher=true"
}

Asegúrate de incluir lo siguiente:

• Un short_name para usar como el texto de la pantalla de inicio de los usuarios.
• Un name para usar en el banner de instalación de apps web.
• Un start_url para que la vista inicial de la app quede referenciada a la página home de tu aplicación.

Además si querés personalizar el color de background de tu app y el color del tema, agregá estas properties al web manifest:

"background_color": "#2196F3",
"theme_color":"#FFFFFF"

Acordate de incluir este archivo json en tu HTML!

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

Para más info sobre el web manifest, te recomendamos que visites el siguiente link.

En futuros artículos veremos como ir agregando otras funcionalidades tales como service workers y push notifications.

Esperamos que te haya resultado útil!