PWA

Visión General

En el siguiente tutorial, aprenderá qué es una Aplicación Web Progresiva, cómo crear una o actualizar su contenido web existente y cómo agregar todas las piezas para una aplicación instalable sin conexión. Pero antes, revisemos los correspondientes conceptos.

Requisitos

Para aquellos nuevos en el desarrollo web, necesitarán una base en HTML, CSS, JavaScript y Vue para seguir adelante.

Aplicaciones Web Progresivas

Las aplicaciones web progresivas (PWA) son aplicaciones web creadas y mejoradas con API modernas para ofrecer capacidades, confiabilidad e instalación mejoradas y, al mismo tiempo, llegar a cualquier persona, en cualquier lugar y en cualquier dispositivo, todo con una única base de código.

Si desea crear una Aplicación Web Progresiva, es posible que se pregunte por dónde empezar, si es posible actualizar un sitio web a una PWA sin empezar desde cero o cómo pasar de una aplicación específica de una plataforma a una PWA. Este tutorial le ayudará a responder estas preguntas.

Cimientos

Todas las aplicaciones web progresivas son, en esencia, sitios web modernos, por lo que es importante que su sitio web tenga una base sólida en diseño responsivo, todo primero en dispositivos móviles, diseño intrínseco y rendimiento web.

Diseño de Aplicaciones

Una de las diferencias clave entre las Aplicaciones Web Progresivas y los sitios web y aplicaciones web clásicas es la facilidad de instalación. Esto crea una experiencia independiente más integrada en la plataforma y el sistema operativo. La instalación permite una nueva flexibilidad y una nueva responsabilidad, ya que no tendremos una interfaz de usuario de navegador alrededor de nuestro contenido.

Assets y Data

Una Aplicación Web Progresiva es un sitio web; Todos sus assets son los mismos que en la web, pero con nuevas herramientas para hacer que esos assets se carguen rápidamente cuando están en línea y disponibles cuando están fuera de línea.

Service Workers

Los trabajadores de servicios son una parte fundamental de una PWA. Permiten una carga rápida (independientemente de la red), acceso sin conexión, notificaciones automáticas y otras capacidades.

Almacenamiento en Caché

Puede utilizar la API de almacenamiento en caché para descargar, almacenar, eliminar o actualizar activos en el dispositivo. Luego, estos activos se pueden entregar en el dispositivo sin necesidad de una solicitud de red.

Servicio

Utilizando el evento de recuperación del trabajador del servicio, puede interceptar solicitudes de red y ofrecer una respuesta utilizando diferentes técnicas.

Workbox

Workbox es un conjunto de módulos que simplifican las interacciones comunes de los trabajadores de servicios, como el enrutamiento y el almacenamiento en caché. Cada módulo aborda un aspecto específico del desarrollo de los trabajadores de servicios.

Workbox tiene como objetivo hacer que el uso de trabajadores de servicios sea lo más fácil posible y, al mismo tiempo, permitir la flexibilidad para adaptarse a requisitos de aplicaciones complejas cuando sea necesario.

Offline Data

Para crear una experiencia sólida fuera de línea, debe implementar la administración de almacenamiento. Herramientas como IndexedDB, Cache, Storage Manager, Persistent Storage e Content Indexing pueden ayudar.

Instalación

Las aplicaciones instaladas son de fácil acceso y pueden aprovechar algunas integraciones más profundas con el sistema operativo. Aprenda a hacer que su PWA sea instalable y obtenga esos beneficios.

Web App Manifest

El manifiesto de la aplicación web es un archivo JSON que define cómo se debe tratar la PWA como una aplicación instalada, incluida la apariencia y el comportamiento básico dentro del sistema operativo.

Aviso de Instalación

Para los sitios que pasan los criterios de instalación de PWA, el navegador activa un evento para solicitar al usuario que lo instale. La buena noticia es que puedes utilizar este evento para personalizar tu mensaje e invitar a los usuarios a instalar tu aplicación.

Update

Es probable que su PWA necesite una actualización. Este apartado le brinda las herramientas para actualizar diferentes partes de su PWA, desde assets hasta metadatos.

Mejoras

Su usuario espera una buena experiencia. En esta sección, verá cómo mejorar su PWA con pantallas de presentación, accesos directos a aplicaciones y cómo funcionan las sesiones.

Detección

Identificar cómo interactúan los usuarios con su aplicación es útil para personalizar y mejorar la experiencia del usuario. Por ejemplo, puede comprobar si su aplicación ya está instalada en el dispositivo del usuario e implementar funciones como transferir la navegación a la aplicación independiente desde el navegador.

Integración del Sistema Operativo

Su PWA funcionará fuera del navegador. Este segmento cubre cómo integrarse aún más con el sistema operativo una vez que los usuarios instalan su aplicación.

Window Management

Una PWA fuera del navegador administra su propia ventana. En este capítulo, comprenderá las API y las capacidades para administrar una ventana dentro del sistema operativo.

Funciones Experimentales

Hay capacidades de PWA que aún están en construcción y tú puedes ser parte de su desarrollo. En este enlace, aprenderá sobre el proyecto Fugu, cómo registrarse para una prueba de origen y cómo usar API experimentales.

Herramientas y Depuración

Explora las herramientas disponibles para desarrollar, depurar y probar sus aplicaciones web progresivas.

Arquitectura

Usted toma algunas decisiones al desarrollar una PWA, como si crear una aplicación de una sola página o una aplicación de varias páginas, y si la alojará en la raíz de su dominio o dentro de una carpeta.

Manejo de Complejidad

Mantener una aplicación web sencilla puede resultar sorprendentemente complicado. En este módulo, aprenderá cómo funcionan las API web con subprocesos y cómo puede usarlos para patrones de PWA comunes, como la administración de estado.

Capacidades

Las PWA no solo están vinculadas a la pantalla. Este capítulo trata sobre las capacidades que tiene una PWA hoy en día en términos de hardware, sensores y uso de plataforma.

Conclusión

Entonces, ¿estás listo para aprender PWA con Vite Plugin?