Aplicaciones Web Progresivas

Logotipo de la comunidad PWA Las aplicaciones web progresivas (mejor conocidas como PWAs por «Progressive Web Apps») son aplicaciones web que utilizan APIs y funciones emergentes del navegador web junto a una estrategia tradicional de mejora progresiva para ofrecer una aplicación nativa —como la experiencia del usuario para aplicaciones web multiplataforma. Las aplicaciones web progresivas son un patrón de diseño útil, aunque no son un estándar formalizado. Se puede pensar que PWA es similar a AJAX u otros patrones similares que abarcan un conjunto de atributos de aplicación, incluido el uso de tecnologías y técnicas web específicas. Este conjunto de documentos te dice todo lo que necesitas saber sobre ellas.

Para poder llamar PWA a una aplicación web, técnicamente hablando debe tener las siguientes características: Contexto seguro (en-US) (HTTPS), uno o más Servicio Workers y un archivo de manifiesto.

Contexto seguro (en-US) (HTTPS): La aplicación web se debe servir a través de una red segura. Ser un sitio seguro no solo es una buena práctica, sino que también establece tu aplicación web como un sitio confiable, especialmente si los usuarios necesitan realizar transacciones seguras. La mayoría de las funciones relacionadas con una PWA, como la geolocalización e incluso los servicios workers, solamente están disponibles cuando la aplicación se ha cargado mediante HTTPS.
Servicio workers: Un servicio worker es un script que permite interceptar y controlar cómo un navegador web maneja tus solicitudes de red y el almacenamiento en caché de activos. Con los servicios worker, los desarrolladores web pueden crear páginas web rápidas y fiables junto con experiencias fuera de línea.
El archivo manifest: Un archivo JSON que controla cómo se muestra tu aplicación al usuario y garantiza que las aplicaciones web progresivas sean detectables. Describe el nombre de la aplicación, la URL de inicio, los iconos y todos los demás detalles necesarios para transformar el sitio web en un formato similar al de una aplicación.

Ventajas de PWA

Las PWA deben ser detectables, instalables, enlazables, independientes de la red, progresivas, reconectables, responsivas y seguras. Para obtener más información sobre lo que esto significa, lee Ventajas de las aplicaciones web progresivas (en-US).

Para saber cómo implementar PWA, lee la guía para desarrolladores de PWA.

Documentación

<-- La lista automática temporal a continuación se reemplazará pronto -->

Carga progresiva: En artículos anteriores cubrimos las API que nos ayudan a convertir nuestro ejemplo de js13kPWA en una aplicación web progresiva: El servicio workers, Manifiestos web, Notificaciones y Push. En este artículo iremos aún más allá y mejoraremos el rendimiento de la aplicación cargando progresivamente sus recursos.
Cómo hacer PWAs instalables: En el último artículo, leímos cómo la aplicación de ejemplo, js13kPWA, funciona sin conexión gracias a su servicio worker, pero podemos ir aún más lejos y permitir que los usuarios instalen la aplicación web en los navegadores móviles y de escritorio que lo admitan. Los usuarios pueden iniciar la aplicación web instalada como si fuera una aplicación nativa. Este artículo explica cómo lograr esto usando el manifiesto de la aplicación web.
Cómo hacer que las PWAs se puedan volver a conectar usando Notificaciones y Push: Tener la capacidad de almacenar en caché el contenido de una aplicación para que funcione sin conexión es una gran característica. Permitir que el usuario instale la aplicación web en su pantalla de inicio es aún mejor. Pero en lugar de depender solo de las acciones del usuario, podemos hacer más, utilizando mensajes push y notificaciones para volver a interactuar automáticamente y entregar contenido nuevo siempre que esté disponible.
Estructura de una aplicación web progresiva: Ahora que conoces la teoría detrás de las PWAs, veamos la estructura recomendada de una aplicación real. Comenzaremos analizando la aplicación js13kPWA, veamos por qué está construida de esa manera y qué beneficios aporta.
Hacer que las PWAs trabajen desconectadas con servicio workers: Ahora que hemos visto cómo se ve la estructura de js13kPWA y hemos visto el intérprete básico en funcionamiento, veamos cómo se implementan las capacidades sin conexión con el Servicio Worker. En este artículo, analizamos cómo se usa en nuestro ejemplo de js13kPWA (ve el código fuente también). Examinamos cómo agregar funcionalidad fuera de línea.
Instalar y desinstalar aplicaciones web: La instalación de aplicaciones web es una función disponible en los navegadores modernos que permite a los usuarios elegir "instalar" fácil y cómodamente una aplicación web en su dispositivo para que puedan acceder a ella de la misma manera que lo harían con cualquier otra aplicación. Dependiendo del dispositivo y las características del sistema operativo y el navegador, esto puede resultar en lo que esencialmente es una aplicación con todas las funciones (por ejemplo, usando WebAPK en Android) o como un acceso directo agregado a la pantalla de tu dispositivo. Esta guía explica cómo se realiza la instalación, qué significa y qué debes hacer como desarrollador para que los usuarios la aprovechen.
Introducción a aplicaciones web progresivas: Este articulo provee una introducción a las Aplicaciones web progresivas (PWAs), explica qué son, y las ventajas que brindan sobre las aplicaciones web convencionales.

