Presentación en el marco del evento de BogotáJS, http://www.meetup.com/es-ES/BogotaJS/events/230039779/ donde se abordó el tema de Service Worker

1. Introducción Service
Worker
Jorge Rubiano.
@ostjh
https://github.com/Jorger

2. Agenda.
● Progressive Web Apps.
● manifest.json.
● Service Worker.
○ offline first.
○ Push Notifications

3. Progressive Web Apps
● Las Aplicaciones Web Progresivas son experiencias
que combinan lo mejor de la Web y las Aplicaciones
Nativas.
● No requieren instalación. El usuario construye
progresivamente una relación con la aplicación a
través del tiempo, cada vez se convierte más y más
potentes.
● Cargan más rápido y envían notificaciones
relevantes.
● Proveen íconos en la Pantalla de Inicio y te
sumergen en modo Pantalla Completa.
https://developers.google.com/web/progressive-web-apps
https://operasoftware.github.io/pwa-list/

4. Progressive Web Apps
https://airhorner.com/
https://goo.gl/asmjUX

5. manifest.json
https://manifest-validator.appspot.com/
https://jorger.github.io/shoot/

6. manifest.json
https://youtu.be/isyEDFT4Lfk

7. manifest.json

8. Service Worker
● Los Service Workers son scripts que actúan como proxy del lado del
cliente.
● El código JavaScript puede interceptar las solicitudes de la red, crear un
caché granular basado en las necesidades únicas de la aplicación.
● Permite, entre otras cosas, la creación de experiencias sin conexión
(offline) que funcionan en su totalidad.
● Ya que los Service Workers corren en segundo Plano (background), se
abren muchas posibilidades para la web que antes solo estaban
disponibles en plataformas nativas (Push Notifications)

9. Características: Service Worker
● Scripts que se ejecutan “en segundo plano”,
independientemente de la página original
● fetch: se ha hecho una solicitud HTTP
● Son asíncronos
● Su API usa promesas
● No tienen acceso al DOM ni a la mayoría de
APIs síncronas (localStorage) , solo al resto
de APIs asíncronos

10. Cache API
Permite gestionar caches web de modo sencillo.
Asociado al API de Service Workers
● Crear una cache (caches.open)
● Añadir recursos a la cache (cache.addAll)
● Comprobar si una petición encaja con la cache
(caches.match)
● Es un API asíncrono, basado en promesas

11. Cache API
https://github.com/coonsta/cache-polyfill

12. App Cache
Antes de la aparición de Service Worker ya existía una tecnología que
permitía entregar una experiencia Offline, llamada App Cache.
http://www.html5rocks.com/tutorials/appcache/beginner/

13. App Cache
http://caniuse.com/#feat=offline-apps

14. Service Worker/App Cache
https://github.com/NekR/offline-plugin
Medium - Addy Osmani - Totally Tooling Tears
https://goo.gl/FpTqYa

15. Service Worker/App Cache
https://groups.google.com/a/chromium.org/forum/#!topic/blink-dev/UKF8cK0EwMI
Medium - Addy Osmani - Totally Tooling Tears
https://goo.gl/FpTqYa

16. Localhost / https

17. Service Worker
http://www.html5rocks.com/en/tutorials/service-worker/introduction/

18. Service Worker
https://github.com/Jorger/shoot/blob/master/index.html#L26

19. Service Worker (install)
https://github.com/Jorger/shoot/blob/master/sw.js#L3

20. Service Worker (activate)
https://github.com/Jorger/shoot/blob/master/sw.js#L24

21. Service Worker (fetch)
https://github.com/Jorger/shoot/blob/master/sw.js#L28

22. Service Worker
https://jakearchibald.com/2014/offline-cookbook/#network-falling-back-to-cache

23. sw-toolbox
https://github.com/GoogleChrome/sw-toolbox/

24. Debugging SW
chrome://serviceworker-internals/

25. Debugging SW
Terminal tips & tricks, DevTools + Service Worker Updates - Addy Osmani
https://goo.gl/YEu8bH

26. DEMO

27. Service Worker / Push Notifications

28. Service Worker / Push Notifications
Desde hace tiempo las aplicaciones nativas pueden
recibir notificaciones push
También es posible en aplicaciones web con la ayuda
de:
● Service Workers
● Notifications.
● Push API.
● Colaboración de un servidor de mensajes push
(por ejemplo GCM-Google Cloud
● Messaging)
Las notificaciones se reciben aunque el navegador
esté en otra web o cerrado
Por ahora solo en Android (Chrome/Firefox). Safari no
implementa el estándar de push, sino uno propio, y
además solo en OSX, no en iOS

29. Google Cloud Messaging (GCM)
Your first push notifications web app
https://goo.gl/o6rQnq
manifest.json

30. Google Cloud Messaging (GCM)
http://mobilemerit.com/google-cloud-messaging/

31. Eventos Push
https://goo.gl/o6rQnq

32. Eventos Push
https://goo.gl/o6rQnq

33. DEMO

34. “Instalar” un WebApp.
https://jorger.github.io/dots/

35. “Instalar” un WebApp.
https://goo.gl/KN9wYK
Totally Tooling Tears - Matt Gaunt
Issue 2: Electron.js, Add to Homescreen on Desktop…

36. Soporte.
https://goo.gl/KN9wYK
Totally Tooling Tears - Matt Gaunt
Issue 2: Electron.js, Add to Homescreen on Desktop…

37. Soporte.
https://jakearchibald.github.io/isserviceworkerready/

38. Fuentes
● https://serviceworke.rs/
● https://jakearchibald.github.io/isserviceworkerready/
● https://dev.opera.com/blog/pwa-taipei/
● http://www.slideshare.net/brucelawson/bruce-lawson-progressive-web-apps-the-future-
of-apps
● https://www.smashingmagazine.com/2016/02/making-a-service-worker/
● https://developers.google.com/web/fundamentals/primers/service-worker/
● https://manifest-validator.appspot.com/
● http://offlinefirst.org/
● https://developers.google.com/web/progressive-web-apps#getstarted
● http://www.html5rocks.com/en/tutorials/service-worker/introduction/?
redirect_from_locale=es
● https://medium.com/totally-tooling-tears
● https://github.com/Jorger