Tweet
Tweet

Slide 1

Slide 1 text

Blink and you’ll miss it Building a Progressive Web App with HTTP/2

Slide 2

Slide 2 text

Dean Hume @deanohume

Slide 3

Slide 3 text

I work for a company called Settled

Slide 4

Slide 4 text

No content

Slide 5

Slide 5 text

Instead ➔ Transparent ➔ Online ➔ Everything to help you get “Settled” into your new home

Slide 6

Slide 6 text

Our Customers 56%

Slide 7

Slide 7 text

● Is accessible on any device We needed an experience that:

Slide 8

Slide 8 text

● Is accessible on any device ● Is fast We needed an experience that:

Slide 9

Slide 9 text

● Is accessible on any device ● Is fast ● Works with little or no internet connection We needed an experience that:

Slide 10

Slide 10 text

● Is accessible on any device ● Is fast ● Works with little or no internet connection ● Uses one codebase We needed an experience that:

Slide 11

Slide 11 text

● Is accessible on any device ● Is fast ● Works with little or no internet connection ● Uses one codebase ● Has an “app-like” feel We needed an experience that:

Slide 12

Slide 12 text

Progressive Web Apps

Slide 13

Slide 13 text

This is our journey

Slide 14

Slide 14 text

This talk 1. Basics of progressive web apps

Slide 15

Slide 15 text

This talk 1. Basics of progressive web apps 2. Fast

Slide 16

Slide 16 text

This talk 1. Basics of progressive web apps 2. Fast 3. Reliable

Slide 17

Slide 17 text

This talk 1. Basics of progressive web apps 2. Fast 3. Reliable 4. Look and feel

Slide 18

Slide 18 text

The basics of Progressive Web Apps

Slide 19

Slide 19 text

These apps aren’t packaged and deployed through stores, they’re just websites that took all the right vitamins. Alex Russell - Google “

Slide 20

Slide 20 text

Building blocks Website

Slide 21

Slide 21 text

Building blocks Website Service Worker

Slide 22

Slide 22 text

Building blocks Website Service Worker Manifest File

Slide 23

Slide 23 text

Building blocks Website HTTPS Service Worker Manifest File

Slide 24

Slide 24 text

Think of your web apps requests as planes taking off. ServiceWorker is the air traffic controller that routes the requests. Jeff Posnick - Google “

Slide 25

Slide 25 text

Behind the scenes

Slide 26

Slide 26 text

With Service Workers

Slide 27

Slide 27 text

With Service Workers

Slide 28

Slide 28 text

With Service Workers

Slide 29

Slide 29 text

With Service Workers

Slide 30

Slide 30 text

Service Workers are the key to unlocking the power

Slide 31

Slide 31 text

The perfect progressive enhancement.

Slide 32

Slide 32 text

HTTPS Only

Slide 33

Slide 33 text

Free SSL

Slide 34

Slide 34 text

Support

Slide 35

Slide 35 text

You are already using them

Slide 36

Slide 36 text

2. Fast

Slide 37

Slide 37 text

Caching

Slide 38

Slide 38 text

Caching HTTP/2

Slide 39

Slide 39 text

Caching HTTP/2 Techniques

Slide 40

Slide 40 text

Caching

Slide 41

Slide 41 text

With Service Workers

Slide 42

Slide 42 text

With Service Workers

Slide 43

Slide 43 text

First Visit

Slide 44

Slide 44 text

No content

Slide 45

Slide 45 text

No content

Slide 46

Slide 46 text

Register

Slide 47

Slide 47 text

Register Install

Slide 48

Slide 48 text

Register Install Activate

Slide 49

Slide 49 text

Caching const cacheName = 'pageCache';

Slide 50

Slide 50 text

Caching const cacheName = 'pageCache'; this.addEventListener('install', event => { event.waitUntil(caches.open(cacheName) .then(function(cache) { })); });

Slide 51

Slide 51 text

Caching const cacheName = 'pageCache'; this.addEventListener('install', event => { event.waitUntil(caches.open(cacheName) .then(function(cache) { return cache.addAll(['result.min.css', './js/material.min.js']); })); });

Slide 52

Slide 52 text

Caching const cacheName = 'pageCache'; this.addEventListener('install', event => { event.waitUntil(caches.open(cacheName) .then(function(cache) { return cache.addAll(['result.min.css', './js/material.min.js']); })); }); this.addEventListener('fetch', event => { event.respondWith(caches.match(event.request) .then() ); });

Slide 53

Slide 53 text

Caching const cacheName = 'pageCache'; this.addEventListener('install', event => { event.waitUntil(caches.open(cacheName) .then(function(cache) { return cache.addAll(['result.min.css', './js/material.min.js']); })); }); this.addEventListener('fetch', event => { event.respondWith(caches.match(event.request) .then(function (response) { return response || fetch(event.request); }) ); });

