Este documento habla sobre las Progressive Web Apps (PWAs), que ofrecen una experiencia similar a las aplicaciones nativas a través de un navegador web. Explica que las PWAs son accesibles desde cualquier dispositivo con un navegador, funcionan sin conexión gracias al Service Worker, y pueden instalarse como aplicaciones de escritorio. Resalta que las PWAs aprovechan las ventajas de la web como su escalabilidad global y acceso abierto, mientras ofrecen una experiencia de usuario comparable a las aplicaciones móviles.

1. Progressive Web Apps
¿Y eso con qué se come?

2. Diego Coy
Difundir conocimiento en tecnologías modernas
● Angular Colombia
● GDG Bogotá
● Facebook Developers Circle Bogotá
● WTM Bogotá
● Mentoría en tecnología para startups
@unJavaScripter
Gestor de comunidades | Desarrollador
Google Developer Expert && Microsoft MVP
diegocoy.com

3. Question Friendly Talk
Aprovechen que es gratis y pregunten todo lo que
quieran
⚠

4. “App-like experience”
Aplicaciones (sitios) web que en un dispositivo móvil
ofrecen una experiencia similar a la de una
aplicación nativa

5. Aplicaciones Nativas
☺ Fácil acceso (una vez instaladas)
☺ Contenido disponible siempre *
☺ Contacto (engagement/re engagement) con el usuario
☹ Métodos de distribución limitados (tiendas)

6. Instalación de una app
nativa

8. 6
Interacciones

9. Métodos de distribución en
la web
Manual:
Enlace: Mi Aplicación web

10. Abrir el navegador
Algo me motivó a acceder a la
aplicación y debo entrar a su sitio web
usando el navegador de mi teléfono
Total de interacciones: 1

11. Escribir la
dirección web
(URL)
Escribo la URL de la aplicación web
que deseo visitar
Total de interacciones: 3

12. Esperar...
Espero a que se complete la carga de
la aplicación
Total de interacciones: 3

13. Disfrutar
En este momento ya puedo usar la
aplicación web
Total de
interacciones
3

14. App Web ☺
App Nativa ☹
Esta es la gran ventaja que tienen las aplicaciones
web en comparación a las aplicaciones nativas

15. La Web
● Abierta
● Escala global
● Cualquier dispositivo*
● Experiencia de uso compartido
● Accesible
* Con un navegador web

16. Responsiveness
Que el contenido se desparrame en la pantalla

17. Acceso desde
cualquier tamaño
Desde un teléfono, hasta lo que traiga
el futuro.
La aplicación debe ser funcional en
todos los casos.
Animación: Karol Podleśny
https://dribbble.com/shots/1277779-Morphing-devices-GIF

18. La seguridad ante todo

19. letsencrypt.org

20. PWA

21. ● Fast
● Integrated
● Reliable
● Engaging

22. Progressive enhancement
El contenido es el núcleo de las aplicaciones, el
resto se agrega de a poquitos si se puede

23. Roscón
Toda app moderna puede
representarse en un roscón

24. Acceso directo en el
escritorio
Aplicaciones a un tap de distancia

25. Nos ganamos un espacio en el <3 y el
escritorio de nuestros usuarios
Web App install
banner

27. manifest.json
Lo referenciamos desde el archivo
index.html de nuestra aplicación:
<link rel="manifest"
href="manifest.json">
Pro tip: Agregar la propiedad “scope”
https://developers.google.com/web/fundamentals/web-app-manifest

28. Instalación manual desde
Chrome 68
https://developers.google.com/web/fundamentals/ap
p-install-banners/

29. Dinosaur mode!

30. La experiencia
Offline
Controlada por el navegador

31. Service Worker al rescate

32. Service Worker
¡Un proceso que siempre está activo y
que tiene muchos superpoderes!
● Offline
● App install
● Notificaciones push
* Sólo funciona si el sitio está siendo
cargado desde HTTPS

33. Service Worker
Registro
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('/service-worker.js')
.then(function(registration) {
console.log('Registration successful');
})
.catch(function(error) {
console.log('Service worker registration failed:', error);
});
}

34. Service Worker
Fetch
Caching Files with Service Worker
https://developers.google.com/web/ilt/pwa/caching-files-with-service-worker
// El "handler" más básico para fetch
slef.addEventlistener('fetcn', event => {
event.respondWith(fetch(event.request));
});
// ...
// Devolviendo lo que se encuentre en cache
// Y si no hay, ahí sí mando la solicitud a Internet
self.addEventListener('fetch', event => {
event.respondWith(
caches.match(event.request).then(response => {
return response || fetch(event.request);
})
);
});
// ...

35. Demo
airhorner.com

36. Workbox
https://developers.google.com/web/tools/workbox/

37. PWA Toolkit
Ionic + Stencil

38. PWA Starter Kit
Web Components ~ Polymer

39. Notificaciones Push

40. Notification API
Push API
https://developers.google.com/web/fundamentals/push-notifications/display-a-notification
self.addEventListener('push', function(event) {
const title = 'Credit Card';
const options = {
body: event.data.text(),
icon: 'images/icon.png',
badge: 'images/badge.png'
};
event.waitUntil(self.registration.showNotification(title, options));
});

41. Chicanear time

42. Lighthouse
https://developers.google.com/web/too
ls/lighthouse/

43. Desktop/ chrome/ spotify
//...

44. Microsoft Store

45. Desktop PWAs
Chrome OS
Linux, Windows, MacOS en camino
https://developers.google.com/web/updates/2018/05/dpwa

46. https://jakearchibald.github.io/isserviceworkerready/

47. https://youtu.be/NITk4kXMQDw?t=6m37s

48. Links
● Chrome: Progressive Web Apps
● Caching Files with Service Worker
● Displaying a notification
The Web App Manifest
● Let’s Encrypt
● Lighthouse
● Workbox
● PWA Toolkit
● PWA Starter Kit
○ Repo
○ Charla (se van a enamorar)
● Progressive Web Apps in the Microsoft Store
● Desktop PWAs
● Is ServiceWorker Ready Yet?
Gente para seguir:
● Yutub
○ Chrome Developers
● Twister
○ @jaffathecake|
○ @DasSurma
○ @gauntface
○ @sw12
○ @petele
○ @paul_irish
○ @notwaldorf
○ @ChromeDevTools
○ @ChromiumDev
○ @____lighthouse

49. Que gracias
*Aplausos*