An Introduction to Service Workers - Code Europe Krakow

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

No content

Slide 5

Slide 5 text

AN INTRODUCTION TO SERVICE WORKERS

Slide 6

Slide 6 text

SERVICE WORKERS ARE SCRIPTS THAT INTERCEPT NETWORK REQUESTS

Slide 7

Slide 7 text

SO WEB DEVELOPERS CAN TREAT THE NETWORK AS AN ENHANCEMENT

Slide 8

Slide 8 text

AND PROVIDE OFFLINE EXPERIENCES FOR USERS OF WEB APPLICATIONS

Slide 9

Slide 9 text

No content

Slide 10

Slide 10 text

A SLIGHTLY LONGER INTRODUCTION TO SERVICE WORKERS

Slide 11

Slide 11 text

XMLHttpRequest

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

THE BIRTH OF THE SERVICE WORKER

Slide 14

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

Slide 15 text

“THE APPLICATION CACHE IS A DOUCHEBAG”

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

Browsers 40 27 44 4

Slide 18

Slide 18 text

The other browsers? preview under consideration

Slide 19

Slide 19 text

SO WHAT DOES IT REALLY DO?

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

IT'S A PROXY THAT YOU CONTROL

Slide 25

Slide 25 text

SECURITY?

Slide 26

Slide 26 text

HTTPS

Slide 27

Slide 27 text

LOCALHOST

Slide 28

Slide 28 text

DEMO

Slide 29

Slide 29 text

WHY?

Slide 30

Slide 30 text

WEB VS NATIVE

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

DON'T CARE FOR OFFLINE?

Slide 34

Slide 34 text

PERFORMANCE

Slide 35

Slide 35 text

FALLBACKS

Slide 36

Slide 36 text

No content

Slide 37

Slide 37 text

THERE'S MORE!

Slide 38

Slide 38 text

BUT HOW?

Slide 39

Slide 39 text

AN EXAMPLE APPLICATION

Slide 40

Slide 40 text

No content

Slide 41

Slide 41 text

PROGRESSIVE ENHANCEMENT

Slide 42

Slide 42 text

WHAT DO WE NEED?

Slide 43

Slide 43 text

BASE EXPERIENCE

Slide 44

Slide 44 text

STATIC ASSETS

Slide 45

Slide 45 text

OFFLINE PAGES

Slide 46

Slide 46 text

BACKGROUND SYNC

Slide 47

Slide 47 text

PUSH NOTIFICATIONS

Slide 48

Slide 48 text

BASE EXPERIENCE

Slide 49

Slide 49 text

GOOD NEWS!

Slide 50

Slide 50 text

STATIC ASSETS

Slide 51

Slide 51 text

DEMO

Slide 52

Slide 52 text

THE SERVICE WORKER LIFECYCLE

Slide 53

Slide 53 text

INSTALLING INSTALLED ACTIVATING ACTIVATED REDUNDANT

Slide 54

Slide 54 text

CACHE INVALIDATION

Slide 55

Slide 55 text

DEMO

Slide 56

Slide 56 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 57

Slide 57 text

self.skipWaiting();

Slide 58

Slide 58 text

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

Slide 59

Slide 59 text

TAKE BACK CONTROL

Slide 60

Slide 60 text

OFFLINE PAGES

Slide 61

Slide 61 text

DATA VS FILES

Slide 62

Slide 62 text

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

Slide 63

Slide 63 text

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

Slide 64

Slide 64 text

IndexedDB

Slide 65

Slide 65 text

IDB-KEYVAL LOCALFORAGE IDB DEXIE POUCHDB

Slide 66

Slide 66 text

IDB-KEYVAL LOCALFORAGE IDB DEXIE POUCHDB

Slide 67

Slide 67 text

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

Slide 68

Slide 68 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 69

Slide 69 text

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

Slide 70

Slide 70 text

RENDER ON THE SERVER

Slide 71

Slide 71 text

No content

Slide 72

Slide 72 text

APP SHELL

Slide 73

Slide 73 text

No content

Slide 74

Slide 74 text

BOOTSTRAP FROM THE PAGE OR THE DATABASE

Slide 75

Slide 75 text

UNIVERSAL JAVASCRIPT

Slide 76

Slide 76 text

BACKGROUND SYNC

Slide 77

Slide 77 text

DEMO

Slide 78

Slide 78 text

reg.sync.register('sentMessage');

Slide 79

Slide 79 text

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

Slide 80

Slide 80 text

PUSH NOTIFICATIONS

Slide 81

Slide 81 text

DEMO

Slide 82

Slide 82 text

PROGRESSIVE WEB APPS

Slide 83

Slide 83 text

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