¿Qué es una aplicación web progresiva (PWA)?

PWA es un término general que se utiliza para hacer referencia a múltiples tecnologías. Una PWA generalmente incluirá un Manifiesto de aplicación web y un Trabajador de servicio. El Manifiesto de la aplicación web proporciona datos que se utilizan para registrar el sitio con la lista de aplicaciones de un sistema operativo. El Service Worker se puede usar para agregar funciones que permanecen activas después de que se cierran las pestañas del navegador del sitio.

No todos los sitios utilizarán todas las capacidades posibles. Algunos incluirán un Manifiesto de aplicación web, pero no Service Worker; otros tendrán un Service Worker pero no soporte para la instalación de aplicaciones. No existe un estándar particular que defina cómo debe comportarse una PWA. Una PWA es cualquier sitio que utiliza algunas de estas tecnologías para ofrecer cierto nivel de paridad de funciones con las aplicaciones nativas.

Comprender la mejora progresiva

La parte progresiva de las aplicaciones web progresivas se deriva de su uso esperado de mejora progresiva. Las funciones de PWA aún son bastante nuevas y es posible que no sean compatibles con todos los navegadores. Una PWA debe continuar brindando su experiencia central basada en la web incluso si las API del navegador, como los trabajadores del servicio, no están disponibles.

Funciones como las notificaciones automáticas no deberían ser una parte obligatoria de su experiencia. Si su sitio no se registra para las notificaciones automáticas, el resto del sitio debería continuar funcionando normalmente. Cuando el navegador admite las tecnologías modernas, su sitio debe tratarlas como una mejora que brinda al usuario una comodidad adicional.

Disponibilidad de características

Las funciones de PWA brindan una integración más profunda entre su sitio web y el dispositivo del usuario. En consecuencia, las API utilizadas para crearlos están restringidas a conexiones HTTPS. Esto ayuda a garantizar que el contenido no haya sido manipulado para instalar persistentemente aplicaciones nefastas en su dispositivo.

Las funciones individuales están protegidas por permisos web orientados al usuario. Se podría abusar de capacidades como las notificaciones automáticas para bombardear al usuario con contenido no deseado. Los usuarios deben reconocer un aviso de permiso que otorga a su sitio la capacidad de utilizar funciones potencialmente intrusivas.

Estas condiciones significan que debe usar la detección de características antes de intentar usar la mayoría de las API relevantes. Es posible que una función no esté disponible porque el navegador no la admite. Sin embargo, también puede estar deshabilitado debido a una conexión insegura o porque el usuario rechazó una solicitud de permiso. No puede anticipar el último escenario; el usuario puede cambiar de opinión en cualquier momento.

Rasgos de PWA

Aunque no existe un estándar para las PWA, la mayoría de los sitios que ofrecen una experiencia similar a la de una aplicación tienen las siguientes características:

• Instalable: en las plataformas compatibles, el sitio web se puede instalar como una aplicación móvil. Los efectos varían según el sistema operativo y el navegador.
• Funciona sin conexión: los Service Workers son scripts que continúan ejecutándose incluso cuando su sitio no está abierto. También pueden interceptar solicitudes de red, lo que le permite servir activos esenciales desde un caché. Esto permite que su sitio siga funcionando cuando el usuario no está conectado.
• Interfaz de usuario similar a una aplicación: aunque no es un requisito, es probable que los PWA pongan mayor énfasis en el uso de controles de interfaz de usuario modernos que se integren bien con los estilos de aplicaciones nativas. Los PWA deberán responder a diferentes tamaños de pantalla.

Más allá de estos rasgos básicos, los PWA individuales superpondrán características adicionales para crear la experiencia de usuario que necesitan. Estas funciones pueden incluir notificaciones automáticas, cargas en segundo plano y búsquedas periódicas de datos en segundo plano. Estas capacidades opcionales le permiten volver a involucrar al usuario y anticipar sus necesidades.

Manifiesto de la aplicación web

Los manifiestos de aplicaciones web son archivos JSON que definen información clave sobre su sitio. Esto incluye detalles como el nombre del sitio, el color de énfasis y las ubicaciones de los archivos de íconos.

Los navegadores y los sistemas operativos utilizan la información para crear entradas de aplicaciones a nivel del sistema cuando instala su sitio. Así es como su sitio obtiene un ícono de cajón de aplicaciones en Android o un enlace del menú Inicio en Windows.

Aquí hay un manifiesto de ejemplo:

{"name": "Example App",
    "display": "standalone",
    "background_color": "#fff",
    "description": "My App",
    "start_url": "/",
    "icons": [
        {
            "src": "/icon.png",
            "sizes": "512x512",
            "type": "image/png"
        }
    ]
}

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

if ("serviceWorker" in navigator) {
    navigator.serviceWorker.register("/service-worker.js");
}

self.addEventListener("install", e => {
    e.waitUntil(async () => {
        const cache = await caches.open("my-app-cache");
        await cache.addAll([
            "/index.html",
            "/my-css.css",
            "/my-js.js",
            "/assets/icon.png",
            "/assets/my-header-image.png"
        ]);
    });
});
 
self.addEventListener("fetch", e => {
    e.respondWith(async () => {
 
        const cached = await catches.match(e.request);
        if (cached) return cached;
 
        const response = await fetch(e.request);
        return response;
 
    })
});