building an appier web - london web standards - nov 2016
TRANSCRIPT
![Page 1: Building an Appier Web - London Web Standards - Nov 2016](https://reader038.vdocuments.mx/reader038/viewer/2022110108/58eed0611a28ab932a8b46a7/html5/thumbnails/1.jpg)
Building an Appier Web @AndyDavies NCC Group Nov 2016
https://www.flickr.com/photos/alesimages/4215559895
![Page 2: Building an Appier Web - London Web Standards - Nov 2016](https://reader038.vdocuments.mx/reader038/viewer/2022110108/58eed0611a28ab932a8b46a7/html5/thumbnails/2.jpg)
We’re spending more and more time in apps…
© comScore, Inc. Proprietary. 5
Digital media usage time is exploding right now, and it’s predominantly being driven by mobile apps.
476,553 480,967 550,522
409,847 621,410
778,954 77,081
97,440
118,299
0
200,000
400,000
600,000
800,000
1,000,000
1,200,000
1,400,000
1,600,000
Jun-2013 Jun-2014 Jun-2015
Tota
l Min
utes
(MM
)
Desktop Mobile App Mobile Browser Over the past two years, total digital media usage has grown 49% with mobile apps having grown 90% and contributing to 77% of the total increase in time spent. Mobile browser is also seeing very strong growth at 53% and even desktop is still rising.
Growth in Digital Media Time Spent Source: comScore Media Metrix Multi-Platform & Mobile Metrix, U.S., Total Audience
+53% vs. 2013
+90% vs. 2013
+16% vs. 2013
![Page 3: Building an Appier Web - London Web Standards - Nov 2016](https://reader038.vdocuments.mx/reader038/viewer/2022110108/58eed0611a28ab932a8b46a7/html5/thumbnails/3.jpg)
© comScore, Inc. Proprietary. 37
29%
15%
11% 6%
6%
4% 3% 3%
23% Social Networking
Radio
Games
Multimedia
Instant Messengers
Music
Retail
News/Information
All Others
Social Networking, Radio and Games contribute more than half of total time spent on mobile apps. The strength of the top categories highlights that mobile devices are more heavily used for entertainment and communication than their desktop counterparts.
Share of Mobile App Time Spent Source: comScore Media Metrix MP and Mobile Metrix, U.S., Total Audience, June 2015
Social media and entertainment account for the six top app categories and drive two-thirds of total time spent on apps. But our usage can be very specific
![Page 4: Building an Appier Web - London Web Standards - Nov 2016](https://reader038.vdocuments.mx/reader038/viewer/2022110108/58eed0611a28ab932a8b46a7/html5/thumbnails/4.jpg)
What do we like about apps?
https://www.flickr.com/photos/jennicatpink/819741953
![Page 5: Building an Appier Web - London Web Standards - Nov 2016](https://reader038.vdocuments.mx/reader038/viewer/2022110108/58eed0611a28ab932a8b46a7/html5/thumbnails/5.jpg)
Launch from home screen
![Page 6: Building an Appier Web - London Web Standards - Nov 2016](https://reader038.vdocuments.mx/reader038/viewer/2022110108/58eed0611a28ab932a8b46a7/html5/thumbnails/6.jpg)
Splash screen on startup
![Page 7: Building an Appier Web - London Web Standards - Nov 2016](https://reader038.vdocuments.mx/reader038/viewer/2022110108/58eed0611a28ab932a8b46a7/html5/thumbnails/7.jpg)
A simple app…
(App reads data from a monitoring API)
![Page 8: Building an Appier Web - London Web Standards - Nov 2016](https://reader038.vdocuments.mx/reader038/viewer/2022110108/58eed0611a28ab932a8b46a7/html5/thumbnails/8.jpg)
Works offline too
![Page 9: Building an Appier Web - London Web Standards - Nov 2016](https://reader038.vdocuments.mx/reader038/viewer/2022110108/58eed0611a28ab932a8b46a7/html5/thumbnails/9.jpg)
Works offline too
(Cached data, so may be out of date)
![Page 10: Building an Appier Web - London Web Standards - Nov 2016](https://reader038.vdocuments.mx/reader038/viewer/2022110108/58eed0611a28ab932a8b46a7/html5/thumbnails/10.jpg)
Apps have their challenges too
https://www.flickr.com/photos/justinjovellanos/15340862812
![Page 11: Building an Appier Web - London Web Standards - Nov 2016](https://reader038.vdocuments.mx/reader038/viewer/2022110108/58eed0611a28ab932a8b46a7/html5/thumbnails/11.jpg)
“There’s an App for that”…
…but can you can find it?
![Page 12: Building an Appier Web - London Web Standards - Nov 2016](https://reader038.vdocuments.mx/reader038/viewer/2022110108/58eed0611a28ab932a8b46a7/html5/thumbnails/12.jpg)
To help we started with subtle buttons…
but that wasn’t enough…
![Page 13: Building an Appier Web - London Web Standards - Nov 2016](https://reader038.vdocuments.mx/reader038/viewer/2022110108/58eed0611a28ab932a8b46a7/html5/thumbnails/13.jpg)
“Please, please download our app”
![Page 14: Building an Appier Web - London Web Standards - Nov 2016](https://reader038.vdocuments.mx/reader038/viewer/2022110108/58eed0611a28ab932a8b46a7/html5/thumbnails/14.jpg)
“Download our app or else!”
![Page 15: Building an Appier Web - London Web Standards - Nov 2016](https://reader038.vdocuments.mx/reader038/viewer/2022110108/58eed0611a28ab932a8b46a7/html5/thumbnails/15.jpg)
Updates, updates and more updates…
![Page 16: Building an Appier Web - London Web Standards - Nov 2016](https://reader038.vdocuments.mx/reader038/viewer/2022110108/58eed0611a28ab932a8b46a7/html5/thumbnails/16.jpg)
https://www.flickr.com/photos/michigancommunities/4614847059
Installing apps consumes storage and data
![Page 17: Building an Appier Web - London Web Standards - Nov 2016](https://reader038.vdocuments.mx/reader038/viewer/2022110108/58eed0611a28ab932a8b46a7/html5/thumbnails/17.jpg)
https://www.flickr.com/photos/piper/6199548216
So what about the web?
![Page 18: Building an Appier Web - London Web Standards - Nov 2016](https://reader038.vdocuments.mx/reader038/viewer/2022110108/58eed0611a28ab932a8b46a7/html5/thumbnails/18.jpg)
© comScore, Inc. Proprietary. 13
And mobile audience growth is being driven more by mobile web properties, which are actually bigger and growing faster than apps.
A comparison of the Top 1000 Apps vs. the Top 1000 Mobile Web Properties shows a surprising result. Not only do mobile web properties have audiences that are more than 2.5x the size, but these audiences are also growing twice as fast.
Average Monthly Audience: Top 1000 Mobile Apps vs. Top 1000 Mobile Web Properties Source: comScore Mobile Metrix, U.S., Age 18+
-
1,000
2,000
3,000
4,000
5,000
6,000
7,000
8,000
9,000
10,000
Jun-2014 Sep-2014 Dec-2014 Mar-2015 Jun-2015
Uni
que
Vis
itors
(000
)
Apps Mobile Web +42% y/y
+21% y/y
The web has great reach…
![Page 19: Building an Appier Web - London Web Standards - Nov 2016](https://reader038.vdocuments.mx/reader038/viewer/2022110108/58eed0611a28ab932a8b46a7/html5/thumbnails/19.jpg)
and it’s due to the simple power of the URL
http://example.com
![Page 20: Building an Appier Web - London Web Standards - Nov 2016](https://reader038.vdocuments.mx/reader038/viewer/2022110108/58eed0611a28ab932a8b46a7/html5/thumbnails/20.jpg)
https://www.flickr.com/photos/aaronpk/5352508316
Makes the web linkable…
![Page 21: Building an Appier Web - London Web Standards - Nov 2016](https://reader038.vdocuments.mx/reader038/viewer/2022110108/58eed0611a28ab932a8b46a7/html5/thumbnails/21.jpg)
…indexable, searchable
![Page 22: Building an Appier Web - London Web Standards - Nov 2016](https://reader038.vdocuments.mx/reader038/viewer/2022110108/58eed0611a28ab932a8b46a7/html5/thumbnails/22.jpg)
And shareable
https://www.flickr.com/photos/thomashawk/8598744061
![Page 23: Building an Appier Web - London Web Standards - Nov 2016](https://reader038.vdocuments.mx/reader038/viewer/2022110108/58eed0611a28ab932a8b46a7/html5/thumbnails/23.jpg)
Web pages adapt to our diversity of devices
http://www.flickr.com/photos/adactio/12674230513
![Page 24: Building an Appier Web - London Web Standards - Nov 2016](https://reader038.vdocuments.mx/reader038/viewer/2022110108/58eed0611a28ab932a8b46a7/html5/thumbnails/24.jpg)
https://www.flickr.com/photos/protohiro/5769980863
And there are no gatekeepers
![Page 25: Building an Appier Web - London Web Standards - Nov 2016](https://reader038.vdocuments.mx/reader038/viewer/2022110108/58eed0611a28ab932a8b46a7/html5/thumbnails/25.jpg)
Or waiting for updates
https://www.flickr.com/photos/star-bellied-girl/8283340977
![Page 26: Building an Appier Web - London Web Standards - Nov 2016](https://reader038.vdocuments.mx/reader038/viewer/2022110108/58eed0611a28ab932a8b46a7/html5/thumbnails/26.jpg)
What if…
![Page 27: Building an Appier Web - London Web Standards - Nov 2016](https://reader038.vdocuments.mx/reader038/viewer/2022110108/58eed0611a28ab932a8b46a7/html5/thumbnails/27.jpg)
We could combine the richness of apps…
…with the low friction of the web?
![Page 28: Building an Appier Web - London Web Standards - Nov 2016](https://reader038.vdocuments.mx/reader038/viewer/2022110108/58eed0611a28ab932a8b46a7/html5/thumbnails/28.jpg)
https://www.flickr.com/photos/zedzap/13253676614
![Page 29: Building an Appier Web - London Web Standards - Nov 2016](https://reader038.vdocuments.mx/reader038/viewer/2022110108/58eed0611a28ab932a8b46a7/html5/thumbnails/29.jpg)
So what might we need to build it?
https://www.flickr.com/photos/aigle_dore/7912377858
![Page 30: Building an Appier Web - London Web Standards - Nov 2016](https://reader038.vdocuments.mx/reader038/viewer/2022110108/58eed0611a28ab932a8b46a7/html5/thumbnails/30.jpg)
We can already add pages to our home screen
Supported by most major mobile operating systems and browsers(Bookmarks page rather than site)
![Page 31: Building an Appier Web - London Web Standards - Nov 2016](https://reader038.vdocuments.mx/reader038/viewer/2022110108/58eed0611a28ab932a8b46a7/html5/thumbnails/31.jpg)
Can specify the icon etc. via meta tags
<link rel="apple-touch-icon" href="icons/logo/ncc-logo-120x120-ios.png"> <link rel="apple-touch-icon-precomposed" href="icons/logo/ncc-logo-120x120-ios.png"> <link rel="apple-touch-startup-image" href="/images/startup.png">
<meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="black">
(Minimal iOS set, ideally need more icon and splash screen sizesand other mobile browsers prefer different meta data)
![Page 32: Building an Appier Web - London Web Standards - Nov 2016](https://reader038.vdocuments.mx/reader038/viewer/2022110108/58eed0611a28ab932a8b46a7/html5/thumbnails/32.jpg)
W3C App Manifest brings it all together{ "lang": "en", "dir": "ltr", "name": "Monitoring", "description": "Performance and Availability Monitoring by NCC Group", "short_name": "Monitoring", "icons": [ { "src": "icons/logo/ncc-logo-144x144-white.png", "sizes": "144x144", "type": "image/png" },
. . . ],
"scope": "/pwa", "start_url": "/pwa/index.html", "display": "standalone", "orientation": "portrait", "theme_color": "#c41230", "background_color": "#fff", }
https://www.w3.org/TR/appmanifest/
![Page 33: Building an Appier Web - London Web Standards - Nov 2016](https://reader038.vdocuments.mx/reader038/viewer/2022110108/58eed0611a28ab932a8b46a7/html5/thumbnails/33.jpg)
Homescreen Icon{ "lang": "en", "dir": "ltr", "name": "Monitoring", "description": "Performance and Availability Monitoring by NCC Group", "short_name": "Monitoring", "icons": [ { "src": "icons/logo/ncc-logo-144x144-white.png", "sizes": "144x144", "type": "image/png" },
. . . ],
"scope": "/pwa", "start_url": "/pwa/index.html", "display": "standalone", "orientation": "portrait", "theme_color": "#c41230", "background_color": "#fff", }
![Page 34: Building an Appier Web - London Web Standards - Nov 2016](https://reader038.vdocuments.mx/reader038/viewer/2022110108/58eed0611a28ab932a8b46a7/html5/thumbnails/34.jpg)
URL of the page that’s launched{ "lang": "en", "dir": "ltr", "name": "Monitoring", "description": "Performance and Availability Monitoring by NCC Group", "short_name": "Monitoring", "icons": [ { "src": "icons/logo/ncc-logo-144x144-white.png", "sizes": "144x144", "type": "image/png" },
. . . ],
"scope": "/pwa", "start_url": "/pwa/index.html", "display": "standalone", "orientation": "portrait", "theme_color": "#c41230", "background_color": "#fff", }
![Page 35: Building an Appier Web - London Web Standards - Nov 2016](https://reader038.vdocuments.mx/reader038/viewer/2022110108/58eed0611a28ab932a8b46a7/html5/thumbnails/35.jpg)
Splash screen{ "lang": "en", "dir": "ltr", "name": "Monitoring", "description": "Performance and Availability Monitoring by NCC Group", "short_name": "Monitoring", "icons": [ { "src": "icons/logo/ncc-logo-144x144-white.png", "sizes": "144x144", "type": "image/png" },
. . . ],
"scope": "/pwa", "start_url": "/pwa/index.html", "display": "standalone", "orientation": "portrait", "theme_color": "#c41230", "background_color": "#fff", }
![Page 36: Building an Appier Web - London Web Standards - Nov 2016](https://reader038.vdocuments.mx/reader038/viewer/2022110108/58eed0611a28ab932a8b46a7/html5/thumbnails/36.jpg)
Orientation and presence of browser controls{ "lang": "en", "dir": "ltr", "name": "Monitoring", "description": "Performance and Availability Monitoring by NCC Group", "short_name": "Monitoring", "icons": [ { "src": "icons/logo/ncc-logo-144x144-white.png", "sizes": "144x144", "type": "image/png" },
. . . ],
"scope": "/pwa", "start_url": "/pwa/index.html", "display": "standalone", "orientation": "portrait", "theme_color": "#c41230", "background_color": "#fff", }
![Page 37: Building an Appier Web - London Web Standards - Nov 2016](https://reader038.vdocuments.mx/reader038/viewer/2022110108/58eed0611a28ab932a8b46a7/html5/thumbnails/37.jpg)
And can even offer an install prompt
(Browsers use several heuristics before deciding to prompt)
![Page 38: Building an Appier Web - London Web Standards - Nov 2016](https://reader038.vdocuments.mx/reader038/viewer/2022110108/58eed0611a28ab932a8b46a7/html5/thumbnails/38.jpg)
Can listen for install event and track in analytics
window.addEventListener('beforeinstallprompt', function(e) {
e.userChoice.then(function(choiceResult) {
console.log(choiceResult.outcome);
if (choiceResult.outcome == 'dismissed') { // Track not installed } else { // Track installation } }); });
(Chrome supports this but it’s not in AppManifest standard)
![Page 39: Building an Appier Web - London Web Standards - Nov 2016](https://reader038.vdocuments.mx/reader038/viewer/2022110108/58eed0611a28ab932a8b46a7/html5/thumbnails/39.jpg)
Can listen for install event and track in analytics
window.addEventListener('appinstalled', function(e) { // Track installation });
(AppManifest standard proposes this)
![Page 40: Building an Appier Web - London Web Standards - Nov 2016](https://reader038.vdocuments.mx/reader038/viewer/2022110108/58eed0611a28ab932a8b46a7/html5/thumbnails/40.jpg)
But how do we cope with a poor (or no) network?
https://www.flickr.com/photos/odaeus/3942500793
![Page 41: Building an Appier Web - London Web Standards - Nov 2016](https://reader038.vdocuments.mx/reader038/viewer/2022110108/58eed0611a28ab932a8b46a7/html5/thumbnails/41.jpg)
http://alistapart.com/article/application-cache-is-a-douchebag
Our first attempt had a few issues…
![Page 42: Building an Appier Web - London Web Standards - Nov 2016](https://reader038.vdocuments.mx/reader038/viewer/2022110108/58eed0611a28ab932a8b46a7/html5/thumbnails/42.jpg)
https://www.w3.org/TR/service-workers/
So we tried another approach
![Page 43: Building an Appier Web - London Web Standards - Nov 2016](https://reader038.vdocuments.mx/reader038/viewer/2022110108/58eed0611a28ab932a8b46a7/html5/thumbnails/43.jpg)
![Page 44: Building an Appier Web - London Web Standards - Nov 2016](https://reader038.vdocuments.mx/reader038/viewer/2022110108/58eed0611a28ab932a8b46a7/html5/thumbnails/44.jpg)
Service Worker is an in-browser network proxy
that can intercept requests and responses
![Page 45: Building an Appier Web - London Web Standards - Nov 2016](https://reader038.vdocuments.mx/reader038/viewer/2022110108/58eed0611a28ab932a8b46a7/html5/thumbnails/45.jpg)
<script>
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('serviceworker.js', { scope: '/' }).then(function(registration) {
// Anything else you want to do with registration // e.g. subscribe to push messages
}).catch(function(err) { console.log('Can\'t register service worker: ', err); }); }
</script>
Register a Service Worker
![Page 46: Building an Appier Web - London Web Standards - Nov 2016](https://reader038.vdocuments.mx/reader038/viewer/2022110108/58eed0611a28ab932a8b46a7/html5/thumbnails/46.jpg)
Option to install via Link may be coming
<link rel="serviceworker" scope="/" href=“/serviceworker.js">
or
Link </serviceworker.js>; rel=serviceworker scope=/
(Origin trial in Chrome, under consideration in Firefox)
![Page 47: Building an Appier Web - London Web Standards - Nov 2016](https://reader038.vdocuments.mx/reader038/viewer/2022110108/58eed0611a28ab932a8b46a7/html5/thumbnails/47.jpg)
Service Worker Skeleton
self.addEventListener('install', function(event) { self.skipWaiting();
});
self.addEventListener('activate', function(event) {
});
self.addEventListener('fetch', function(event) {
});
![Page 48: Building an Appier Web - London Web Standards - Nov 2016](https://reader038.vdocuments.mx/reader038/viewer/2022110108/58eed0611a28ab932a8b46a7/html5/thumbnails/48.jpg)
What are apps actually made of?
![Page 49: Building an Appier Web - London Web Standards - Nov 2016](https://reader038.vdocuments.mx/reader038/viewer/2022110108/58eed0611a28ab932a8b46a7/html5/thumbnails/49.jpg)
Shell Content
Many apps are made of a shell and the content
![Page 50: Building an Appier Web - London Web Standards - Nov 2016](https://reader038.vdocuments.mx/reader038/viewer/2022110108/58eed0611a28ab932a8b46a7/html5/thumbnails/50.jpg)
Going offline - caching assets on startupvar cacheVersion = "v1";
var cacheResources = [ "/pwa/index.html", "/pwa/icons/logo/ncc-logo.svg", "/pwa/icons/ui/sprite.svg" // etc ];
self.addEventListener('install', function(event) { self.skipWaiting(); event.waitUntil( caches.open(cacheVersion).then(function(cache) { return cache.addAll(cacheResources); }) ); });
![Page 51: Building an Appier Web - London Web Standards - Nov 2016](https://reader038.vdocuments.mx/reader038/viewer/2022110108/58eed0611a28ab932a8b46a7/html5/thumbnails/51.jpg)
Going offline - retrieving from cache on fetch
self.addEventListener('fetch', function(event) { event.respondWith( caches.match(event.request).then(function(response) { return response || fetch(event.request); }) ); });
Try the cache first and go to the network if there’s no match
![Page 52: Building an Appier Web - London Web Standards - Nov 2016](https://reader038.vdocuments.mx/reader038/viewer/2022110108/58eed0611a28ab932a8b46a7/html5/thumbnails/52.jpg)
Going offline - cleanup previous resources
self.addEventListener('activate', function(event) {
// Remove outdated caches, migrate data etc,
});
![Page 53: Building an Appier Web - London Web Standards - Nov 2016](https://reader038.vdocuments.mx/reader038/viewer/2022110108/58eed0611a28ab932a8b46a7/html5/thumbnails/53.jpg)
Caching as a fallback for network
• Make a request• Succeeds - cache response and return it• Fails - check cache and return cached response
• Network request fails and not in cache ¯\_( )_/¯
(OK so you probably want to manage the users experience in the last case)
![Page 54: Building an Appier Web - London Web Standards - Nov 2016](https://reader038.vdocuments.mx/reader038/viewer/2022110108/58eed0611a28ab932a8b46a7/html5/thumbnails/54.jpg)
Caching patterns depend on use case, some very helpful resources
Mozilla https://serviceworke.rs/
Jake Archibald https://jakearchibald.com/2014/offline-cookbook/
ServiceWork Toolbox https://github.com/GoogleChrome/sw-toolbox
![Page 55: Building an Appier Web - London Web Standards - Nov 2016](https://reader038.vdocuments.mx/reader038/viewer/2022110108/58eed0611a28ab932a8b46a7/html5/thumbnails/55.jpg)
Service Worker also enables other features
![Page 56: Building an Appier Web - London Web Standards - Nov 2016](https://reader038.vdocuments.mx/reader038/viewer/2022110108/58eed0611a28ab932a8b46a7/html5/thumbnails/56.jpg)
https://www.w3.org/TR/push-api/
Push Notifications
![Page 57: Building an Appier Web - London Web Standards - Nov 2016](https://reader038.vdocuments.mx/reader038/viewer/2022110108/58eed0611a28ab932a8b46a7/html5/thumbnails/57.jpg)
When put together…
![Page 58: Building an Appier Web - London Web Standards - Nov 2016](https://reader038.vdocuments.mx/reader038/viewer/2022110108/58eed0611a28ab932a8b46a7/html5/thumbnails/58.jpg)
When put together…
![Page 59: Building an Appier Web - London Web Standards - Nov 2016](https://reader038.vdocuments.mx/reader038/viewer/2022110108/58eed0611a28ab932a8b46a7/html5/thumbnails/59.jpg)
(App reads data from a monitoring API)
When put together…
![Page 60: Building an Appier Web - London Web Standards - Nov 2016](https://reader038.vdocuments.mx/reader038/viewer/2022110108/58eed0611a28ab932a8b46a7/html5/thumbnails/60.jpg)
When put together…
![Page 61: Building an Appier Web - London Web Standards - Nov 2016](https://reader038.vdocuments.mx/reader038/viewer/2022110108/58eed0611a28ab932a8b46a7/html5/thumbnails/61.jpg)
(Cached data, so may be out of date)
When put together…
![Page 62: Building an Appier Web - London Web Standards - Nov 2016](https://reader038.vdocuments.mx/reader038/viewer/2022110108/58eed0611a28ab932a8b46a7/html5/thumbnails/62.jpg)
Powerful APIs (inc Service Worker) require HTTPS
https://www.flickr.com/photos/zebble/6080622
![Page 63: Building an Appier Web - London Web Standards - Nov 2016](https://reader038.vdocuments.mx/reader038/viewer/2022110108/58eed0611a28ab932a8b46a7/html5/thumbnails/63.jpg)
“The future is here, it’s just unevenly distributed”
✓ ✓ ✓ WiP ?✓
![Page 64: Building an Appier Web - London Web Standards - Nov 2016](https://reader038.vdocuments.mx/reader038/viewer/2022110108/58eed0611a28ab932a8b46a7/html5/thumbnails/64.jpg)
We’re getting better access to native features
• Camera• Notifications• Location• Geofencing
• Alarms• Vibration• Sharing• Battery• and more…
(On some platforms)
![Page 65: Building an Appier Web - London Web Standards - Nov 2016](https://reader038.vdocuments.mx/reader038/viewer/2022110108/58eed0611a28ab932a8b46a7/html5/thumbnails/65.jpg)
background sync
https://wicg.github.io/BackgroundSync/spec/
Background Sync (draft)
![Page 66: Building an Appier Web - London Web Standards - Nov 2016](https://reader038.vdocuments.mx/reader038/viewer/2022110108/58eed0611a28ab932a8b46a7/html5/thumbnails/66.jpg)
Easier payment mechanisms
https://www.w3.org/TR/payment-request/
![Page 67: Building an Appier Web - London Web Standards - Nov 2016](https://reader038.vdocuments.mx/reader038/viewer/2022110108/58eed0611a28ab932a8b46a7/html5/thumbnails/67.jpg)
https://www.flickr.com/photos/acearchie/4369849179
“So how do we test this thing?”
![Page 68: Building an Appier Web - London Web Standards - Nov 2016](https://reader038.vdocuments.mx/reader038/viewer/2022110108/58eed0611a28ab932a8b46a7/html5/thumbnails/68.jpg)
Chrome DevTools
![Page 69: Building an Appier Web - London Web Standards - Nov 2016](https://reader038.vdocuments.mx/reader038/viewer/2022110108/58eed0611a28ab932a8b46a7/html5/thumbnails/69.jpg)
https://github.com/GoogleChrome/lighthouse
Lighthouse
![Page 70: Building an Appier Web - London Web Standards - Nov 2016](https://reader038.vdocuments.mx/reader038/viewer/2022110108/58eed0611a28ab932a8b46a7/html5/thumbnails/70.jpg)
https://speedcurve.com/blog/pwa-performance/
WebPageTest
![Page 71: Building an Appier Web - London Web Standards - Nov 2016](https://reader038.vdocuments.mx/reader038/viewer/2022110108/58eed0611a28ab932a8b46a7/html5/thumbnails/71.jpg)
WebPageTest
![Page 72: Building an Appier Web - London Web Standards - Nov 2016](https://reader038.vdocuments.mx/reader038/viewer/2022110108/58eed0611a28ab932a8b46a7/html5/thumbnails/72.jpg)
You can deploy them today
• 3x more time spent on site• 40% higher re-engagement rate• 70% greater conversion rate for
those arriving via Homescreen• 3x lower data usage
![Page 73: Building an Appier Web - London Web Standards - Nov 2016](https://reader038.vdocuments.mx/reader038/viewer/2022110108/58eed0611a28ab932a8b46a7/html5/thumbnails/73.jpg)
https://flights.airberlin.com/en-US/progressive-web-app
AirBerlin demo at Google I/O
![Page 74: Building an Appier Web - London Web Standards - Nov 2016](https://reader038.vdocuments.mx/reader038/viewer/2022110108/58eed0611a28ab932a8b46a7/html5/thumbnails/74.jpg)
My current favourite…
Doesn’t support notifications yet……hopefully will do soon
![Page 75: Building an Appier Web - London Web Standards - Nov 2016](https://reader038.vdocuments.mx/reader038/viewer/2022110108/58eed0611a28ab932a8b46a7/html5/thumbnails/75.jpg)
These apps aren’t packaged and deployed through stores, they’re just websites that took all the right vitamins
https://infrequently.org/2015/06/progressive-apps-escaping-tabs-without-losing-our-soul/
Alex Russell, Google
![Page 76: Building an Appier Web - London Web Standards - Nov 2016](https://reader038.vdocuments.mx/reader038/viewer/2022110108/58eed0611a28ab932a8b46a7/html5/thumbnails/76.jpg)
I still have questions…
• What might not be suitable as a progressive web app?• Can we build PWAs that are as fast and frictionless as native?• How can we sell our apps, will we need app stores?• How do we avoid an uncanny UI valley?• What happens to storage when every site is a PWA?
![Page 77: Building an Appier Web - London Web Standards - Nov 2016](https://reader038.vdocuments.mx/reader038/viewer/2022110108/58eed0611a28ab932a8b46a7/html5/thumbnails/77.jpg)
“Every step on the path to a PWA makes sense on it’s own”Jason Grigsby
![Page 78: Building an Appier Web - London Web Standards - Nov 2016](https://reader038.vdocuments.mx/reader038/viewer/2022110108/58eed0611a28ab932a8b46a7/html5/thumbnails/78.jpg)
http://www.flickr.com/photos/auntiep/5024494612
@AndyDavies
http://slideshare.net/andydavies