introducción a service worker - bogotajs
TRANSCRIPT
![Page 1: Introducción a Service Worker - BogotaJS](https://reader030.vdocuments.net/reader030/viewer/2022020301/58ed366f1a28ab2d148b45ad/html5/thumbnails/1.jpg)
Introducción Service Worker
Jorge Rubiano.@ostjh
https://github.com/Jorger
![Page 2: Introducción a Service Worker - BogotaJS](https://reader030.vdocuments.net/reader030/viewer/2022020301/58ed366f1a28ab2d148b45ad/html5/thumbnails/2.jpg)
Agenda.● Progressive Web Apps.● manifest.json.● Service Worker.
○ offline first.○ Push Notifications
![Page 3: Introducción a Service Worker - BogotaJS](https://reader030.vdocuments.net/reader030/viewer/2022020301/58ed366f1a28ab2d148b45ad/html5/thumbnails/3.jpg)
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/
![Page 4: Introducción a Service Worker - BogotaJS](https://reader030.vdocuments.net/reader030/viewer/2022020301/58ed366f1a28ab2d148b45ad/html5/thumbnails/4.jpg)
Progressive Web Apps
https://airhorner.com/https://goo.gl/asmjUX
![Page 5: Introducción a Service Worker - BogotaJS](https://reader030.vdocuments.net/reader030/viewer/2022020301/58ed366f1a28ab2d148b45ad/html5/thumbnails/5.jpg)
manifest.json
https://manifest-validator.appspot.com/
https://jorger.github.io/shoot/
![Page 6: Introducción a Service Worker - BogotaJS](https://reader030.vdocuments.net/reader030/viewer/2022020301/58ed366f1a28ab2d148b45ad/html5/thumbnails/6.jpg)
manifest.json
https://youtu.be/isyEDFT4Lfk
![Page 7: Introducción a Service Worker - BogotaJS](https://reader030.vdocuments.net/reader030/viewer/2022020301/58ed366f1a28ab2d148b45ad/html5/thumbnails/7.jpg)
manifest.json
![Page 8: Introducción a Service Worker - BogotaJS](https://reader030.vdocuments.net/reader030/viewer/2022020301/58ed366f1a28ab2d148b45ad/html5/thumbnails/8.jpg)
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)
![Page 9: Introducción a Service Worker - BogotaJS](https://reader030.vdocuments.net/reader030/viewer/2022020301/58ed366f1a28ab2d148b45ad/html5/thumbnails/9.jpg)
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
![Page 10: Introducción a Service Worker - BogotaJS](https://reader030.vdocuments.net/reader030/viewer/2022020301/58ed366f1a28ab2d148b45ad/html5/thumbnails/10.jpg)
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
![Page 11: Introducción a Service Worker - BogotaJS](https://reader030.vdocuments.net/reader030/viewer/2022020301/58ed366f1a28ab2d148b45ad/html5/thumbnails/11.jpg)
Cache API
https://github.com/coonsta/cache-polyfill
![Page 12: Introducción a Service Worker - BogotaJS](https://reader030.vdocuments.net/reader030/viewer/2022020301/58ed366f1a28ab2d148b45ad/html5/thumbnails/12.jpg)
App CacheAntes 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/
![Page 13: Introducción a Service Worker - BogotaJS](https://reader030.vdocuments.net/reader030/viewer/2022020301/58ed366f1a28ab2d148b45ad/html5/thumbnails/13.jpg)
App Cache
http://caniuse.com/#feat=offline-apps
![Page 14: Introducción a Service Worker - BogotaJS](https://reader030.vdocuments.net/reader030/viewer/2022020301/58ed366f1a28ab2d148b45ad/html5/thumbnails/14.jpg)
Service Worker/App Cache
https://github.com/NekR/offline-plugin
Medium - Addy Osmani - Totally Tooling Tearshttps://goo.gl/FpTqYa
![Page 15: Introducción a Service Worker - BogotaJS](https://reader030.vdocuments.net/reader030/viewer/2022020301/58ed366f1a28ab2d148b45ad/html5/thumbnails/15.jpg)
Service Worker/App Cache
https://groups.google.com/a/chromium.org/forum/#!topic/blink-dev/UKF8cK0EwMI
Medium - Addy Osmani - Totally Tooling Tearshttps://goo.gl/FpTqYa
![Page 16: Introducción a Service Worker - BogotaJS](https://reader030.vdocuments.net/reader030/viewer/2022020301/58ed366f1a28ab2d148b45ad/html5/thumbnails/16.jpg)
Localhost / https
![Page 17: Introducción a Service Worker - BogotaJS](https://reader030.vdocuments.net/reader030/viewer/2022020301/58ed366f1a28ab2d148b45ad/html5/thumbnails/17.jpg)
Service Worker
http://www.html5rocks.com/en/tutorials/service-worker/introduction/
![Page 18: Introducción a Service Worker - BogotaJS](https://reader030.vdocuments.net/reader030/viewer/2022020301/58ed366f1a28ab2d148b45ad/html5/thumbnails/18.jpg)
Service Worker
https://github.com/Jorger/shoot/blob/master/index.html#L26
![Page 19: Introducción a Service Worker - BogotaJS](https://reader030.vdocuments.net/reader030/viewer/2022020301/58ed366f1a28ab2d148b45ad/html5/thumbnails/19.jpg)
Service Worker (install)
https://github.com/Jorger/shoot/blob/master/sw.js#L3
![Page 20: Introducción a Service Worker - BogotaJS](https://reader030.vdocuments.net/reader030/viewer/2022020301/58ed366f1a28ab2d148b45ad/html5/thumbnails/20.jpg)
Service Worker (activate)
https://github.com/Jorger/shoot/blob/master/sw.js#L24
![Page 21: Introducción a Service Worker - BogotaJS](https://reader030.vdocuments.net/reader030/viewer/2022020301/58ed366f1a28ab2d148b45ad/html5/thumbnails/21.jpg)
Service Worker (fetch)
https://github.com/Jorger/shoot/blob/master/sw.js#L28
![Page 22: Introducción a Service Worker - BogotaJS](https://reader030.vdocuments.net/reader030/viewer/2022020301/58ed366f1a28ab2d148b45ad/html5/thumbnails/22.jpg)
Service Worker
https://jakearchibald.com/2014/offline-cookbook/#network-falling-back-to-cache
![Page 23: Introducción a Service Worker - BogotaJS](https://reader030.vdocuments.net/reader030/viewer/2022020301/58ed366f1a28ab2d148b45ad/html5/thumbnails/23.jpg)
sw-toolbox
https://github.com/GoogleChrome/sw-toolbox/
![Page 24: Introducción a Service Worker - BogotaJS](https://reader030.vdocuments.net/reader030/viewer/2022020301/58ed366f1a28ab2d148b45ad/html5/thumbnails/24.jpg)
Debugging SW
chrome://serviceworker-internals/
![Page 25: Introducción a Service Worker - BogotaJS](https://reader030.vdocuments.net/reader030/viewer/2022020301/58ed366f1a28ab2d148b45ad/html5/thumbnails/25.jpg)
Debugging SW
Terminal tips & tricks, DevTools + Service Worker Updates - Addy Osmanihttps://goo.gl/YEu8bH
![Page 26: Introducción a Service Worker - BogotaJS](https://reader030.vdocuments.net/reader030/viewer/2022020301/58ed366f1a28ab2d148b45ad/html5/thumbnails/26.jpg)
DEMO
![Page 27: Introducción a Service Worker - BogotaJS](https://reader030.vdocuments.net/reader030/viewer/2022020301/58ed366f1a28ab2d148b45ad/html5/thumbnails/27.jpg)
Service Worker / Push Notifications
![Page 28: Introducción a Service Worker - BogotaJS](https://reader030.vdocuments.net/reader030/viewer/2022020301/58ed366f1a28ab2d148b45ad/html5/thumbnails/28.jpg)
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 noimplementa el estándar de push, sino uno propio, y además solo en OSX, no en iOS
![Page 29: Introducción a Service Worker - BogotaJS](https://reader030.vdocuments.net/reader030/viewer/2022020301/58ed366f1a28ab2d148b45ad/html5/thumbnails/29.jpg)
Google Cloud Messaging (GCM)
Your first push notifications web apphttps://goo.gl/o6rQnq
manifest.json
![Page 30: Introducción a Service Worker - BogotaJS](https://reader030.vdocuments.net/reader030/viewer/2022020301/58ed366f1a28ab2d148b45ad/html5/thumbnails/30.jpg)
Google Cloud Messaging (GCM)
http://mobilemerit.com/google-cloud-messaging/
![Page 33: Introducción a Service Worker - BogotaJS](https://reader030.vdocuments.net/reader030/viewer/2022020301/58ed366f1a28ab2d148b45ad/html5/thumbnails/33.jpg)
DEMO
![Page 34: Introducción a Service Worker - BogotaJS](https://reader030.vdocuments.net/reader030/viewer/2022020301/58ed366f1a28ab2d148b45ad/html5/thumbnails/34.jpg)
“Instalar” un WebApp.
https://jorger.github.io/dots/
![Page 35: Introducción a Service Worker - BogotaJS](https://reader030.vdocuments.net/reader030/viewer/2022020301/58ed366f1a28ab2d148b45ad/html5/thumbnails/35.jpg)
“Instalar” un WebApp.
https://goo.gl/KN9wYK
Totally Tooling Tears - Matt GauntIssue 2: Electron.js, Add to Homescreen on Desktop…
![Page 36: Introducción a Service Worker - BogotaJS](https://reader030.vdocuments.net/reader030/viewer/2022020301/58ed366f1a28ab2d148b45ad/html5/thumbnails/36.jpg)
Soporte.
https://goo.gl/KN9wYK
Totally Tooling Tears - Matt GauntIssue 2: Electron.js, Add to Homescreen on Desktop…
![Page 37: Introducción a Service Worker - BogotaJS](https://reader030.vdocuments.net/reader030/viewer/2022020301/58ed366f1a28ab2d148b45ad/html5/thumbnails/37.jpg)
Soporte.
https://jakearchibald.github.io/isserviceworkerready/
![Page 38: Introducción a Service Worker - BogotaJS](https://reader030.vdocuments.net/reader030/viewer/2022020301/58ed366f1a28ab2d148b45ad/html5/thumbnails/38.jpg)
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