Aplicaciones web progresivas

Aplicaciones web progresivas

LUIS FERNANDO ALVAREZFRANSISCO JAVVIER RAMIREZ MENDEZ MARIA GUADALUPE MACIAS MARTINEZ

PRESENTACIÓN

Requerimientos de instalación y uso de PWA

Requerimientos Generales

Navegador compatible

Las PWA son compatibles con la mayoría de los navegadores modernos, pero es recomendable utilizar la última versión del navegador para asegurar la mejor compatibilidad.

Responsive Design

Asegurarse de que la PWA esté diseñada y desarrollada para adaptarse a diferentes tamaños de pantalla y dispositivos.

Consideraciones Técnicas

Una PWA generalmente incluye un archivo manifest.json que proporciona información sobre la aplicación, como iconos, nombre, colores temáticos, etc.Las PWA suelen utilizar service workers para permitir funciones como trabajar offline y enviar notificaciones.Se recomienda que la PWA se sirva a través de HTTPS para garantizar la seguridad de la conexión y permitir el uso de ciertas características, como el service worker.

Las Progressive Web Apps (PWAs) ofrecen ventajas tanto para usuarios como desarrolladores. Para usuarios, proporcionan acceso rápido, funcionan offline, se actualizan automáticamente y consumen menos datos. Para desarrolladores, permiten desarrollo multiplataforma, facilitan el mantenimiento, reducen costos y mejoran la retención de usuarios. En conjunto, las PWAs ofrecen una experiencia híbrida entre la web y las aplicaciones nativas.

Navegadores compatibles con PWA

Las Progressive Web Apps (PWAs) son compatibles con una amplia gama de navegadores modernos. Los principales navegadores que admiten PWAs incluyen:

Aspecto global.

Consideracion general.

• Es fundamental tener en cuenta que, aunque la mayoría de los navegadores modernos son compatibles con PWAs, algunas funciones avanzadas pueden variar en su implementación específica entre navegadores.

• La compatibilidad con service workers y otras tecnologías web modernas es esencial para el correcto funcionamiento de PWAs..

Herramientas de desarrollo de PWA

El desarrollo de Progressive Web Apps (PWAs) se beneficia de una variedad de herramientas que facilitan la creación, prueba y optimización de estas aplicaciones web progresivas.

Ejemplo 1

Lighthouse, herramienta de Google, audita la calidad de PWAs proporcionando puntuaciones para rendimiento, accesibilidad y SEO, facilitando la optimización de aplicaciones web progresivas.

Ejemplo 2

50%

Workbox, creada por Google, es una biblioteca que simplifica la implementación de service workers en PWAs, facilitando estrategias de almacenamiento en caché y gestión de recursos.

Aproximadamente el 40-50% de los desarrolladores web utilizan Visual Studio Code como su editor de código principal, según diversas encuestas y estadísticas.

Proceso de instalación, actualización de PWA y Componentes esenciales.

Proceso de Actualizacion

Proceso de Instalación

Componentes esenciales.

El service worker puede detectar automáticamente nuevas versiones de la PWA en el servidor.Cuando se detecta una actualización, el service worker actualiza los archivos en la caché local, descargando los recursos más recientes.

Un archivo JSON denominado "manifest" que proporciona metadatos sobre la aplicación, como nombre, iconos, colores y configuración de inicio en la pantalla de inicio.

Los usuarios pueden acceder a una Progressive Web App a través de su navegador web, como Google Chrome, Firefox o Safari. La PWA debe estar configurada para permitir la instalación.

manifiesto

El manifiesto web es un componente esencial de las Progressive Web Apps (PWAs) y proporciona información clave sobre la aplicación, permitiendo a los navegadores y a los usuarios comprender sus propiedades y comportamientos.

Características Principales del Manifiesto Web:

El manifiesto web en Progressive Web Apps (PWAs) es un archivo JSON crucial que contiene metadatos esenciales, define la instalación en la pantalla de inicio, especifica preferencias de visualización, describe funciones y capacidades, facilita la instalación rápida y mejora la optimización para motores de búsqueda, contribuyendo así a una experiencia de usuario cohesiva y atractiva.

Tema de Color

Metadatos Esenciales

Configuración de Pantalla de Inicio

+Principios Basicos

App Shell Arquitecture

Separación de Capas: La arquitectura de App Shell separa la interfaz de usuario del contenido dinámico. La App Shell es la estructura básica de la aplicación, mientras que el contenido es cargado de manera dinámica.

