LDNWebPerf March 2017 - Dean Hume

As web developers, we’ve never been luckier. We have amazing technologies such as HTTP/2, Progressive Web Apps, and easy access to the Cloud, just to name a few. With these technologies at our fingertips, we are able to build fast, engaging and resilient web apps for our users.

At Settled, we set out to build a new dashboard for our customers using the features of Progressive Web Apps and HTTP/2. We wanted to build an offline-first application that allowed our users to quickly and easily access their information on the go regardless of their network connection. We noticed an immediate change; our users spent twice as long on the site, they consumed 15x less data, and enjoyed a 3x faster load times. In this presentation, we’ll cover our journey and the lessons that we learnt along the way as well as many real-world, practical tips that you can use when building your own web apps.

Transcript

1. Blink and you’ll miss it Building a Progressive Web App with HTTP/2
2. Dean Hume @deanohume
3. I work for a company called Settled
5. Instead ➔ Transparent ➔ Online ➔ Everything to help you get “Settled” into your new home
6. Our Customers 56%
7. • Was accessible on any device We needed an experience that:
8. • Was accessible on any device • Was fast We needed an experience that:
9. • Was accessible on any device • Was fast • Works with little or no internet connection We needed an experience that:
10. • Was accessible on any device • Was fast • Works with little or no internet connection • Used one codebase We needed an experience that:
11. • Was accessible on any device • Was fast • Works with little or no internet connection • Used one codebase • Had an “app-like” feel We needed an experience that:
12. Progressive Web Apps
13. This is our journey
14. This talk 1. Basics of progressive web apps
15. This talk 1. Basics of progressive web apps 2. Fast
16. This talk 1. Basics of progressive web apps 2. Fast 3. Reliable
17. This talk 1. Basics of progressive web apps 2. Fast 3. Reliable 4. Look and feel
18. The basics of Progressive Web Apps
19. These apps aren’t packaged and deployed through stores, they’re just websites that took all the right vitamins. Alex Russell “
20. Building blocks Website
21. Building blocks Website Service Worker
22. Building blocks Website Service Worker Manifest File
23. Building blocks Website HTTPS Service Worker Manifest File
24. Think of your web apps requests as planes taking off. ServiceWorker is the air traffic controller that routes the requests. Jeff Posnick “
25. Behind the scenes
26. With Service Workers
27. With Service Workers
28. With Service Workers
29. With Service Workers
30. Service Workers are the key to unlocking the power
31. The perfect progressive enhancement.
32. HTTPS Only
33. Free SSL
34. Support
35. You are already using them
36. 2. Fast
37. Caching
38. Caching HTTP/2
39. Caching HTTP/2 Techniques
40. Caching
41. With Service Workers
42. With Service Workers
43. First Visit
46. Register
47. Register Install
48. Register Install Activate
49. const cacheName = ‘pageCache’; Caching
50. const cacheName = ‘pageCache’; this.addEventListener('install', event => { event.waitUntil(caches.open(cacheName) .then(function(cache) { }) ); }); Caching
51. 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']); }) ); }); Caching
52. 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); }) ); }); Caching
53. bit.ly/sw-toolbox
54. ★ Fresh visit - 2 secs ★ Cached visit - 500 ms ★ Less load on the server
55. HTTP/2
56. source: blog.cloudflare.com
57. source: blog.cloudflare.com
58. HTTPS
59. npm install spdy
60. npm install spdy yarn add
61. const spdy = require('spdy'); const express = require('express'); const app = express(); HTTP/2
62. const spdy = require('spdy'); const express = require('express'); const app = express(); // Any incoming requests app.get('/home', (req, res) => { res.status(200).json({message: 'ok'}); }); HTTP/2
63. const spdy = require('spdy'); const express = require('express'); const app = express(); // Any incoming requests app.get('/home', (req, res) => { res.status(200).json({message: 'ok'}); }); // Create the Server 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
64. Client Side
65. Server Side
66. Techniques
67. We used no JavaScript frameworks.
68. We rendered the page server-side.
69. We experimented with HTTP/2 Push.
71. Without H2 Push
72. With H2 Push
74. H2 Push bit.ly/server-push-http2
75. We also used prefetch.
78. <link rel="prefetch" href="//example.com">
79. We tested using Lighthouse.
80. Audit your Progressive Web App
81. bit.ly/pwa-lighthouse
82. 15 x less data
83. 15 x less data 3x faster
84. Caching HTTP/2 Techniques Summary
86. Offline
87. With Service Workers
88. this.addEventListener('fetch', event => { };
89. this.addEventListener('fetch', event => { // Check if the user navigated if (event.request.method === 'GET' && event.request.headers.get('accept').includes('text/html')) { // Respond appropriately } };
90. 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'); })); } };
92. Network First
93. Offline Applications bit.ly/offline-page
94. Offline Analytics github.com/GoogleChrome/sw-helpers
95. 3rd Party Scripts
96. Server Fails
98. Using Service Workers
99. Using Service Workers
100. With Service Workers
101. function timeout(delay) { return new Promise(function(resolve, reject) { setTimeout(function(){ resolve(new Response('', { status: 408, statusText: 'Request timed out.' })); }, delay); }); }
102. 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 => { });
103. 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)])); });
104. bit.ly/sw-toolbox
105. toolbox.router.get('/(.*)', global.toolbox.cacheFirst, { });
106. toolbox.router.get('/(.*)', global.toolbox.cacheFirst, { origin: /\.google\.com$/, });
107. toolbox.router.get('/(.*)', global.toolbox.cacheFirst, { origin: /\.google\.com$/, cache: { name: 'javascript', networkTimeoutSeconds: 4 } });
108. bit.ly/sw-timeout
109. App-like Picture of mobile phones Look & Feel
111. App-like Picture of mobile phones Look & Feel ❖ Manifest file
112. App-like Picture of mobile phones ❖ Manifest file ❖ Add to Home Screen Look & Feel
113. Manifest A simple JSON file that allows you to control how your app appears to the user
114. Look and feel
115. { 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" }
116. { 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" }
117. { 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" }
118. <!doctype html> <html lang="en"> <head> <link rel="manifest" href="manifest.json"> </head> <body> </body> </html>
119. Manifest bit.ly/manifest-json
120. Add to home screen
121. Add to home screen 1. You need a manifest.json file
122. Add to home screen 1. You need a manifest.json file 2. Your manifest file needs a start URL
123. Add to home screen 1. You need a manifest.json file 2. Your manifest file needs a start URL 3. You need a 144x144 PNG icon
124. Add to home screen 1. You need a manifest.json file 2. Your manifest file needs a start URL 3. You need a 144x144 PNG icon 4. Your site is using a Service Worker running over HTTPS
125. Add to home screen 1. You need a manifest.json file 2. Your manifest file needs a start URL 3. You need a 144x144 PNG icon 4. Your site is using a Service Worker running over HTTPS 5. The user has visited your site at least twice, with at least five minutes between visits.
126. { 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" }
127. H S
128. App-like Picture of mobile phones Summary
129. App-like Picture of mobile phones Summary ❖ Fast
130. App-like Picture of mobile phones Summary ❖ Fast ❖ Reliable
131. App-like Picture of mobile phones Summary ❖ Fast ❖ Reliable ❖ Look & Feel
132. What’s still to come?
133. Push Notifications
134. Web Share
135. Web Share bit.ly/webshare-api
136. Brotli
137. We are still learning
140. Thank you! @deanohume