Es un curso en el que se desglosan todos los aspectos del desarrollo moderno de apps web progresivas.
Este curso abarca los aspectos básicos del desarrollo de apps web progresivas con fragmentos fáciles de entender. En los siguientes módulos, aprenderás qué es una app web progresiva, cómo crear una o actualizar tu contenido web existente, y cómo agregar todas las piezas de una app instalable sin conexión. Usa el panel de menú para navegar por los módulos. (El menú se encuentra a la izquierda en el escritorio o detrás del menú de hamburguesa en los dispositivos móviles).
Aprenderás los aspectos básicos de la AWP, como el manifiesto de apps web, los service workers, cómo diseñar con una app en mente y cómo usar otras herramientas para probar y depurar tu AWP. Después de estos aspectos básicos, aprenderás sobre la integración con la plataforma y el sistema operativo, cómo mejorar la experiencia de instalación y uso de tu AWP, y cómo ofrecer una experiencia sin conexión.
Cada módulo incluye demostraciones interactivas y autodiagnósticos para que pongas a prueba tus conocimientos. Podrás probar demostraciones en tu teléfono celular, tablet o laptop mientras juegas con código para comprender los aspectos básicos de lo que hace una app web progresiva.
Este curso se creó para desarrolladores web principiantes y avanzados por igual. Puedes repasar la serie de principio a fin para obtener una comprensión general de la AWP de principio a fin, o puedes usarla como referencia para temas específicos. Para quienes no tengan experiencia en el desarrollo web, necesitarán conocimientos básicos sobre HTML, CSS y JavaScript. Consulta Aprende CSS y los cursos de HTML y JavaScript en MDN.
Esto es lo que aprenderás:
Cómo comenzar
Si deseas compilar una app web progresiva, es posible que te preguntes por dónde empezar, si es posible actualizar un sitio web a una AWP sin empezar desde cero o cómo pasar de una app específica de la plataforma a una AWP. Este artículo te ayudará a responder esas preguntas.
Conceptos básicos
En esencia, todas las apps web progresivas son sitios web modernos. Por lo tanto, es importante que tu sitio web tenga una base sólida en cuanto al diseño responsivo, los dispositivos móviles y todo lo primero, el diseño intrínseco y el rendimiento web.
Diseño de apps
Una de las diferencias clave entre las apps web progresivas y las apps web y los sitios web clásicos es la instalación. De esta manera, se crea una experiencia independiente más integrada en la plataforma y el sistema operativo. La instalación permite una nueva flexibilidad y nueva responsabilidad, ya que no tendremos una interfaz de usuario del navegador para nuestro contenido.
Recursos y datos
Una Progressive Web App es un sitio web. Todos sus activos son los mismos que los de la Web, pero con nuevas herramientas para que esos recursos se carguen rápido cuando estén en línea y estén disponibles cuando no hay conexión.
Service Workers
Los service workers son una parte fundamental de una AWP. Permiten la carga rápida (independientemente de la red), el acceso sin conexión, las notificaciones push y otras funciones.
Almacenamiento en caché
Puedes usar la API de Cache Storage para descargar, almacenar, borrar o actualizar recursos en el dispositivo. Luego, estos recursos se pueden publicar en el dispositivo sin necesidad de una solicitud de red.
Activo
Con el evento de recuperación del service worker, puedes interceptar solicitudes de red y entregar una respuesta con distintas técnicas.
Caja de trabajo
Workbox es un conjunto de módulos que simplifican las interacciones comunes del service worker, como el enrutamiento y el almacenamiento en caché. Cada módulo aborda un aspecto específico del desarrollo de service worker. Workbox tiene como objetivo facilitar al máximo el uso de service worker y, al mismo tiempo, permitir la flexibilidad para adaptarse a requisitos de aplicaciones complejos cuando sea necesario.
Datos sin conexión
Para crear una experiencia sin conexión sólida, debes implementar la administración de almacenamiento. Algunas herramientas, como IndexedDB, Cache, Storage Manager, Persistent Storage y Content Indexing, pueden ser útiles.
Instalación
Las apps instaladas son de fácil acceso y pueden aprovechar algunas integraciones más profundas con el SO. Obtén información para hacer que tu AWP se pueda instalar y obtener esos beneficios.
Manifiesto de la aplicación web
El manifiesto de la aplicación web es un archivo JSON que define cómo se debe tratar la AWP como una aplicación instalada, incluidos el aspecto y el comportamiento básico en el sistema operativo.
Mensaje de instalación
En el caso de los sitios que aprueban los criterios de instalación de la AWP, el navegador activa un evento para pedirle al usuario que la instale. La buena noticia es que puedes usar este evento para personalizar tu mensaje e invitar a los usuarios a instalar tu app.
Actualiza
Es probable que debas actualizar tu AWP. En este capítulo, encontrarás las herramientas para actualizar diferentes partes de tu AWP, desde los recursos hasta los metadatos.
Mejoras
Tu usuario espera una buena experiencia. En este capítulo, verás cómo mejorar tu AWP con pantallas de presentación, accesos directos a aplicaciones y el funcionamiento de las sesiones.
Detección
Identificar cómo interactúan los usuarios con tu app es útil para personalizar y mejorar la experiencia del usuario. Por ejemplo, puedes verificar si tu app ya está instalada en el dispositivo del usuario e implementar funciones como la transferencia de navegación a la app independiente desde el navegador.
Integración del SO
La AWP ahora funciona fuera del navegador. Este capítulo trata sobre cómo realizar una integración más profunda con el sistema operativo una vez que los usuarios instalan tu aplicación.
Administración de ventanas
Una AWP fuera del navegador administra su propia ventana. En este capítulo, conocerás las APIs y las capacidades para administrar una ventana dentro del sistema operativo.
Funciones experimentales
Existen funciones de AWP que aún están en construcción y tú puedes formar parte de su desarrollo. En este capítulo, aprenderás sobre el proyecto Fugu, cómo registrarte para una prueba de origen y cómo usar APIs experimentales
Herramientas y depuración
Exploraremos las herramientas disponibles para desarrollar, depurar y probar tus apps web progresivas.
Arquitectura
Cuando desarrolles una AWP, deberás tomar algunas decisiones, por ejemplo, si vas a crear una aplicación de una sola página o una de varias páginas, y si la alojarás en la raíz de tu dominio o dentro de una carpeta.
Administración de complejidad
Mantener una aplicación web simple puede ser sorprendentemente complicado. En este módulo, aprenderás cómo funcionan las APIs web con subprocesos y cómo puedes usarlas para patrones comunes de AWP, como la administración del estado.
Funciones
Las AWP no solo están vinculadas a la pantalla. Este capítulo trata sobre las capacidades que tiene una AWP hoy en términos de hardware, sensores y uso de la plataforma.
Conclusión
Próximos pasos y recursos.
Entonces, ¿todo listo para aprender AWP?