Las Progressive Web Apps (PWA) a menudo se sienten como una capa superficial: parecen una aplicación, pero en el fondo siguen siendo sitios web. Tecnologías como Service Workers, Web App Manifest y el caché offline pueden resultar abrumadoras, llevando a PWA con bajas tasas de instalación, funcionalidades offline defectuosas o, en el caso de sitios sin PWA, limitando a los usuarios a la experiencia del navegador.

La complejidad innecesaria es un problema común. Muchos sitios presentan configuraciones de PWA erróneas, iconos que no se muestran correctamente o estrategias de caché mal gestionadas, lo que resulta en la presentación de contenido obsoleto a los usuarios. La excusa de la "experiencia de usuario" pierde peso cuando las funcionalidades básicas de la PWA no están implementadas correctamente. Ignorar las PWA por considerarlas inútiles puede llevar a una alta tasa de abandono de usuarios, sin que se comprenda la causa.

Por Qué las PWA Son Importantes

1. Acceso Offline: Una PWA bien implementada permite a los usuarios acceder al sitio incluso sin conexión, mejorando significativamente la experiencia.
2. Instalación en Pantalla de Inicio: La capacidad de añadir la PWA a la pantalla de inicio del dispositivo fomenta una mayor interacción y lealtad del usuario.
3. Notificaciones Push: Las PWA pueden enviar notificaciones, aumentando la participación del usuario.
4. Mejora del Rendimiento: El caché de recursos acelera la carga del sitio, proporcionando una experiencia más fluida.
5. Requisito en Entrevistas: El conocimiento sobre PWA es frecuentemente evaluado en entrevistas técnicas, y dominarlo aumenta la confianza.
6. Mejora de la Imagen Profesional: Discutir técnicas de PWA con colegas puede elevar tu perfil técnico.

Ejemplos de Malas Prácticas

// 1. Falta de Web App Manifest
// Ausencia del archivo manifest.json

// Problema: Imposibilidad de instalación en pantalla de inicio, falta de icono y nombre de aplicación.

// 2. Configuración incorrecta del Service Worker
// service-worker.js
self.addEventListener('fetch', (event) => {
  event.respondWith(
    caches.match(event.request)
      .then((response) => {
        if (response) {
          return response;
        }
        return fetch(event.request);
      })
  );
});

// Problema: Estrategia de caché demasiado simple, sin manejo de actualizaciones.

// 3. Funcionalidad offline deficiente
// Ausencia de una página offline dedicada.

// Problema: Los usuarios sin conexión ven páginas de error del navegador, lo que resulta en una mala experiencia.

// 4. Configuración errónea de iconos
// manifest.json
{
  "icons": [
    {
      "src": "icon.png",
      "sizes": "192x192",
      "type": "image/png"
    }
  ]
}

// Problema: Tamaños de icono únicos que pueden mostrarse incorrectamente en diversos dispositivos.

// 5. Estrategia de caché desorganizada
// Caché de todos los recursos
self.addEventListener('install', (event) => {
  event.waitUntil(
    caches.open('v1')
      .then((cache) => {
        return cache.addAll([
          '/',
          '/index.html',
          '/styles.css',
          '/script.js',
          '/images/*.png'
        ]);
      })
  );
});

// Problema: Almacenamiento en caché de demasiados recursos, lo que puede agotar el espacio de almacenamiento.

Problemas Comunes Identificados:

• Ausencia de Web App Manifest, impidiendo la instalación en pantalla de inicio.
• Configuración incorrecta del Service Worker y estrategias de caché inadecuadas.
• Funcionalidad offline deficiente, impactando negativamente la experiencia del usuario.
• Configuración errónea de iconos, resultando en una visualización anómala.
• Estrategias de caché desorganizadas, llevando a un consumo excesivo de espacio de almacenamiento.

Implementación Correcta

Guía de PWA Front end

// 1. Configuración del Web App Manifest
// manifest.json
{
  "name": "Mi PWA",
  "short_name": "PWA",
  "description": "Mi Progressive Web App",
  "start_url": "/",
  "display": "standalone",
  "background_color": "#ffffff",
  "theme_color": "#4285f4",
  "icons": [
    { "src": "icons/icon-72x72.png", "sizes": "72x72", "type": "image/png" },
    { "src": "icons/icon-96x96.png", "sizes": "96x96", "type": "image/png" },
    { "src": "icons/icon-128x128.png", "sizes": "128x128", "type": "image/png" },
    { "src": "icons/icon-144x144.png", "sizes": "144x144", "type": "image/png" },
    { "src": "icons/icon-152x152.png", "sizes": "152x152", "type": "image/png" },
    { "src": "icons/icon-192x192.png", "sizes": "192x192", "type": "image/png" },
    { "src": "icons/icon-384x384.png", "sizes": "384x384", "type": "image/png" },
    { "src": "icons/icon-512x512.png", "sizes": "512x512", "type": "image/png" }
  ]
}

// 2. Registro del Service Worker
// index.js
if ('serviceWorker' in navigator) {
  window.addEventListener('load', () => {
    navigator.serviceWorker.register('/service-worker.js')
      .then((registration) => {
        console.log('Service Worker registrado con scope:', registration.scope);
      })
      .catch((error) => {
        console.error('Registro de Service Worker fallido:', error);
      });
  });
}

// 3. Estrategia de caché sensata
// service-worker.js
const CACHE_NAME = 'mi-pwa-cache-v1';
const ASSETS_ESTATICOS = [
  '/',
  '/index.html',
  '/styles.css',
  '/script.js',
  '/icons/icon-192x192.png',
  '/offline.html'
];

