introducción a service worker - bogotajs
TRANSCRIPT
Introducción Service Worker
Jorge Rubiano.@ostjh
https://github.com/Jorger
Agenda.● Progressive Web Apps.● manifest.json.● Service Worker.
○ offline first.○ Push Notifications
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/
Progressive Web Apps
https://airhorner.com/https://goo.gl/asmjUX
manifest.json
https://manifest-validator.appspot.com/
https://jorger.github.io/shoot/
manifest.json
https://youtu.be/isyEDFT4Lfk
manifest.json
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)
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
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
Cache API
https://github.com/coonsta/cache-polyfill
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/
App Cache
http://caniuse.com/#feat=offline-apps
Service Worker/App Cache
https://github.com/NekR/offline-plugin
Medium - Addy Osmani - Totally Tooling Tearshttps://goo.gl/FpTqYa
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
Localhost / https
Service Worker
http://www.html5rocks.com/en/tutorials/service-worker/introduction/
Service Worker
https://github.com/Jorger/shoot/blob/master/index.html#L26
Service Worker (install)
https://github.com/Jorger/shoot/blob/master/sw.js#L3
Service Worker (activate)
https://github.com/Jorger/shoot/blob/master/sw.js#L24
Service Worker (fetch)
https://github.com/Jorger/shoot/blob/master/sw.js#L28
Service Worker
https://jakearchibald.com/2014/offline-cookbook/#network-falling-back-to-cache
sw-toolbox
https://github.com/GoogleChrome/sw-toolbox/
Debugging SW
chrome://serviceworker-internals/
Debugging SW
Terminal tips & tricks, DevTools + Service Worker Updates - Addy Osmanihttps://goo.gl/YEu8bH
DEMO
Service Worker / Push Notifications
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
Google Cloud Messaging (GCM)
Your first push notifications web apphttps://goo.gl/o6rQnq
manifest.json
Google Cloud Messaging (GCM)
http://mobilemerit.com/google-cloud-messaging/
DEMO
“Instalar” un WebApp.
https://jorger.github.io/dots/
“Instalar” un WebApp.
https://goo.gl/KN9wYK
Totally Tooling Tears - Matt GauntIssue 2: Electron.js, Add to Homescreen on Desktop…
Soporte.
https://goo.gl/KN9wYK
Totally Tooling Tears - Matt GauntIssue 2: Electron.js, Add to Homescreen on Desktop…
Soporte.
https://jakearchibald.github.io/isserviceworkerready/
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