Slide 54

Slide 54 text

bit.ly/sw-toolbox

Slide 55

Slide 55 text

4.65 secs Page Load 2.25 secs 500 ms

Slide 56

Slide 56 text

4.65 secs Page Load 850 KB Page weight 50 KB 1 KB 2.25 secs 500 ms

Slide 57

Slide 57 text

HTTP/2

Slide 58

Slide 58 text

source: blog.cloudflare.com

Slide 59

Slide 59 text

source: blog.cloudflare.com

Slide 60

Slide 60 text

HTTPS

Slide 61

Slide 61 text

npm install spdy

Slide 62

Slide 62 text

npm install spdy yarn add

Slide 63

Slide 63 text

const spdy = require('spdy'); const express = require('express'); const app = express(); HTTP/2

Slide 64

Slide 64 text

const spdy = require('spdy'); const express = require('express'); const app = express(); app.get('/home', (req, res) => { res.status(200).json({message: 'ok'}); }); spdy.createServer({ key: fs.readFileSync('./privatekey.key'), cert: fs.readFileSync('./certificate.crt') }, app) .listen(8012, (err) => { if (err) { throw new Error(err); } console.log('Listening on port: 8012.'); }); HTTP/2

Slide 65

Slide 65 text

const spdy = require('spdy'); const express = require('express'); const app = express(); app.get('/home', (req, res) => { res.status(200).json({message: 'ok'}); }); spdy.createServer({ key: fs.readFileSync('./privatekey.key'), cert: fs.readFileSync('./certificate.crt') }, app) .listen(8012, (err) => { if (err) { throw new Error(err); } console.log('Listening on port: 8012.'); }); HTTP/2

Slide 66

Slide 66 text

Client Side

Slide 67

Slide 67 text

spdy: { protocols: [ 'h2', 'spdy/3.1', 'http/1.1' ], connection: { windowSize: 1024 * 1024, } } Config

Slide 68

Slide 68 text

spdy: { protocols: [ 'h2', 'spdy/3.1', 'http/1.1' ], connection: { windowSize: 1024 * 1024, } } Config

Slide 69

Slide 69 text

spdy: { protocols: [ 'h2', 'spdy/3.1', 'http/1.1' ], connection: { windowSize: 1024 * 1024, } } Config

Slide 70

Slide 70 text

Techniques

Slide 71

Slide 71 text

We used no JavaScript frameworks.

Slide 72

Slide 72 text

We rendered the page server-side.

Slide 73

Slide 73 text

We experimented with HTTP/2 Push.

Slide 74

Slide 74 text

Without H2 Push

Slide 75

Slide 75 text

With H2 Push

Slide 76

Slide 76 text

No content

Slide 77

Slide 77 text

bit.ly/http2-jake

Slide 78

Slide 78 text

H2 Push bit.ly/server-push-http2

Slide 79

Slide 79 text

We also used prefetch.

Slide 80

Slide 80 text

No content

Slide 81

Slide 81 text

No content

Slide 82

Slide 82 text

Slide 83

Slide 83 text

Brotli = Better compression

Slide 84

Slide 84 text

Brotli ~ 10%

Slide 85

Slide 85 text

We tested using Lighthouse.

Slide 86

Slide 86 text

Audit your Progressive Web App

Slide 87

Slide 87 text

bit.ly/pwa-lighthouse

Slide 88

Slide 88 text

15 x less data

Slide 89

Slide 89 text

15 x less data 3x faster

Slide 90

Slide 90 text

Caching HTTP/2 Techniques Summary

Slide 91

Slide 91 text

No content

Slide 92

Slide 92 text

Offline

Slide 93

Slide 93 text

With Service Workers

Slide 94

Slide 94 text