// Almacenamiento en caché de recursos estáticos durante la instalación
self.addEventListener('install', (event) => {
  event.waitUntil(
    caches.open(CACHE_NAME)
      .then((cache) => {
        return cache.addAll(ASSETS_ESTATICOS);
      })
      .then(() => self.skipWaiting())
  );
});

// Limpieza de caché antiguo durante la activación
self.addEventListener('activate', (event) => {
  event.waitUntil(
    caches.keys()
      .then((cacheNames) => {
        return Promise.all(
          cacheNames.filter((cacheName) => cacheName !== CACHE_NAME)
                       .map((cacheName) => caches.delete(cacheName))
        );
      })
      .then(() => self.clients.claim())
  );
});

// Estrategia Cache First (primero caché)
self.addEventListener('fetch', (event) => {
  event.respondWith(
    caches.match(event.request)
      .then((response) => {
        if (response) {
          return response;
        }
        return fetch(event.request)
          .then((response) => {
            if (!response || response.status !== 200 || response.type !== 'basic') {
              return response;
            }
            const responseToCache = response.clone();
            caches.open(CACHE_NAME)
              .then((cache) => {
                cache.put(event.request, responseToCache);
              });
            return response;
          })
          .catch(() => {
            return caches.match('/offline.html');
          });
      })
  );
});

// 4. Provisión de página offline
// offline.html
/*


  <meta charset="UTF-8"></meta>
  <meta content="width=device-width, initial-scale=1.0" name="viewport"></meta>
  <title>Sin conexión</title>
  <link href="styles.css" rel="stylesheet"></link>


  <div class="offline-container">
    <h1>Estás sin conexión</h1>
    <p>Por favor, revisa tu conexión a internet e inténtalo de nuevo.</p>
  </div>


*/

// 5. Notificaciones Push
// Registro de notificaciones push
async function registrarNotificacionesPush() {
  if ('serviceWorker' in navigator && 'PushManager' in window) {
    const registration = await navigator.serviceWorker.ready;
    let subscription;
    try {
      subscription = await registration.pushManager.getSubscription();
      if (!subscription) {
        subscription = await registration.pushManager.subscribe({
          userVisibleOnly: true,
          applicationServerKey: urlBase64ToUint8Array('tu-clave-publica') // Reemplazar con tu clave pública
        });
      }
    } catch (error) {
      console.error('Registro de notificaciones push fallido:', error);
    }
  }
}

// Manejo de notificaciones push
self.addEventListener('push', (event) => {
  const data = event.data.json();
  const options = {
    body: data.body,
    icon: '/icons/icon-192x192.png',
    badge: '/icons/badge-72x72.png'
  };
  event.waitUntil(
    self.registration.showNotification(data.title, options)
  );
});

// 6. Optimización de rendimiento
// Pre-caché de recursos críticos
// Uso de Workbox
import { precacheAndRoute } from 'workbox-precaching';
import { registerRoute } from 'workbox-routing';
import { StaleWhileRevalidate } from 'workbox-strategies';

precacheAndRoute(self.__WB_MANIFEST);

registerRoute(
  ({ request }) => request.destination === 'image',
  new StaleWhileRevalidate()
);

// 7. Accesibilidad
// Asegurar la accesibilidad de la PWA en diversos dispositivos.
// Probar en diferentes tamaños de pantalla.
// Verificar la navegación por teclado.

// 8. Pruebas y Depuración
// Usar Lighthouse para auditar la PWA:
// npx lighthouse https://tu-dominio.com --output=json --output-path=report.json

// Depurar Service Worker con Chrome DevTools:
// Application > Service Workers

// 9. Despliegue
// Asegurar el uso de HTTPS.
// Desplegar el Service Worker y el manifest.json.

// 10. Analítica
// Usar Google Analytics para rastrear el uso de la PWA.
// Monitorear tasas de instalación y uso.

Herramientas y Recursos para PWA

1. Herramientas PWA:
   • Workbox: Librería de herramientas PWA de Google.
   • Lighthouse: Herramienta de auditoría PWA.
   • PWABuilder: Herramienta para la creación de PWA.
   • Service Worker Cookbook: Ejemplos de Service Workers.
2. Recursos PWA:
   • Guía PWA de Web.dev: Guía oficial de Google.
   • Documentación PWA de MDN: Documentación de Mozilla.
   • PWA.rocks: Colección de ejemplos de PWA.
   • PWA Stats: Estadísticas de uso de PWA.
3. Mejores Prácticas:
   • Configuración adecuada del Web App Manifest.
   • Estrategias de caché eficientes.
   • Provisión de una página offline.
   • Implementación de notificaciones push.
   • Optimización del rendimiento.
   • Consideraciones de accesibilidad.
   • Pruebas y depuración rigurosas.

Las PWA, si se ipmlementan correctamente, pueden transformar un sitio web en una aplicación robusta y amigable. Sin embargo, una implementación deficiente puede resultar contraproducente. La ausencia de un Web App Manifest, configuraciones erróneas del Service Worker, o una estrategia de caché desorganizada, minan la experiencia del usuario y la percepción de la aplicación. Como desarrolladores, es crucial abordar las PWA no solo como una adición técnica, sino como una mejora integral de la experiencia del usuario, garantizando funcionalidades como el acceso offline y la instalación en pantalla de inicio. Ignorar las PWA hoy puede significar un rezago en el futuro. Por lo tanto, es fundamental priorizar su desarrollo y ejecución para ofrecer aplicaciones web verdaderamente valiosas.