An Introduction to Service Workers - Code Europe Warsaw

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

No content

Slide 4

Slide 4 text

AN INTRODUCTION TO SERVICE WORKERS

Slide 5

Slide 5 text

SERVICE WORKERS ARE SCRIPTS THAT INTERCEPT NETWORK REQUESTS

Slide 6

Slide 6 text

SO WEB DEVELOPERS CAN TREAT THE NETWORK AS AN ENHANCEMENT

Slide 7

Slide 7 text

AND PROVIDE OFFLINE EXPERIENCES FOR USERS OF WEB APPLICATIONS

Slide 8

Slide 8 text

No content

Slide 9

Slide 9 text

A SLIGHTLY LONGER INTRODUCTION TO SERVICE WORKERS

Slide 10

Slide 10 text

XMLHttpRequest

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

THE BIRTH OF THE SERVICE WORKER

Slide 13

Slide 13 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 14

Slide 14 text

“THE APPLICATION CACHE IS A DOUCHEBAG”

Slide 15

Slide 15 text

The Spec https:/ /w3c.github.io/ServiceWorker/

Slide 16

Slide 16 text

Browsers 40 27 44 4

Slide 17

Slide 17 text

The other browsers? preview under consideration

Slide 18

Slide 18 text

SO WHAT DOES IT REALLY DO?

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

IT'S A PROXY THAT YOU CONTROL

Slide 24

Slide 24 text

SECURITY?

Slide 25

Slide 25 text

HTTPS

Slide 26

Slide 26 text

LOCALHOST

Slide 27

Slide 27 text

DEMO

Slide 28

Slide 28 text

WHY?

Slide 29

Slide 29 text

WEB VS NATIVE

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

Native Web O ine rst O ine by default Discoverable on the web App store installation

Slide 32

Slide 32 text

DON'T CARE FOR OFFLINE?

Slide 33

Slide 33 text

PERFORMANCE

Slide 34

Slide 34 text

FALLBACKS

Slide 35

Slide 35 text

No content

Slide 36

Slide 36 text

THERE'S MORE!

Slide 37

Slide 37 text

BUT HOW?

Slide 38

Slide 38 text

AN EXAMPLE APPLICATION

Slide 39

Slide 39 text

No content

Slide 40

Slide 40 text

PROGRESSIVE ENHANCEMENT

Slide 41

Slide 41 text

WHAT DO WE NEED?

Slide 42

Slide 42 text

BASE EXPERIENCE

Slide 43

Slide 43 text

STATIC ASSETS

Slide 44

Slide 44 text

OFFLINE PAGES

Slide 45

Slide 45 text

BACKGROUND SYNC

Slide 46

Slide 46 text

PUSH NOTIFICATIONS

Slide 47

Slide 47 text

BASE EXPERIENCE

Slide 48

Slide 48 text

GOOD NEWS!

Slide 49

Slide 49 text

STATIC ASSETS

Slide 50

Slide 50 text

DEMO

Slide 51

Slide 51 text

THE SERVICE WORKER LIFECYCLE

Slide 52

Slide 52 text

INSTALLING INSTALLED ACTIVATING ACTIVATED REDUNDANT

Slide 53

Slide 53 text

CACHE INVALIDATION

Slide 54

Slide 54 text

DEMO

Slide 55

Slide 55 text

navigator.serviceWorker.register("/sw.js").then(function(reg) { console.log("Yay!"); reg.addEventListener("updatefound", function(){ var worker = reg.installing reg.installing.addEventListener("statechange", function(e) { if (worker.state == "installed") { worker.postMessage({action: "update"}); } }) }); }); 01. 02. 03. 04. 05. 06. 07. 08. 09. 10. 11.

Slide 56

Slide 56 text

self.skipWaiting();

Slide 57

Slide 57 text

var sw = navigator.serviceWorker; sw.addEventListener("controllerchange", function() { window.location.reload(); }); 01. 02. 03. 04.

Slide 58

Slide 58 text

TAKE BACK CONTROL

Slide 59

Slide 59 text

OFFLINE PAGES

Slide 60

Slide 60 text

DATA VS FILES

Slide 61

Slide 61 text

“FOR URL ADDRESSABLE RESOURCES, USE THE CACHE API. FOR ALL OTHER DATA, USE INDEXEDDB”

Slide 62

Slide 62 text

http:/ /bit.ly/cache-vs-db

Slide 63

Slide 63 text

IndexedDB

Slide 64

Slide 64 text

IDB-KEYVAL LOCALFORAGE IDB DEXIE POUCHDB

Slide 65

Slide 65 text

IDB-KEYVAL LOCALFORAGE IDB DEXIE POUCHDB

Slide 66

Slide 66 text

var db = new Dexie("messageStore", { autoOpen: true }); db.version(1).stores({ messages: "++,createdAt" }); 01. 02. 03. 04. 05. 06.

Slide 67

Slide 67 text

db.transaction("w", db.messages, function() { db.messages.put({ from: FROM_NUMBER, to: TO_NUMBER, createAt: new Date(), body: "Service Workers rock " }).then(function(message){ console.log("Yay!"); }); }); 01. 02. 03. 04. 05. 06. 07. 08. 09. 10.

Slide 68

Slide 68 text

db.transaction("r", db.messages, function() { db.messages.each(function(item, cursor) { render(item); }); }); 01. 02. 03. 04. 05.

Slide 69

Slide 69 text

RENDER ON THE SERVER

Slide 70

Slide 70 text

No content

Slide 71

Slide 71 text

APP SHELL

Slide 72

Slide 72 text

No content

Slide 73

Slide 73 text

BOOTSTRAP FROM THE PAGE OR THE DATABASE

Slide 74

Slide 74 text

UNIVERSAL JAVASCRIPT

Slide 75

Slide 75 text

BACKGROUND SYNC

Slide 76

Slide 76 text

DEMO

Slide 77

Slide 77 text

reg.sync.register('sentMessage');

Slide 78

Slide 78 text

self.addEventListener('sync', function(event) { // do the thing }); 01. 02. 03.

Slide 79

Slide 79 text

PUSH NOTIFICATIONS

Slide 80

Slide 80 text

DEMO

Slide 81

Slide 81 text

PROGRESSIVE WEB APPS

Slide 82

Slide 82 text

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