A presentation at Squiz Summit 2018 in in London, UK by Dave Letorey
THE HITCHHIKERS GUIDE TO PROGRESSIVE WEB APPS Dave Letorey Matrix Evangelist
Web Apps or Native Apps
Web Apps or Native Apps
Web Apps or Native Apps
Web Apps or Native Apps
By DAVE LETOREY
Contents
Contents • The Web continues to win
Contents • The Web continues to win • What are PWAs
Contents • The Web continues to win • What are PWAs • Why PWAs
Contents • The Web continues to win • What are PWAs • Why PWAs • PWAs the Technology
Contents • The Web continues to win • What are PWAs • Why PWAs • PWAs the Technology • Still to come
Contents • The Web continues to win • What are PWAs • Why PWAs • PWAs the Technology • Still to come • PWA Examples
Check out the Summit App
Check out the Summit App http://example.com
The Web continues to win
The World Wide Web (www)
The World Wide Web (www) http://info.cern.ch/Proposal.html
The World Wide Web (www) http://info.cern.ch/Proposal.html
The First Website
The First Website http://info.cern.ch/hypertext/WWW/TheProject.html
The First MultiOS Browser
The First MultiOS Browser https://twitter.com/jensimmons/status/1046752366018613248
CD ROMS (MS Encarta)
CD ROMS (MS Encarta)
CSS & JavaScript
CSS & JavaScript
Flash Sites
Flash Sites
Flash Sites
Flash Sites https://www.youtube.com/watch?v=9Y-ESJS911c
HTML 5.0
HTML 5.0
Apple iPhone
Apple iPhone https://www.youtube.com/watch?v=MnrJzXM7a6o
Apple iPhone https://www.youtube.com/watch?v=MnrJzXM7a6o
Apple iPhone https://www.youtube.com/watch?v=MnrJzXM7a6o
Responsive Web Design
Responsive Web Design http://ami.responsivedesign.is/?url=https%3A%2F%2Falistapart.com%2Farticle%2Fresponsive-web-design
Progressive Web Apps
Progressive Web Apps
What are PWAs Progressive Web Apps
Progressive Web App
Progressive Web App
Progressive Web App
Progressive Web App
Progressive Web App
Progressive Web App
Progressive Web App
Progressive Web App
Progressive Web App
Progressive Web App
Progressive Web App https://fberriman.com/2017/06/26/naming-progressive-web-apps/
Progressive Web App https://fberriman.com/2017/06/26/naming-progressive-web-apps/
Progressive Web App
Responsive
Responsive
Connectivity Independent
Connectivity Independent
App-Like aka App-y
App-Like aka App-y
Fresh
Fresh
Safe
Safe
Why PWAs
WWW is the Biggest Platform
WWW is the Biggest Platform https://www.slideshare.net/TheBlackFin/google-io-2017-full-recap
Not everyone has…
Not everyone has…
Data is a critical
Data is a critical https://medium.com/@anicollected/conquering-africa-the-story-of-transsion-maker-of-tecno-infinix-and-itel-phones-ea163008ee84
Memories are important
Memories are important
Memories are important
Every Step costs you 20%
Every Step costs you 20% https://medium.com/gabor/every-step-costs-you-20-of-users-b613a804c329
Almost no one uses an app
Almost no one uses an app http://appleinsider.com/articles/09/02/19/iphone_app_usage_declining_rapidly_after_first_downloads
Analytics
Analytics
Features Native v PWA
Features Native v PWA
Features Native v PWA
Features Native v PWA
Features Native v PWA
Features Native v PWA
Features Native v PWA
Features Native v PWA
Features Native v PWA
Features Native v PWA
Features Native v PWA
Features Native v PWA
Features Native v PWA
Features Native v PWA
Features Native v PWA
Features Native v PWA
Features Native v PWA
Features Native v PWA
Features Native v PWA
Features Native v PWA
PWAs the Technology
The Basics
The Basics https://matrix.squiz.co.uk/h2g2/index.html
The Basics
The Basics https://matrix.squiz.co.uk/h2g2/index.html
SVG
SVG https://caniuse.com/#feat=svg
SVG
SVG https://caniuse.com/#feat=svg
CSS
CSS https://caniuse.com/#search=css%20animation
CSS https://caniuse.com/#search=css%20animation
CSS https://caniuse.com/#search=css%20animation
Progressive Web Apps
Progressive Web Apps
Service Workers
Service Workers
Service Workers
Service Workers
Service Workers
Service Workers
Service Workers
Service Workers
Service Workers
Service Workers
Service Workers
Service Workers
Service Workers
Service Workers
Service Workers
Service Workers Return requests from Cache
Service Workers Return requests from Cache Fetch requests from the Network
Service Workers Return requests from Cache Fetch requests from the Network Cache requests for the future
Service Workers Return requests from Cache Fetch requests from the Network Cache requests for the future Check to see if there’s a connection
Service Workers Return requests from Cache Fetch requests from the Network Cache requests for the future Check to see if there’s a connection Set up promises if something is not ready
Service Worker Scope
Service Worker Scope https://example.com/js/sw.js
Service Worker Scope https://example.com/js/sw.js https://example.com/sw.js
Service Worker Scope https://example.com/js/sw.js https://example.com/sw.js https://example.com/myapp/sw.js
Registering a Service Worker
Registering a Service Worker
<link rel=“serviceworker” href=“/sw.js”>Registering a Service Worker
<link rel=“serviceworker” href=“/sw.js”> <script> navigator.serviceWorker.register(‘/sw.js’); </script>Service Worker support
Service Worker support https://caniuse.com/#search=service%20worker
Feature Detection
Feature Detection
<script>Feature Detection
<script> if (navigator.serviceWorker) {Feature Detection
<script> if (navigator.serviceWorker) { navigator.serviceWorker.register('/sw.js')Feature Detection
<script> if (navigator.serviceWorker) { navigator.serviceWorker.register('/sw.js') } </script>Inside the Service Worker
Inside the Service Worker const version = 'v0.01';
Inside the Service Worker const version = 'v0.01'; const staticCacheName = 'staticfiles';
Inside the Service Worker const version = 'v0.01'; const staticCacheName = 'staticfiles'; addEventListener('install', installEvent !=> {
Inside the Service Worker const version = 'v0.01'; const staticCacheName = 'staticfiles'; addEventListener('install', installEvent !=> { installEvent.waitUntil(
Inside the Service Worker const version = 'v0.01'; const staticCacheName = 'staticfiles'; addEventListener('install', installEvent !=> { installEvent.waitUntil( caches.open(staticCacheName)
Inside the Service Worker const version = 'v0.01'; const staticCacheName = 'staticfiles'; addEventListener('install', installEvent !=> { installEvent.waitUntil( caches.open(staticCacheName) .then( staticCache !=> {
Inside the Service Worker const version = 'v0.01'; const staticCacheName = 'staticfiles'; addEventListener('install', installEvent !=> { installEvent.waitUntil( caches.open(staticCacheName) .then( staticCache !=> { return staticCache.addAll([ ‘https:!//example.com/css/style.css', ‘https:!//example.com/js/scripts.js', ‘https:!//example.com/images/banner.jpg'
Inside the Service Worker const version = 'v0.01'; const staticCacheName = 'staticfiles'; addEventListener('install', installEvent !=> { installEvent.waitUntil( caches.open(staticCacheName) .then( staticCache !=> { return staticCache.addAll([ ‘https:!//example.com/css/style.css', ‘https:!//example.com/js/scripts.js', ‘https:!//example.com/images/banner.jpg' ]); !// end return addAll }) !// end open then ); !// end waitUntil }); !// end addEventListener
Inside the Service Worker
Inside the Service Worker addEventListener('fetch', fetchEvent !=> { const request = fetchEvent.request; fetchEvent.respondWith( !// first look in the cache caches.match(request) .then ( responseFromCache !=> { if (responseFromCache) { return responseFromCache; } !// end if !// Otherwise fetch from the network return fetch(request); }) !// end match then ); !// end respondWith }); !// end addEventListener
Service Worker Cookbook
Service Worker Cookbook https://serviceworke.rs/
Offline using Service Worker
Offline using Service Worker https://matrix.squiz.co.uk/h2g2/index.html
Offline using Service Worker
Offline using Service Worker https://matrix.squiz.co.uk/h2g2/index.html
Offline using Service Worker
Offline using Service Worker https://matrix.squiz.co.uk/h2g2/index.html
PWA Size
PWA Size https://matrix.squiz.co.uk/h2g2/index.html
Web App Manifest
Manifest support
Manifest support https://caniuse.com/#search=web%20app%20manifest
Registering a Manifest
Registering a Manifest
<link rel=“manifest” href=“/manifest.json”>Manifest https://developers.google.com/web/fundamentals/web-app-manifest/
Manifest { "lang": "en", https://developers.google.com/web/fundamentals/web-app-manifest/
Manifest { "lang": "en", "name": "The Hitch Hikers Guide to PWAs", https://developers.google.com/web/fundamentals/web-app-manifest/
Manifest { "lang": "en", "name": "The Hitch Hikers Guide to PWAs", "short_name": "H2G2 PWAs", https://developers.google.com/web/fundamentals/web-app-manifest/
Manifest { "lang": "en", "name": "The Hitch Hikers Guide to PWAs", "short_name": "H2G2 PWAs", "description": "This ia a PWA about PWAs that supports Dave's Squiz Summit Talk", https://developers.google.com/web/fundamentals/web-app-manifest/
Manifest { "lang": "en", "name": "The Hitch Hikers Guide to PWAs", "short_name": "H2G2 PWAs", "description": "This ia a PWA about PWAs that supports Dave's Squiz Summit Talk", "theme_color": "#222222", https://developers.google.com/web/fundamentals/web-app-manifest/
Manifest { "lang": "en", "name": "The Hitch Hikers Guide to PWAs", "short_name": "H2G2 PWAs", "description": "This ia a PWA about PWAs that supports Dave's Squiz Summit Talk", "theme_color": "#222222", "background_color": "#222222", https://developers.google.com/web/fundamentals/web-app-manifest/
Manifest { "lang": "en", "name": "The Hitch Hikers Guide to PWAs", "short_name": "H2G2 PWAs", "description": "This ia a PWA about PWAs that supports Dave's Squiz Summit Talk", "theme_color": "#222222", "background_color": "#222222", "start_url": “/h2g2/index.html”, https://developers.google.com/web/fundamentals/web-app-manifest/
Manifest { "lang": "en", "name": "The Hitch Hikers Guide to PWAs", "short_name": "H2G2 PWAs", "description": "This ia a PWA about PWAs that supports Dave's Squiz Summit Talk", "theme_color": "#222222", "background_color": "#222222", "start_url": “/h2g2/index.html”, "display": "standalone", https://developers.google.com/web/fundamentals/web-app-manifest/
Manifest { } "lang": "en", "name": "The Hitch Hikers Guide to PWAs", "short_name": "H2G2 PWAs", "description": "This ia a PWA about PWAs that supports Dave's Squiz Summit Talk", "theme_color": "#222222", "background_color": "#222222", "start_url": “/h2g2/index.html”, "display": "standalone", "icons": [ { "src": "/images/small-icon.png", "sizes": "48x48", "type": "image/png" }, { "src": "/images/large-icon.png", "sizes": "512x512", "type": "image/png" } ] https://developers.google.com/web/fundamentals/web-app-manifest/
Manifest { } "lang": "en", "name": "The Hitch Hikers Guide to PWAs", "short_name": "H2G2 PWAs", "description": "This ia a PWA about PWAs that supports Dave's Squiz Summit Talk", "theme_color": "#222222", "background_color": "#222222", "start_url": “/h2g2/index.html”, "display": "standalone", "icons": [ { "src": "/images/small-icon.png", "sizes": "48x48", "type": "image/png" }, { "src": "/images/large-icon.png", "sizes": "512x512", "type": "image/png" } ] https://developers.google.com/web/fundamentals/web-app-manifest/
Display
“display”: ”browser” Display
“display”: “standalone” “display”: ”browser” Display
“display”: “fullscreen” “display”: “standalone” “display”: ”browser” Display
Splash Screen
Splash Screen https://matrix.squiz.co.uk/h2g2/index.html
PWA Tools
PWA Tools https://developers.google.com/web/tools/lighthouse/
PWA Tools
PWA Tools https://developers.google.com/web/tools/lighthouse/
PWA Tools https://developers.google.com/web/tools/lighthouse/
PWA Tools https://developers.google.com/web/tools/lighthouse/
PWAs Still to come
Badging
Badging https://twitter.com/kennethrohde/status/1046889939198197760
Phone Authentication
Phone Authentication https://www.w3.org/2018/04/pressrelease-webauthn-fido2.html.en
PWA Examples
Finacial Times
Finacial Times https://app.ft.com
Finacial Times https://app.ft.com
Finacial Times https://app.ft.com
Pintrest
Pintrest https://medium.com/@Pinterest_Engineering/a-one-year-pwa-retrospective-f4a2f4129e05
Pintrest Effect of launching a PWA https://medium.com/@Pinterest_Engineering/a-one-year-pwa-retrospective-f4a2f4129e05
Pintrest Effect of launching a PWA •Weekly active users on mobile web have increased 103% year-over-year overall https://medium.com/@Pinterest_Engineering/a-one-year-pwa-retrospective-f4a2f4129e05
Pintrest Effect of launching a PWA •Weekly active users on mobile web have increased 103% year-over-year overall •156% increase in Brazil https://medium.com/@Pinterest_Engineering/a-one-year-pwa-retrospective-f4a2f4129e05
Pintrest Effect of launching a PWA •Weekly active users on mobile web have increased 103% year-over-year overall •156% increase in Brazil •312% increase in India https://medium.com/@Pinterest_Engineering/a-one-year-pwa-retrospective-f4a2f4129e05
Pintrest Effect of launching a PWA •Weekly active users on mobile web have increased 103% year-over-year overall •156% increase in Brazil •312% increase in India •296% increase in session length https://medium.com/@Pinterest_Engineering/a-one-year-pwa-retrospective-f4a2f4129e05
Pintrest Effect of launching a PWA •Weekly active users on mobile web have increased 103% year-over-year overall •156% increase in Brazil •312% increase in India •296% increase in session length •401% increase in Pins seen https://medium.com/@Pinterest_Engineering/a-one-year-pwa-retrospective-f4a2f4129e05
Pintrest Effect of launching a PWA •Weekly active users on mobile web have increased 103% year-over-year overall •156% increase in Brazil •312% increase in India •296% increase in session length •401% increase in Pins seen •295% of users more likely to save a pin https://medium.com/@Pinterest_Engineering/a-one-year-pwa-retrospective-f4a2f4129e05
Pintrest Effect of launching a PWA •Weekly active users on mobile web have increased 103% year-over-year overall •156% increase in Brazil •312% increase in India •296% increase in session length •401% increase in Pins seen •295% of users more likely to save a pin •370% increase in logins https://medium.com/@Pinterest_Engineering/a-one-year-pwa-retrospective-f4a2f4129e05
Pintrest Effect of launching a PWA •Weekly active users on mobile web have increased 103% year-over-year overall •156% increase in Brazil •312% increase in India •296% increase in session length •401% increase in Pins seen •295% of users more likely to save a pin •370% increase in logins •843% increase in signups https://medium.com/@Pinterest_Engineering/a-one-year-pwa-retrospective-f4a2f4129e05
Pintrest Effect of launching a PWA •Weekly active users on mobile web have increased 103% year-over-year overall •156% increase in Brazil •312% increase in India •296% increase in session length •401% increase in Pins seen •295% of users more likely to save a pin •370% increase in logins •843% increase in signups •In 6 month 800k weekly users using our PWA like a native app (from their homescreen) https://medium.com/@Pinterest_Engineering/a-one-year-pwa-retrospective-f4a2f4129e05
Uber
Uber https://eng.uber.com/m-uber/
What we’ve covered
What we’ve covered • The Web continues to win
What we’ve covered • The Web continues to win • What are PWAs
What we’ve covered • The Web continues to win • What are PWAs • Why PWAs
What we’ve covered • The Web continues to win • What are PWAs • Why PWAs • PWAs the Technology
What we’ve covered • The Web continues to win • What are PWAs • Why PWAs • PWAs the Technology • Still to come
What we’ve covered • The Web continues to win • What are PWAs • Why PWAs • PWAs the Technology • Still to come • PWA Examples
Check out the Summit App
Check out the Summit App http://example.com
THE HITCHHIKERS GUIDE TO PROGRESSIVE WEB APPS Dave Letorey Matrix Evangelist
Progressive web apps are the next generation of web design. Built to be faster and ultra responsive, PWA drive engagement through things like push notifications. In this talk Dave will take our customer through the fundamentals of PWA and how they can start utilising this method of build to enhance their online experience.
The following resources were mentioned during the presentation or are useful additional information.
Hitch Hikers Guide to the Galaxy, built as a PWA to demonstrate how PWAs a built and work.
Progressive Web App built for Squiz Summit, in London
for free. You
can too.