Upgrade to PRO for Only $50/Year—Limited-Time Offer! 🔥

An Introduction to Service Workers - DevDay 2016

Phil Nash
September 15, 2016

An Introduction to Service Workers - DevDay 2016

Service Workers are the biggest thing to hit the browser since XMLHttpRequest. We'll take a look at what the Service Worker can do for your app and more importantly, your users. We'll see the surprisingly small amount of code you need to get started with a Service Worker and finally we'll take a look at Progressive Web Apps and how the Service Worker will take part in a revolution for web applications.

Links:

Offline apps course on Udacity: https://www.udacity.com/course/offline-web-applications--ud899

The demo SMS app: https://github.com/philnash/sms-messages-app

HTML5Rocks intro to service worker: http://www.html5rocks.com/en/tutorials/service-worker/introduction/
Service Worker spec: https://slightlyoff.github.io/ServiceWorker/spec/service_worker/
Is Service Worker Ready Yet? https://jakearchibald.github.io/isserviceworkerready/
And resources: https://jakearchibald.github.io/isserviceworkerready/resources.html
Service Worker Cookbook: http://www.serviceworke.rs/
Addy Osmani - Offline Storage for Progressive Web Apps - https://bit.ly/cache-vs-db

Twilio Blog: Web powered SMS inbox with push notifications: https://www.twilio.com/blog/2016/02/web-powered-sms-inbox-with-service-worker-push-notifications.html
Background sync: https://developers.google.com/web/updates/2015/12/background-sync?hl=en

Phil Nash

September 15, 2016
Tweet

More Decks by Phil Nash

Other Decks in Programming

Transcript

  1. The Application Cache C A C H E M A

    N I F E S T # V e r s i o n 7 C A C H E : # S t y l e s h e e t s / s t y l e / a p p . c s s # J a v a S c r i p t s / j s / a p p . j s 0 1 . 0 2 . 0 3 . 0 4 . 0 5 . 0 6 . 0 7 . 0 8 .
  2. Install it n a v i g a t o

    r . s e r v i c e W o r k e r . r e g i s t e r ( " / s w . j s " ) ;
  3. Install it n a v i g a t o

    r . s e r v i c e W o r k e r . r e g i s t e r ( " / s w . j s " , { s c o p e : " / a d m i n " } ) ; 0 1 . 0 2 . 0 3 .
  4. Install it n a v i g a t o

    r . s e r v i c e W o r k e r . r e g i s t e r ( " / s w . j s " ) . t h e n ( f u n c t i o n ( ) { c o n s o l e . l o g ( " " ) ; } ) . c a t c h ( f u n c t i o n ( ) { c o n s o l e . l o g ( " " ) ; } ) ; 0 1 . 0 2 . 0 3 . 0 4 . 0 5 .
  5. It intercepts network requests / / s w . j

    s s e l f . a d d E v e n t L i s t e n e r ( " f e t c h " , f u n c t i o n ( e v e n t ) { / / d o s o m e t h i n g } ) ; 0 1 . 0 2 . 0 3 . 0 4 .
  6. ...