Browsers behind your back at London JavaScript

Slide 1

Slide 1 text

BROWSERS BEHIND YOUR BACK

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 LOOK BACK

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:/ /w3c.github.io/ServiceWorker/

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 Oﬄine 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

No content

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

BROWSERS BEHIND YOUR BACK

Slide 41

Slide 41 text

EMAIL IS PRETTY COOL

Slide 42

Slide 42 text

No content

Slide 43

Slide 43 text

ON THE WEB?

Slide 44

Slide 44 text

No content

Slide 45

Slide 45 text

SENDING MESSAGES

Slide 46

Slide 46 text

LIKE OR FAVOURITE

Slide 47

Slide 47 text

ADD SHOPPING TO CART

Slide 48

Slide 48 text

LEAVING A COMMENT

Slide 49

Slide 49 text

No content

Slide 50

Slide 50 text

BACKGROUND SYNC API

Slide 51

Slide 51 text

Background Sync API • Service Worker • IndexedDB • Sync Event

Slide 52

Slide 52 text

DEMO

Slide 53

Slide 53 text

SERVICE WORKER

Slide 54

Slide 54 text

No content

Slide 55

Slide 55 text

No content

Slide 56

Slide 56 text

No content

Slide 57

Slide 57 text

DEMO

Slide 58

Slide 58 text

INDEXEDDB

Slide 59

Slide 59 text

No content

Slide 60

Slide 60 text

OBJECT STORE

Slide 61

Slide 61 text

ASYNCHRONOUS

Slide 62

Slide 62 text

TRANSACTIONAL

Slide 63

Slide 63 text

LOW LEVEL

Slide 64

Slide 64 text

Use a library • idb • localForage • Dexie • PouchDB

Slide 65

Slide 65 text

SERVICE WORKERS LOVE PROMISES

Slide 66

Slide 66 text

Callbacks var request = indexedDB.open('messages', 1) request.onupgradeneeded = function(event) { var upgradeDb = event.result.target; upgradeDb.createObjectStore('outbox', { autoIncrement : true, keyPath: 'id' }); } request.onsuccess = function(event) { window.db = event.result.target; } 01. 02. 03. 04. 05. 06. 07. 08. 09. 10.

Slide 67

Slide 67 text

Promises idb.open('messages', 1, function(upgradeDb) { upgradeDb.createObjectStore('outbox', { autoIncrement : true, keyPath: 'id' }); }).then(function(db) { return window.db = db; }) 01. 02. 03. 04. 05. 06. 07.

Slide 68

Slide 68 text

DEMO

Slide 69

Slide 69 text

BACKGROUND SYNC API

Slide 70

Slide 70 text

No content

Slide 71

Slide 71 text

No content

Slide 72

Slide 72 text

BACK ONLINE API

Slide 73

Slide 73 text

Support 49 beta devdevdevboo

Slide 74

Slide 74 text

On the page navigator.serviceWorker.ready.then(function(reg) { reg.sync.register('back-online'); }); 01. 02. 03.

Slide 75

Slide 75 text

In the service worker self.addEventListener('sync', function(event) { if (event.tag === 'back-online') { // do something } }); 01. 02. 03. 04. 05.

Slide 76

Slide 76 text

DEMO

Slide 77

Slide 77 text

THE FUTURE

Slide 78

Slide 78 text

BACKGROUND FETCH API

Slide 79

Slide 79 text

On the page navigator.serviceWorker.ready.then(function(reg) { const url = "https://example.com/largeFile.mp3"; reg.backgroundFetch.fetch('downloads', [url], { icons: [], title: 'Downloading largeFile.mp3', totalDownloadSize: 1048576 }); }); 01. 02. 03. 04. 05. 06. 07. 08.

Slide 80

Slide 80 text

In the service worker self.addEventListener('backgroundfetched', function(event) { if (event.tag === 'downloads') { event.updateUI('largeFile.mp3 downloaded.'); } }); 01. 02. 03. 04. 05.

Slide 81

Slide 81 text

In the service worker Other events: • backgroundfetchfail • backgroundfetchabort • backgroundfetchclick

Slide 82

Slide 82 text

PERIODIC SYNC API

Slide 83

Slide 83 text

On the page navigator.serviceWorker.ready.then(function(reg) { reg.periodicSync.register({ tag: 'get-latest-news', // default: '' minPeriod: 12 * 60 * 60 * 1000, // default: 0 powerState: 'avoid-draining', // default: 'auto' networkState: 'avoid-cellular' // default: 'online' }); }); 01. 02. 03. 04. 05. 06. 07. 08.

Slide 84

Slide 84 text

In the service worker self.addEventListener('periodicsync', function(event) { if (event.tag === 'get-latest-news') { // get the latest news! } }); 01. 02. 03. 04. 05.