App Shell: La App Shell consiste en los elementos estructurales y de diseño de la aplicación, como la barra de navegación, menús y otros elementos visuales. Se almacena en caché para un acceso rápido y se carga inicialmente.

Es un enfoque de diseño utilizado en Progressive Web Apps (PWAs) para mejorar la experiencia del usuario al cargar y renderizar rápidamente el contenido.

Contenido Dinámico: El contenido, que puede cambiar según la interacción del usuario o las actualizaciones de datos, se carga de manera dinámica y se integra con la App Shell.

Service worker

Un Service Worker es un script de JavaScript que se ejecuta en segundo plano, independientemente de la página web, y proporciona funcionalidades poderosas para mejorar el rendimiento y la experiencia del usuario en Progressive Web Apps (PWAs) y sitios web en general.

Implementación Típica en PWAs: Registro: La página web registra el Service Worker mediante un archivo JavaScript. Una vez registrado, el Service Worker se instala y comienza a controlar la página. Instalación y Activación: Durante la instalación, se pueden almacenar en caché los recursos necesarios. La activación se produce después de la instalación y suele implicar la eliminación de versiones antiguas del Service Worker. Intercepción de Fetch: El Service Worker intercepta las solicitudes de recursos, permitiendo la gestión de respuestas desde la caché o la red, según la disponibilidad. Gestión de Eventos: Responde a eventos como notificaciones push, actualizaciones automáticas y otras interacciones, mejorando la experiencia del usuario.

Notificaciones

Mensajes simplificados que alertan a los usuarios para que interactúen con una aplicacion, incluso cuando está cerrada.

Solo funcionan si la aplicacióntiene acceso en segundo plano al dispositivo

• Comercio Electrónico
• Noticias y Medios
• Recordatorios
• Actualizaciones

API PushLas notificaciones push permiten que las PWA envíen mensajes relevantes a los usuarios, aprovechando un service worker en segundo plano.

Contenido

Rapidez: Las PWAs cargan rápidamente y ofrecen una experiencia inmediata para los usuarios .

Apariencia de app nativa: Aunque son aplicaciones web, se ven y se comportan como aplicaciones móviles nativas.

Seguridad: Utilizan HTTPS para proteger la comunicación entre el usuario y el servidor.

Offline y online: Deben funcionar incluso cuando no hay conexión. Utilizan service workers.

Notificaciones push: Las PWAs pueden enviar notificaciones automáticas.

Actualización: Las PWAs se actualizan automáticamente.

Diseño responsivo: Se adaptan a diferentes dispositivos.

La arquitectura interna de la aplicación

Proporcionan:

• Estructura
• Diseño
• Interactividad.

Caché : Almacena recursos estáticos (HTML, CSS, JavaScript, imágenes) Permite que la aplicación se cargue rápidamente.

Web App Manifest: Proporciona información sobre la aplicación, permite que la PWA se instale en dispositivos.

Base de Datos:

• Almacena inform ación del usuario
• Datos de la aplicación
• Configuraciones

APIs y Servicios Web: Para interactuar con servidores remotos para obtener datos, realizar operaciones CRUD

Seguridad:Por medio de https portegela información.

Proceso de configuración de PWA

Crear una aplicación web básica, funcional y optimizada para dispositivos móviles.

Agregar funcionalidades offline, almacena en caché recursos para permitir el acceso sin conexión.

Registrar tu PWAsegún los requisitos de cada plataforma

Habilitar HTTPSpara la seguridad del usuario

Pruebas y optimizacionesen diferentes dispositivos y navegadores

Añadir un archivo de manifiesto (JSON) que describa la aplicación (nombre, iconos, colores, etc.)

Habilitar el Service Worker (script) de JS que permita funciones offline y notificaciones.

Optimizar para dispositivos móvilesadaptada a diferentes pantallas

Características del archivo de manifiesto Web (JSON manifest)

Ubicación del archivo:Se coloca en la raíz de la aplicación con el nombre manifest.json

Información básica:nombre, autor, ícono y una descripción breve de la aplicación

Configuraciones de visualización:

• Colores temáticos
• Modo de inicio
• Orientación predeterminada
• Pantalla completa

Idiomas admitidos, Funcionalidades adicionales

Estructura en formato JSON

Elementos y características del renderizado del lado del cliente (CSR)

Se encarga de procesar y convertir datos directamente en la interfaz de usuario

Con la información obtenida, la página se vuelve interactiva para el usuario.

Flujo de trabajo: El usuario ingresa a la página, lo que genera una petición al servidor web donde está alojada la página.

