Slide 1

Slide 1 text

AN INTRODUCTION TO SERVICE WORKERS

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

No content

Slide 8

Slide 8 text

A SLIGHTLY LONGER INTRODUCTION TO SERVICE WORKERS

Slide 9

Slide 9 text

XMLHttpRequest

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

THE BIRTH OF THE SERVICE WORKER

Slide 12

Slide 12 text

The Application Cache CACHE MANIFEST # Version 7 CACHE: # Stylesheets /style/app.css # JavaScripts /js/app.js 01. 02. 03. 04. 05. 06. 07. 08.

Slide 13

Slide 13 text

“THE APPLICATION CACHE IS A DOUCHEBAG”

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

Browsers 40 27 44 4

Slide 16

Slide 16 text

The other browsers? preview under consideration

Slide 17

Slide 17 text

SO WHAT DOES IT REALLY DO?

Slide 18

Slide 18 text

Install it navigator.serviceWorker.register("/sw.js");

Slide 19

Slide 19 text

Install it navigator.serviceWorker.register("/sw.js", { scope: "/admin" }); 01. 02. 03.

Slide 20

Slide 20 text

Install it navigator.serviceWorker.register("/sw.js").then(function(){ console.log(" "); }).catch(function(){ console.log(" "); }); 01. 02. 03. 04. 05.

Slide 21

Slide 21 text

It intercepts network requests // sw.js self.addEventListener("fetch", function(event) { // do something }); 01. 02. 03. 04.

Slide 22

Slide 22 text

IT'S A PROXY THAT YOU CONTROL

Slide 23

Slide 23 text

SECURITY?

Slide 24

Slide 24 text

HTTPS

Slide 25

Slide 25 text

LOCALHOST

Slide 26

Slide 26 text

DEMO

Slide 27

Slide 27 text

WHY?

Slide 28

Slide 28 text

WEB VS NATIVE

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

DON'T CARE FOR OFFLINE?

Slide 32

Slide 32 text

PERFORMANCE

Slide 33

Slide 33 text

FALLBACKS

Slide 34

Slide 34 text

No content

Slide 35

Slide 35 text

PUSH NOTIFICATIONS

Slide 36

Slide 36 text

DEMO

Slide 37

Slide 37 text

Browsers 42 44 37 4

Slide 38

Slide 38 text

WITH GREAT POWER…

Slide 39

Slide 39 text

BACKGROUND SYNC

Slide 40

Slide 40 text

DEMO

Slide 41

Slide 41 text

Browsers 49

Slide 42

Slide 42 text

GEOFENCING

Slide 43

Slide 43 text

MAYBE...?

Slide 44

Slide 44 text

PROGRESSIVE WEB APPS

Slide 45

Slide 45 text

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

Slide 46

Slide 46 text

APP INSTALL BANNERS

Slide 47

Slide 47 text

No content

Slide 48

Slide 48 text

ICON ON HOMESCREEN

Slide 49

Slide 49 text

...

Slide 50

Slide 50 text

$$ PROFIT! $$

Slide 51

Slide 51 text

SERVICE WORKERS

Slide 52

Slide 52 text

ENHANCEMENT

Slide 53

Slide 53 text

AN INTRODUCTION TO SERVICE WORKERS

Slide 54

Slide 54 text

SERVICE WORKERS ARE SCRIPTS THAT INTERCEPT NETWORK REQUESTS

Slide 55

Slide 55 text

SO WEB DEVELOPERS CAN TREAT THE NETWORK AS AN ENHANCEMENT

Slide 56

Slide 56 text

AND PROVIDE OFFLINE EXPERIENCES FOR USERS OF WEB APPLICATIONS

Slide 57

Slide 57 text

AND PROVIDE OFFLINE EXPERIENCES FOR USERS OF WEB APPLICATIONS

Slide 58

Slide 58 text

AND PROVIDE BETTER EXPERIENCES FOR USERS OF WEB APPLICATIONS

Slide 59

Slide 59 text

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

Slide 60

Slide 60 text

AND IF YOU'RE NOT YET CONVINCED...

Slide 61

Slide 61 text

0:00 / 1:13

Slide 62

Slide 62 text

THANKS!

Slide 63

Slide 63 text

No content

Slide 64

Slide 64 text

Use the code PNASH20 for 20% off ticket prices

Slide 65

Slide 65 text

Thanks! @philnash http:/ /philna.sh [email protected]