Slide 1

Slide 1 text

AN INTRODUCTION TO SERVICE WORKERS JS Monthly London / April 2016

Slide 2

Slide 2 text

Phil Nash @philnash http:/ /philna.sh [email protected]

Slide 3

Slide 3 text

AN INTRODUCTION TO SERVICE WORKERS

Slide 4

Slide 4 text

SERVICE WORKERS ARE SCRIPTS THAT INTERCEPT NETWORK REQUESTS

Slide 5

Slide 5 text

SO WEB DEVELOPERS CAN TREAT THE NETWORK AS AN ENHANCEMENT

Slide 6

Slide 6 text

AND PROVIDE OFFLINE EXPERIENCES FOR USERS OF WEB APPLICATIONS

Slide 7

Slide 7 text

A SLIGHTLY LONGER INTRODUCTION TO SERVICE WORKERS

Slide 8

Slide 8 text

XMLHttpRequest

Slide 9

Slide 9 text

IN THE FUTURE WE WILL WONDER HOW WE COPED WITHOUT SERVICE WORKERS

Slide 10

Slide 10 text

THE BIRTH OF THE SERVICE WORKER

Slide 11

Slide 11 text

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 .

Slide 12

Slide 12 text

“THE APPLICATION CACHE IS A DOUCHEBAG”

Slide 13

Slide 13 text

The Spec https:/ /slightlyoff.github.io/ServiceWorker/spec/service

Slide 14

Slide 14 text

Browsers 40 27 44

Slide 15

Slide 15 text

SO WHAT DOES IT REALLY DO?

Slide 16

Slide 16 text

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 " ) ;

Slide 17

Slide 17 text

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 .

Slide 18

Slide 18 text

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 .

Slide 19

Slide 19 text

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 .

Slide 20

Slide 20 text

IT'S A PROXY THAT YOU CONTROL

Slide 21

Slide 21 text

SECURITY?

Slide 22

Slide 22 text

HTTPS

Slide 23

Slide 23 text

LOCALHOST

Slide 24

Slide 24 text

DEMO

Slide 25

Slide 25 text

WHY?

Slide 26

Slide 26 text

WEB VS NATIVE

Slide 27

Slide 27 text

Native Web Online by default Offline by default Discoverable on the web App store installation

Slide 28

Slide 28 text

Native Web Offline first Offline by default Discoverable on the web App store installation

Slide 29

Slide 29 text

DON'T CARE FOR OFFLINE?

Slide 30

Slide 30 text

PERFORMANCE

Slide 31

Slide 31 text

FALLBACKS

Slide 32

Slide 32 text

No content

Slide 33

Slide 33 text

THERE'S MORE!

Slide 34

Slide 34 text

PUSH NOTIFICATIONS

Slide 35

Slide 35 text

DEMO

Slide 36

Slide 36 text

Browsers 42 44

Slide 37

Slide 37 text

WITH GREAT POWER…

Slide 38

Slide 38 text

BACKGROUND SYNC

Slide 39

Slide 39 text

DEMO

Slide 40

Slide 40 text

Browsers 49

Slide 41

Slide 41 text

GEOFENCING

Slide 42

Slide 42 text

MAYBE...?

Slide 43

Slide 43 text

PROGRESSIVE WEB APPS

Slide 44

Slide 44 text

Progressive Web Apps • Service Worker (+ HTTPS) • manifest.json • User engagement

Slide 45

Slide 45 text

APP INSTALL BANNERS

Slide 46

Slide 46 text

No content

Slide 47

Slide 47 text

ICON ON HOMESCREEN

Slide 48

Slide 48 text

...

Slide 49

Slide 49 text

$$ PROFIT! $$

Slide 50

Slide 50 text

SERVICE WORKERS

Slide 51

Slide 51 text

ENHANCEMENT

Slide 52

Slide 52 text

IN THE FUTURE WE WILL WONDER HOW WE COPED WITHOUT SERVICE WORKERS

Slide 53

Slide 53 text

1:13

Slide 54

Slide 54 text

THANKS!

Slide 55

Slide 55 text

Use code PNASH20 for 20% off tickets

Slide 56

Slide 56 text

Help me! On a scale of 0 to 10, how likely is it that you would recommend this talk to a friend or colleague? 020 3322 5761

Slide 57

Slide 57 text

Thanks! @philnash http:/ /philna.sh [email protected] On a scale of 0 to 10, how likely is it that you would recommend this talk to a friend or colleague? 020 3322 5761