El servidor entrega una página web en blanco.

El navegador comienza a cargar el contenido JavaScript de la página y hace peticiones a las APIs para obtener la información necesaria.

Elementos y características del renderizado del lado del servidor (SSR)

SSR: Server-side rendering, es una tecnología que se utiliza en el desarrollo de aplicaciones web y de páginas web con elementos dinámicos

Los lenguajes de programación típicos del renderizado del lado del servidor son

API´s de almacenamiento local, remoto y sincronización en PWA

API`S

Las APIs son el corazón de que cada aplicación web progresiva, pueda interactuar sin mayores complicaciones

PWA

Se instalan desde un navegador y pueden funcionar offline

La elección de las API dependerá de tus requisitos específicos y del nivel de compatibilidad que deseas alcanzar. Es posible que desees utilizar una combinación de estas API para lograr un sistema de almacenamiento y sincronización completo en tu PWA.

Función de los service workers

Ciclo de vida de un service workers

¿QUÉ ES?

función de los service workers

Responder a las solicitudes de la red

• Una ServiceWorker es capaz de alterar las respuestas del servidor, interceptar las peticiones del cliente, mandar información específica a ciertas direcciones

Interceptar

Modificar

Notificaciones push en PWA

Ventajas de las notificaciones push

Llegan a mas usuarios

Los sitios web necesitan lectores y vistas.

Personalizan el mensaje

El mensaje de cada notificacion es diferente y nos aporta imagen de marca

Aumenta la fidelizacion

El porcentaje en las notificaciones push es muy bajo

Son gratuitas

No se gasta monetariamente en este tipo de servicio

Son inmediatas

Nos ahorra tiempo a la hora de difundir nuestro articulo

Características del dispositivo accesibles desde PWA

Geolocalizacion Pueden obtener la ubicación del dispositivo del usuario, lo que permite experiencias basadas en la ubicación

Almacenamiento Local Pueden almacenar datos localmente en el dispositivo del usuario, lo que facilita el acceso offline y mejora la velocidad de carga.

Acceso a la camara Las PWAs pueden solicitar permisos para acceder a la cámara del dispositivo

Acceso al microfono Pueden solicitar permisos para acceder al micrófono, permitiendo la grabación de audio o la interacción con comandos de voz.

Notificaciones push Pueden enviar notificaciones push a los usuarios, manteniéndolos informados sobre actualizaciones importantes

Características de funcionamiento offline

Las Progressive Web Apps (PWAs) están diseñadas para ofrecer funcionalidades incluso cuando el usuario está offline.

Funciones básicas sin conexión

Modo "fallback

Almacenamiento Local

cacheo de recursos

Mensajes personalizados para offline

Sincronización offline-online

Service Workers

¿Tienes una idea?

Usa este espacio para añadir una interactividad genial. Incluye texto, imágenes, vídeos, tablas, PDFs… ¡incluso preguntas interactivas! Tip premium: Obten información de cómo interacciona tu audiencia:

• Visita las preferencias de Analytics;
• Activa el seguimiento de usuarios;
• ¡Que fluya la comunicación!

¿Tienes una idea?

¡Que fluya la comunicación!

Con las plantillas de Genially podrás incluir recursos visuales para dejar a tu audiencia con la boca abierta. También destacar alguna frase o dato concreto que se quede grabado a fuego en la memoria de tu público e incluso embeber contenido externo que sorprenda: vídeos, fotos, audios... ¡Lo que tú quieras! ¿Necesitas más motivos para crear contenidos dinámicos? Bien: el 90% de la información que asimilamos nos llega a través de la vista y, además, retenemos un 42% más de información cuando el contenido se mueve.

• Genera experiencias con tu contenido.
• Tiene efecto WOW. Muy WOW.
• Logra que tu público recuerde el mensaje.
• Activa y sorprende a tu audiencia.

¿Tienes una idea?

¡Que fluya la comunicación!

Con las plantillas de Genially podrás incluir recursos visuales para dejar a tu audiencia con la boca abierta. También destacar alguna frase o dato concreto que se quede grabado a fuego en la memoria de tu público e incluso embeber contenido externo que sorprenda: vídeos, fotos, audios... ¡Lo que tú quieras! ¿Necesitas más motivos para crear contenidos dinámicos? Bien: el 90% de la información que asimilamos nos llega a través de la vista y, además, retenemos un 42% más de información cuando el contenido se mueve.

• Genera experiencias con tu contenido.
• Tiene efecto WOW. Muy WOW.
• Logra que tu público recuerde el mensaje.
• Activa y sorprende a tu audiencia.

¿Tienes una idea?

Usa este espacio para añadir una interactividad genial. Incluye texto, imágenes, vídeos, tablas, PDFs… ¡incluso preguntas interactivas! Tip premium: Obten información de cómo interacciona tu audiencia:

• Visita las preferencias de Analytics;
• Activa el seguimiento de usuarios;
• ¡Que fluya la comunicación!

¿Tienes una idea?

¡Que fluya la comunicación!

Con las plantillas de Genially podrás incluir recursos visuales para dejar a tu audiencia con la boca abierta. También destacar alguna frase o dato concreto que se quede grabado a fuego en la memoria de tu público e incluso embeber contenido externo que sorprenda: vídeos, fotos, audios... ¡Lo que tú quieras! ¿Necesitas más motivos para crear contenidos dinámicos? Bien: el 90% de la información que asimilamos nos llega a través de la vista y, además, retenemos un 42% más de información cuando el contenido se mueve.

• Genera experiencias con tu contenido.
• Tiene efecto WOW. Muy WOW.
• Logra que tu público recuerde el mensaje.
• Activa y sorprende a tu audiencia.

¿Tienes una idea?

¡Que fluya la comunicación!

Con las plantillas de Genially podrás incluir recursos visuales para dejar a tu audiencia con la boca abierta. También destacar alguna frase o dato concreto que se quede grabado a fuego en la memoria de tu público e incluso embeber contenido externo que sorprenda: vídeos, fotos, audios... ¡Lo que tú quieras! ¿Necesitas más motivos para crear contenidos dinámicos? Bien: el 90% de la información que asimilamos nos llega a través de la vista y, además, retenemos un 42% más de información cuando el contenido se mueve.

• Genera experiencias con tu contenido.
• Tiene efecto WOW. Muy WOW.
• Logra que tu público recuerde el mensaje.
• Activa y sorprende a tu audiencia.

¿Tienes una idea?

Usa este espacio para añadir una interactividad genial. Incluye texto, imágenes, vídeos, tablas, PDFs… ¡incluso preguntas interactivas! Tip premium: Obten información de cómo interacciona tu audiencia:

• Visita las preferencias de Analytics;
• Activa el seguimiento de usuarios;
• ¡Que fluya la comunicación!

¿Tienes una idea?

¡Que fluya la comunicación!

Con las plantillas de Genially podrás incluir recursos visuales para dejar a tu audiencia con la boca abierta. También destacar alguna frase o dato concreto que se quede grabado a fuego en la memoria de tu público e incluso embeber contenido externo que sorprenda: vídeos, fotos, audios... ¡Lo que tú quieras! ¿Necesitas más motivos para crear contenidos dinámicos? Bien: el 90% de la información que asimilamos nos llega a través de la vista y, además, retenemos un 42% más de información cuando el contenido se mueve.

• Genera experiencias con tu contenido.
• Tiene efecto WOW. Muy WOW.
• Logra que tu público recuerde el mensaje.
• Activa y sorprende a tu audiencia.

¿Tienes una idea?

Usa este espacio para añadir una interactividad genial. Incluye texto, imágenes, vídeos, tablas, PDFs… ¡incluso preguntas interactivas! Tip premium: Obten información de cómo interacciona tu audiencia:

• Visita las preferencias de Analytics;
• Activa el seguimiento de usuarios;
• ¡Que fluya la comunicación!

¿Tienes una idea?

Usa este espacio para añadir una interactividad genial. Incluye texto, imágenes, vídeos, tablas, PDFs… ¡incluso preguntas interactivas! Tip premium: Obten información de cómo interacciona tu audiencia:

• Visita las preferencias de Analytics;
• Activa el seguimiento de usuarios;
• ¡Que fluya la comunicación!

¿Tienes una idea?

Usa este espacio para añadir una interactividad genial. Incluye texto, imágenes, vídeos, tablas, PDFs… ¡incluso preguntas interactivas! Tip premium: Obten información de cómo interacciona tu audiencia:

• Visita las preferencias de Analytics;
• Activa el seguimiento de usuarios;
• ¡Que fluya la comunicación!

¿Tienes una idea?

Usa este espacio para añadir una interactividad genial. Incluye texto, imágenes, vídeos, tablas, PDFs… ¡incluso preguntas interactivas! Tip premium: Obten información de cómo interacciona tu audiencia:

• Visita las preferencias de Analytics;
• Activa el seguimiento de usuarios;
• ¡Que fluya la comunicación!