Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Introducción a Service Worker - BogotaJS

1,415 views

Published on

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

Published in: Education
  • Be the first to comment

Introducción a Service Worker - BogotaJS

  1. 1. Introducción Service Worker Jorge Rubiano. @ostjh https://github.com/Jorger
  2. 2. Agenda. ● Progressive Web Apps. ● manifest.json. ● Service Worker. ○ offline first. ○ Push Notifications
  3. 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. 4. Progressive Web Apps https://airhorner.com/ https://goo.gl/asmjUX
  5. 5. manifest.json https://manifest-validator.appspot.com/ https://jorger.github.io/shoot/
  6. 6. manifest.json https://youtu.be/isyEDFT4Lfk
  7. 7. manifest.json
  8. 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. 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. 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. 11. Cache API https://github.com/coonsta/cache-polyfill
  12. 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. 13. App Cache http://caniuse.com/#feat=offline-apps
  14. 14. Service Worker/App Cache https://github.com/NekR/offline-plugin Medium - Addy Osmani - Totally Tooling Tears https://goo.gl/FpTqYa
  15. 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. 16. Localhost / https
  17. 17. Service Worker http://www.html5rocks.com/en/tutorials/service-worker/introduction/
  18. 18. Service Worker https://github.com/Jorger/shoot/blob/master/index.html#L26
  19. 19. Service Worker (install) https://github.com/Jorger/shoot/blob/master/sw.js#L3
  20. 20. Service Worker (activate) https://github.com/Jorger/shoot/blob/master/sw.js#L24
  21. 21. Service Worker (fetch) https://github.com/Jorger/shoot/blob/master/sw.js#L28
  22. 22. Service Worker https://jakearchibald.com/2014/offline-cookbook/#network-falling-back-to-cache
  23. 23. sw-toolbox https://github.com/GoogleChrome/sw-toolbox/
  24. 24. Debugging SW chrome://serviceworker-internals/
  25. 25. Debugging SW Terminal tips & tricks, DevTools + Service Worker Updates - Addy Osmani https://goo.gl/YEu8bH
  26. 26. DEMO
  27. 27. Service Worker / Push Notifications
  28. 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. 29. Google Cloud Messaging (GCM) Your first push notifications web app https://goo.gl/o6rQnq manifest.json
  30. 30. Google Cloud Messaging (GCM) http://mobilemerit.com/google-cloud-messaging/
  31. 31. Eventos Push https://goo.gl/o6rQnq
  32. 32. Eventos Push https://goo.gl/o6rQnq
  33. 33. DEMO
  34. 34. “Instalar” un WebApp. https://jorger.github.io/dots/
  35. 35. “Instalar” un WebApp. https://goo.gl/KN9wYK Totally Tooling Tears - Matt Gaunt Issue 2: Electron.js, Add to Homescreen on Desktop…
  36. 36. Soporte. https://goo.gl/KN9wYK Totally Tooling Tears - Matt Gaunt Issue 2: Electron.js, Add to Homescreen on Desktop…
  37. 37. Soporte. https://jakearchibald.github.io/isserviceworkerready/
  38. 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

×