Advertencia: Todo lo que se encuentra debajo de este punto es un remanente de la versión anterior de esta página y se renovará a medida que se revise el resto del contenido.

Guías del núcleo de PWA

Las siguientes guías te muestran lo que debes hacer para implementar una PWA, examinando un ejemplo simple y mostrándote cómo funcionan todas las piezas.

Guías tecnológicas

Almacenamiento del lado del cliente — una extensa guía que muestra cómo y cuándo utilizar el almacenamiento web, IndexedDB y el servicio workers.
Uso del servicio workers — una guía más detallada que cubre la API del servicio workers.
Uso de IndexedDB — los fundamentos de IndexedDB, explicados en detalle.
Uso de la API de almacenamiento web — la API de almacenamiento web simplificada.
Aplicaciones web de carga instantánea con una arquitectura de intérprete de aplicaciones — una guía para usar el patrón de codificación de intérprete de App para crear aplicaciones que se cargan rápidamente.
Uso de la API Push (en-US) — aprende los conceptos básicos de la API Web Push.
Uso de la API de notificaciones — notificaciones web en pocas palabras.
Los componentes básicos del diseño responsivo (en-US) — aprende los conceptos básicos del diseño responsivo, un tema esencial para el diseño de aplicaciones modernas.
Primero móvil (en-US) — a menudo, al crear diseños de aplicaciones adaptables, tiene sentido crear el diseño móvil como predeterminado y construir diseños más anchos en la parte superior.
Guía para agregar la pantalla de inicio (en-US) — aprende cómo tus aplicaciones pueden aprovechar agregar la pantalla de inicio (A2HS).

Herramientas

localForage — una biblioteca de JavaScript sencilla y agradable para almacenar datos en el lado del cliente de manera realmente simple, usa IndexedDB y recurre a Web SQL/Web Storage si es necesario.
ServiceWorkerWare — un microframework tipo Express para facilitar el desarrollo del Servicio Worker.
oghliner — no solo es una plantilla, sino una herramienta para implementar aplicaciones web sin conexión para Páginas de GitHub.
sw-precache — un módulo de node para generar código del servicio worker que precargará recursos específicos.
workbox: sucesor espiritual de "sw-precache" con estrategias de almacenamiento en caché más avanzadas y sencillas precargas.
upup: un diminuto script que garantiza que tu sitio siempre esté disponible para tus usuarios.
El libro de recetas para servicios worker: una serie de excelentes recetas de servicios worker que muestran cómo implementar una aplicación sin conexión, además de otros muchos concejos.
Extensión PWA de VS Code: una colección de todos los fragmentos de código esenciales que necesitas para crear aplicaciones web progresivas correctamente allí en tu entorno de VS Code.