¿Qué es una PWA (Aplicación Web Progresiva)?

PWA es una aplicación web que se ve y se comporta como una aplicación móvil nativa, pero funciona en el navegador.

Características principales de PWA:

• Confiabilidad: Funciona sin conexión gracias a Service Workers.
• Rendimiento: Se carga rápidamente y responde a las acciones del usuario.
• Instalabilidad: Los usuarios pueden agregar PWA a la pantalla principal del dispositivo.
• Descubribilidad: Es indexada por los motores de búsqueda.
• Atractivo: Puede enviar notificaciones push.
• Responsividad: Se adapta a cualquier tamaño de pantalla.
• Seguridad: Solo funciona en HTTPS.

Tecnologías utilizadas en PWA:

• Service Workers: Proxy entre el navegador y la red, permite cachear recursos y trabajar sin conexión.

  // Ejemplo de instalación de Service Worker
  if ('serviceWorker' in navigator) {
    window.addEventListener('load', () => {
      navigator.serviceWorker.register('/service-worker.js')
        .then(registration => {
          console.log('Service Worker registrado con alcance:', registration.scope);
        })
        .catch(error => {
          console.log('Error en registro de Service Worker:', error);
        });
    });
  }
  

• Web App Manifest: Archivo JSON con información de la aplicación (nombre, íconos, orientación de pantalla, etc.).

  {
    "short_name": "My PWA",
    "name": "Mi PWA de ejemplo",
    "icons": [
      {
        "src": "/images/icon-192x192.png",
        "type": "image/png",
        "sizes": "192x192"
      },
      {
        "src": "/images/icon-512x512.png",
        "type": "image/png",
        "sizes": "512x512"
      }
    ],
    "start_url": "/",
    "background_color": "#3367D6",
    "display": "standalone",
    "scope": "/",
    "theme_color": "#3367D6"
  }
  

• HTTPS: Asegura una conexión segura.

Ventajas de PWA:

• No requiere instalación desde tiendas de aplicaciones.
• Ocupa menos espacio en el dispositivo.
• Se actualiza más fácilmente.
• Está disponible en todas las plataformas con soporte de navegador.

Las pruebas de PWA incluyen verificar:

• Funcionalidad en modos en línea y sin conexión.
• Instalación y funcionamiento en la pantalla principal.
• Responsividad en diferentes dispositivos.
• Notificaciones push.
• Funcionamiento de Service Worker y cacheo.
• El manifiesto de la aplicación.
• Rendimiento.