¿Qué es PWA?

También llamado: Progressive Web App, aplicación web progresiva, service worker

Definición

Una PWA (Progressive Web App) es una web que se puede instalar en el móvil o el ordenador como una aplicación, funcionar sin conexión y enviar notificaciones, sin pasar por una tienda de aplicaciones.

Una PWA es una web normal a la que se añaden dos piezas: un manifiesto que describe cómo se instala (nombre, icono, colores) y un service worker, un script que se interpone entre la web y la red y permite guardar archivos en caché para funcionar sin conexión.

Ejemplo

El manifiesto (manifest.webmanifest), enlazado desde el HTML:

{
  "name": "Glossan",
  "short_name": "Glossan",
  "start_url": "/",
  "display": "standalone",
  "background_color": "#ffffff",
  "theme_color": "#0b6bcb",
  "icons": [
    { "src": "/icono-192.png", "sizes": "192x192", "type": "image/png" },
    { "src": "/icono-512.png", "sizes": "512x512", "type": "image/png" }
  ]
}

<link rel="manifest" href="/manifest.webmanifest">
<script>
  if ("serviceWorker" in navigator) navigator.serviceWorker.register("/sw.js");
</script>

Requisitos

Servirse por HTTPS (los service workers no funcionan en HTTP, salvo en localhost).
Un manifiesto válido con iconos.
En la práctica, un diseño responsive que funcione bien en móvil.

Cosas que conviene saber

El soporte varía: Android y los navegadores de escritorio basados en Chromium ofrecen la experiencia más completa; en iPhone se instalan desde «Añadir a pantalla de inicio» y las notificaciones push solo funcionan en apps instaladas.
Un service worker mal hecho puede dejar a los usuarios con una versión vieja de la web para siempre. Planifica bien cómo se actualiza la caché.

¿Tienes un producto o servicio relacionado con PWA? Anúnciate en este término.

Términos relacionados

Categorías: Frontend