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/

Eventos Push

https://goo.gl/o6rQnq

Eventos Push

https://goo.gl/o6rQnq

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