this.addEventListener('fetch', event => { };

Slide 95

Slide 95 text

this.addEventListener('fetch', event => { // Check if the user navigated if (event.request.method === 'GET' && event.request.headers.get('accept').includes('text/html')) { // Respond appropriately } };

Slide 96

Slide 96 text

this.addEventListener('fetch', event => { // Check if the user navigated if (event.request.method === 'GET' && event.request.headers.get('accept').includes('text/html')) { // Respond appropriately event.respondWith( fetch(event.request.url).catch(error => { // Return the offline page return caches.match('the-offline-page'); })); } };

Slide 97

Slide 97 text

No content

Slide 98

Slide 98 text

Network First

Slide 99

Slide 99 text

Offline Applications bit.ly/offline-page

Slide 100

Slide 100 text

Offline Analytics github.com/GoogleChrome/sw-helpers

Slide 101

Slide 101 text

No content

Slide 102

Slide 102 text

Test your Service Worker code bit.ly/sw-testing

Slide 103

Slide 103 text

3rd Party Scripts

Slide 104

Slide 104 text

Server Fails

Slide 105

Slide 105 text

No content

Slide 106

Slide 106 text

Using Service Workers

Slide 107

Slide 107 text

Using Service Workers

Slide 108

Slide 108 text

With Service Workers

Slide 109

Slide 109 text

function timeout(delay) { return new Promise(function(resolve, reject) { setTimeout(function(){ resolve(new Response('', { status: 408, statusText: 'Request timed out.' })); }, delay); }); }

Slide 110

Slide 110 text

function timeout(delay) { return new Promise(function(resolve, reject) { setTimeout(function(){ resolve(new Response('', { status: 408, statusText: 'Request timed out.' })); }, delay); }); } self.addEventListener('fetch', event => { });

Slide 111

Slide 111 text

function timeout(delay) { return new Promise(function(resolve, reject) { setTimeout(function(){ resolve(new Response('', { status: 408, statusText: 'Request timed out.' })); }, delay); }); } self.addEventListener('fetch', event => { event.respondWith( Promise.race([timeout(6000), fetch(event.request.url)])); });

Slide 112

Slide 112 text

bit.ly/sw-toolbox

Slide 113

Slide 113 text

toolbox.router.get('/(.*)', global.toolbox.cacheFirst, { });

Slide 114

Slide 114 text

toolbox.router.get('/(.*)', global.toolbox.cacheFirst, { origin: /\.google\.com$/, });

Slide 115

Slide 115 text

toolbox.router.get('/(.*)', global.toolbox.cacheFirst, { origin: /\.google\.com$/, cache: { name: 'javascript', networkTimeoutSeconds: 4 } });

Slide 116

Slide 116 text

bit.ly/sw-timeout

Slide 117

Slide 117 text

App-like Picture of mobile phones Look & Feel

Slide 118

Slide 118 text

No content

Slide 119

Slide 119 text

App-like Picture of mobile phones Look & Feel ❖ Manifest file

Slide 120

Slide 120 text

App-like Picture of mobile phones ❖ Manifest file ❖ Add to Home Screen Look & Feel

Slide 121

Slide 121 text

Manifest A simple JSON file that allows you to control how your app appears to the user

Slide 122

Slide 122 text

Look and feel

Slide 123

Slide 123 text

{ lang: "en", background_color: "#09adec", name: "Settled", short_name: "Settled Dashboard", display: "standalone", icons: [ { src: "./images/logo-144.png", sizes: "144x144", type: "image/png" } ], start_url: "/?start=a2hs", orientation: "portrait" }

Slide 124

Slide 124 text

{ lang: "en", background_color: "#09adec", name: "Settled", short_name: "Settled Dashboard", display: "standalone", icons: [ { src: "./images/logo-144.png", sizes: "144x144", type: "image/png" } ], start_url: "/?start=a2hs", orientation: "portrait" }

Slide 125

Slide 125 text

{ lang: "en", background_color: "#09adec", name: "Settled", short_name: "Settled Dashboard", display: "standalone", icons: [ { src: "./images/logo-144.png", sizes: "144x144", type: "image/png" } ], start_url: "/?start=a2hs", orientation: "portrait" }

Slide 126

Slide 126 text

Slide 127

Slide 127 text

Manifest bit.ly/manifest-json

Slide 128

Slide 128 text

Add to home screen

Slide 129

Slide 129 text

Add to home screen 1. You need a manifest.json file with a start URL and 144x144 PNG icon

Slide 130

Slide 130 text

Add to home screen 1. You need a manifest.json file with a start URL and 144x144 PNG icon 2. Your site is using a Service Worker running over HTTPS

Slide 131

Slide 131 text

Add to home screen 1. You need a manifest.json file with a start URL and 144x144 PNG icon 2. Your site is using a Service Worker running over HTTPS 3. The user has visited your site at least twice, with at least five minutes between visits.

Slide 132

Slide 132 text

{ lang: "en", background_color: "#09adec", name: "Settled", short_name: "Settled Dashboard", display: "standalone", icons: [ { src: "./images/logo-144.png", sizes: "144x144", type: "image/png" } ], start_url: "/?start=a2hs", orientation: "portrait" }

Slide 133

Slide 133 text

H S

Slide 134

Slide 134 text

App-like Picture of mobile phones Summary

Slide 135

Slide 135 text

App-like Picture of mobile phones Summary ❖ Fast

Slide 136

Slide 136 text

App-like Picture of mobile phones Summary ❖ Fast ❖ Reliable

Slide 137

Slide 137 text

App-like Picture of mobile phones Summary ❖ Fast ❖ Reliable ❖ Look & Feel

Slide 138

Slide 138 text

We are still learning

Slide 139

Slide 139 text

No content

Slide 140

Slide 140 text

Thank you! @deanohume