El documento proporciona información sobre Progressive Web Apps (PWA). Explica que una PWA es una aplicación desarrollada únicamente con tecnología web que funciona de forma nativa, incluso sin conexión. Detalla las características clave de una PWA como iconos en la pantalla de inicio, modo inmersivo, pantalla de carga y notificaciones push nativas. Además, resalta las ventajas de las PWA sobre las aplicaciones nativas en términos de tiempo de instalación, actualizaciones y uso de recursos.

1. bit.do/openbiko
Instala la
Progressive Web App
del Biko Open Space
(mejor con Chrome de Android)

2. Progressive web apps
alberto.silva@biko2.com

3. El FUTURO de la
web móvil

4. esto… el
FUTURO?

5. El PRESENTE de
la web móvil

6. arrea, ¡que
llegamos TARDE!

7. Qué es una Progressive Web App
App desarrollada SÓLO con tecnología web

8. offline nunca muestra un error por falta de conectividad

9. Rápida carga al instante y responde con animaciones fluidas (60fps)

10. Inmersiva experiencia de uso como una app nativa
● icono en pantalla de
inicio
● modo inmersivo
● pantalla splash
● notificaciones
nativas

11. Icono en pantalla
de inicio
+
modo inmersivo

12. Pantalla splash

13. Notificaciones
push nativas

14. Ejemplos
https://voice-memos.appspot.com
https://meatscope.camera/
https://guitar-tuner.appspot.com/
https://smaller-pictures.appspot.com/
https://www.soundslice.com/
https://pwa.rocks

15. Por qué suponen
una revolución

16. 1
Porque devuelven las
apps a los estándares
de la open web

18. Apps nativas
vs
web apps
una batalla ganada por las
apps nativas desde 2007 a
2015

19. Pros de Apps nativas
Alto rendimiento en tareas complejas
Animaciones e interacciones suaves
Carga instantánea y soporte para offline
Fácilmente instalables desde una App Store
Fácilmente accesibles desde la pantalla de inicio

20. contras de Apps nativas
Alto tiempo de instalación
Tienes que buscarlas proactivamente
Actualizaciones muy complicadas
No son compartibles mediante un link
Excesivo consumo de espacio y de RAM

21. PWA: hemos parido un mulato!
Una PWA puede hablar de tú a tú a una app nativa:
Instalables, pero compartibles por link
Accesibles desde la pantalla de inicio y desde la web
Funcionan offline y con conexiones intermitentes
Envían notificaciones push
Se actualizan automáticamente, sin intervención del usuario
Se instalan mientras navegas, sin necesidad de ir a una App Store

22. 2
Porque trasladan a móvil
la misma filosofía de “la
red es el sistema
operativo” que tenemos en
escritorio

23. 3
Porque abren un
nuevo mercado

24. El desarrollo y mantenimiento de apps
nativas es MUY CARO y ESPECIALIZADO
Ahora, muchos proyectos podrán
permitirse hacer una app PWA...
...porque tenemos a miles de
profesionales senior en tecnologías
web!

25. 4
Porque mejoran
todas las cifras de
negocio

26. 92% menos datos para carga
inicial vs. app nativa
82% menos datos para completar
una transacción vs. app nativa

27. Mejora del 12% en el ratio
click-through
100% más ventas por usuarios que
llegan mediante notificaciones push
Mejora del 4x en re-captación de
usuarios

28. +104% de conversión de nuevos usuarios
2X más páginas vistas por sesión
Subida del 74% en el tiempo de visita

29. Y ahora…
manos a la obra

30. Se compone de
HTTPS
Web App Manifest
Web App Install Banners
App Shell
Service Worker
Web Push Notifications (opcional)

31. HTTPS
Imprescindible para que el Service Worker funcione
Para facilitar el desarrollo, los Service Worker sí funcionan en
“http://localhost”...
… pero sólo en localhost, y no en http://proyecto.dev ni
https://proyecto.dev
https://letsencrypt.org/ nos facilita la vida, pero no emite certificados
para dominios no públicos (.dev, .local, etc)

32. Se compone de
HTTPS
Web App Manifest
Web App Install Banners
App Shell
Service Worker
Web Push Notifications

33. Web App Manifest
Define los datos de la aplicación a la hora de instalarla de forma nativa:
● Nombre
● Icono a usar
● Color de la pantalla splash
● Orientación horizontal / vertical
● Modo inmersivo on/off
● Url de inicio al arrancar la app

34. manifest.json
{
"name": "Biko Open Space",
"short_name": "OpenBiko",
"icons": [
{
"src": "/images/touch/android-chrome-192x192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "/images/touch/android-chrome-384x384.png",
"sizes": "384x384",
"type": "image/png"
}
],
"start_url": "/",
"display": "standalone",
"background_color": "#3E4EB8",
"theme_color": "#a20b00"
}
Añadir al <header>
<link rel="manifest"
href="/manifest.json">
Manifest Generator
http://brucelawson.github.io/manif
est/

35. Previsualizando
manifest.json

36. Se compone de
HTTPS
Web App Manifest
Web App Install Banners
App Shell
Service Worker
Web Push Notifications

37. Web App Install Banners
Lo muestra Chrome según sus criterios: no lo podemos
definir nosotros
● Tener un manifest.json con:
○ short_name (para la pantalla de inicio)
○ name (para el banner)
○ un icono png de 144x144
○ un start_url
○ tener un Service Worker.
● Estar servido bajo HTTPS
● Hacer al menos dos visitas, con 5 minutos entre ellas

38. Aceptación de los banners

39. Web App Install Banners
Añadir a la pantalla de inicio de forma manual
● Nombre
● Icono a usar
● Color de la pantalla splash
● Orientación horizontal / vertical
● Modo inmersivo on/off
● Url de inicio al arrancar la app

40. Se compone de
HTTPS
Web App Manifest
Web App Install Banners
App Shell
Service Worker
Web Push Notifications

41. El App Shell no incluye
contenido ni
funcionalidades
Sigue la reglas del
critical rendering path

43. Se compone de
HTTPS
Web App Manifest
Web App Install Banners
App Shell
Service Worker
Web Push Notifications

44. Qué es un Service Worker
Script que corre desacoplado en el background (sin acceso al DOM)
Scope en función de la ruta en que esté. Normalmente se pone en el raíz y
se nombra /sw.js o /service-worker.js
Ahora tiene 3 funciones (más por venir):
1. Proxy de acceso a red para cacheo (permite modo offline)
2. Gestión de Web Push Notifications
3. Sincronización de datos en background

45. Cacheo de datos

46. No, es
transparente!

48. Ciclo de vida de un service worker
Si no tiene trabajo, se queda idle para no
consumir batería
Si el navegador instala otro SW distinto (se
comparan ficheros), el nuevo SW no se activa
hasta recargar la página (self.skipWaiting()
permite no esperar)
Recomiendo usar:
https://github.com/GoogleChrome/sw-precache
https://github.com/GoogleChrome/sw-toolbox

49. Debugear Service Workers

50. Service Worker cache

51. Se compone de
HTTPS
Web App Manifest
Web App Install Banners
App Shell
Service Worker
Web Push Notifications

52. Web Push NOtifications
No confundir con Push Notifications de Android / iOS
No confundir con Notifications locales del propio navegador al SO
Dependen de un Service Worker para funcionar
Se basan en un sistema de clave pública / privada y un servidor push (cada
navegador tiene el suyo)
Las claves también encriptan el mensaje que pasa por el servidor de push
Usar librerías de https://github.com/web-push-libs/

53. Push flow

55. ¡Gracias!
alberto.silva@biko2.com