Las PWA (aplicaciones web progresivas) permiten que las aplicaciones web se comporten como aplicaciones nativas al permitir el uso sin conexión, notificaciones push y acceso a funciones del sistema operativo. El documento describe cómo las PWA utilizan service workers y almacenamiento para funcionar como aplicaciones móviles y destaca algunas ventajas como la rapidez de carga y las actualizaciones frecuentes frente a limitaciones como el uso de recursos.

1. Propuesta de Colaboración Profesional
28 de Agosto de 2017Progressive Web Applications
Víctor Enrique Elena Redondo
1/06/2018
-DESAYUNOS CON TALENTO-

2. Presentación
- Optimización, rendimiento y eficiencia
- Arreglar cosas
- Montañismo
- Deporte
- …..

3. Motivo de la Charla
http://marcodetrabajo.com
- ¡Ya están aquí!
- “Enseñando se aprende mejor”
- 0 código
- Ameno
- Despertar interés
- Posibles casos reales
- Nicho de mercado

4. Qué son las PWA
• Aplicaciones web con apariencia de apps
• Pueden funcionar sin conexión
• Notificaciones push
• Se ejecutan en el navegador
• Modelo Shell App
• Uso del sistema operativo
• Iconos de app (misma instancia)

5. Características de las PWA
• Progresiva (todos los usuarios)
• Adaptable
• Independiente de la conectividad
• Estilo app
• Fresca (actualizaciones)
• Segura (https)
• Descubrible (manifiesto W3C)
• Posibilidad de volver a interactuar
• Instalable
• Vinculable (links)

6. Cómo funcionan – Modelo Shell App
- Carga la primera vez y se guarda en caché
- Mínimo código HTML, CSS y JS para funcionar
- Apariencia de APP

7. Cómo funcionan – Service Workers
- Ficheros bloqueantes asíncronos
- Corren en un hilo distinto al principal
- Se registran en el navegador mediante JS
- Comunicación servidor-cliente
- Toma de decisiones en función del cliente

8. Organización – CV Nombre Apellido
Cómo funcionan – Almacenamiento
- Cache API: Recursos esenciales. Basada en promesas
- IndexedDB: Resto de datos. Basada en eventos

9. Cómo funcionan – Estructura

10. Visibilidad
PWA – SEO VS Nativas - ASO

11. Datos a tener en cuenta
• Los usuarios de dispositivos móviles utilizan 4 veces más páginas web
que aplicaciones móviles.
• El proceso de instalación de una aplicación tiene demasiados pasos y
en cada uno de ellos se pierde a un 20% de potenciales usuarios.
• El 87% del internet en móviles es consumido a través de apps por eso
una PWA (look & feel de app) es, a priori, un valor seguro en este
sentido.

12. Ventajas e Inconvenientes
Ventajas: (APPs: Viajes, ventas, música, banca…)
- Rapidez de carga
- Posibilidad de uso offline
- Semejanza a app nativa para el usuario (con sus ventajas:
actualizaciones periódicas, p.e)
- Muy aptas para apps con navegación invariable pero con cambio en los
datos
- Coste y mantenimiento. 1*n. También para el SEO
Inconvenientes: (APPs: Juegos, redes sociales…)
- PWA usan más recursos, gastan más batería. Baterías cada vez duran
más
- Limitación de acceso a dispositivos del smartphone (ejemplo: algunas
funcionalidades de la cámara)
- No aptas para aplicaciones complejas. Lenguajes de alto nivel.

13. Casos Reales
- https://outweb.io/
- https://chimbori.github.io/lite-apps/library/
- https://pwa-directory.appspot.com/
- https://roneetkumar.github.io/webstore/index.html?homescreen=1
- https://pwa.rocks/

14. Conclusiones
- ¿El cliente va a usar navegadores que no sean compatibles?
- Necesidades: ¿Manejar datos? ¿Complejidad? ¿Uso del SO?
- Cosas asombrosas que se pueden hacer con las apis de acceso a los
dispositivos: https://developer.mozilla.org/es/docs/WebAPI
- Con la app Hermit (para Android) es posible crear una PWA a partir de
cualquier sitio web.

15. ¡MUCHAS GRACIAS A TOD@S!
https://www.youtube.com/watch?v=LZjQ25NRV-E&hl=es
https://medium.com/above-the-folk/progressive-web-apps-ventajas-y-desventajas-
ac0e47491d33
https://androidayuda.com/2017/12/18/aplicaciones-web-progresivas-guia/
www.marcodetrabajo.com
https://developers.google.com/web/fundamentals/codelabs/your-first-
pwapp/?hl=es
https://desarrolloweb.com/manuales/manual-progressive-web-apps.html
https://developers.google.com/web/fundamentals/primers/service-workers/?hl=es
https://medium.com/dev-channel/why-progressive-web-apps-vs-native-is-the-
wrong-question-to-ask-fb8555addcbb

16. MADRID: C/ Via de los Poblados, 1 - Edificio D, planta 1ª //
Edificio C, planta 4ª, oficinas B y D
Parque Empresarial Alvento - Distrito Hortaleza.
28033 Madrid.
 Tel.: 914 177 484
BARCELONA: Av. Alcalde Barnils, 64-68, Local 2, planta 2ª,
Bloque C.
08174 Sant Cugat del Vallés. Barcelona.
 Tel.: 932 257 430
ZARAGOZA: Paseo Independencia, 8, duplicado. Planta 2.
50004 Zaragoza.
 Tel.: 976 224 237