Explores progressive web apps, what advantages they have versus native apps, how to build, and test them, and some of the challenges we still have ahead. Slides from talk at Velocity Amsterdam 2016

1. Building an Appier Web
@AndyDavies NCC Group Nov 2016
https://www.flickr.com/photos/alesimages/4215559895

2. We’re spending more and more time in apps…
© comScore, Inc. Propri
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,95477,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
TotalMinutes(MM)
Desktop Mobile App Mobile Browser Over the past
years, total dig
media usage h
grown 49% wit
mobile apps ha
grown 90% an
contributing to
of the total incr
in time spent.
Mobile browse
also seeing ve
strong growth
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

3. © comScore, Inc. Prop
29%
15%
11%
6%
6%
4%
3%
3%
23%
Social Networking
Radio
Games
Multimedia
Instant Messengers
Music
Retail
News/Information
All Others
Social Networ
Radio and Ga
contribute mo
than half of to
time spent on
mobile apps.
strength of the
categories
highlights that
mobile device
more heavily
for entertainm
and communi
than their des
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

4. What do we like about apps?
https://www.flickr.com/photos/jennicatpink/819741953

5. Launch from home screen

6. Splash screen on startup

7. A simple app…
(App reads data from
a monitoring API)

8. Works offline too

9. Works offline too
(Cached data, so
may be out of date)

10. Apps have their challenges too
https://www.flickr.com/photos/justinjovellanos/15340862812

11. “There’s an App for that”…
…but can you can find it?

12. To help we started with subtle buttons…
but that wasn’t enough…

13. “Please, please download our app”

14. “Download our app or else!”

15. Updates, updates and more updates…

16. https://www.flickr.com/photos/michigancommunities/4614847059
Installing apps consumes storage and data

17. https://www.flickr.com/photos/piper/6199548216
So what about the web?

18. © comScore, Inc. Pro
And mobile audience growth is being driven more by mobile we
properties, which are actually bigger and growing faster than ap
A comparison
Top 1000 App
the Top 1000
Web Propertie
shows a surp
result. Not on
mobile web
properties ha
audiences tha
more than 2.5
size, but thes
audiences are
growing twice
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
UniqueVisitors(000)
Apps Mobile Web +42%
y/y
+21%
y/y
The web has great reach…

19. and it’s due to the simple power of the URL
http://example.com

20. https://www.flickr.com/photos/aaronpk/5352508316
Makes the web linkable…

21. …indexable, searchable

22. And shareable
https://www.flickr.com/photos/thomashawk/8598744061

23. Web pages adapt to our diversity of devices
http://www.flickr.com/photos/adactio/12674230513

24. https://www.flickr.com/photos/protohiro/5769980863
And there are no gatekeepers

25. Or waiting for updates
https://www.flickr.com/photos/star-bellied-girl/8283340977

26. What if…

27. We could combine the richness of apps…
…with the low friction of the web?

28. https://www.flickr.com/photos/zedzap/13253676614

29. So what might we need to build it?
https://www.flickr.com/photos/aigle_dore/7912377858

30. We can already add pages to our home screen
Supported by most major mobile
operating systems and browsers
(Bookmarks page rather than site)

31. 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 sizes
and other mobile browsers prefer different meta data)

32. 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/

33. 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",
}

34. 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",
}

35. 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",
}

36. 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",
}

37. And can even offer an install prompt
(Browsers use several heuristics before deciding to prompt)

38. 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)

39. Can listen for install event and track in analytics
window.addEventListener('appinstalled', function(e) {
// Track installation
});
(AppManifest standard proposes this)

40. But how do we cope with a poor (or no) network?
https://www.flickr.com/photos/odaeus/3942500793

41. http://alistapart.com/article/application-cache-is-a-douchebag
Our first attempt had a few issues…

42. https://www.w3.org/TR/service-workers/
So we tried another approach

44. Service Worker is an in-browser network proxy
that can intercept requests and responses

45. <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

46. 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)

47. Service Worker Skeleton
self.addEventListener('install', function(event) {
self.skipWaiting();
});
self.addEventListener('activate', function(event) {
});
self.addEventListener('fetch', function(event) {
});

48. What are apps actually made of?

49. Shell Content
Many apps are made of a shell and the content

50. Going offline - caching assets on startup
var 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);
})
);

51. 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

52. Going offline - cleanup previous resources
self.addEventListener('activate', function(event) {
// Remove outdated caches, migrate data etc,
});

53. 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)

54. 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

55. Service Worker also enables other features

56. https://www.w3.org/TR/push-api/
Push Notifications

57. When put together…

58. When put together…

59. (App reads data from
a monitoring API)
When put together…

60. When put together…

61. (Cached data, so
may be out of date)
When put together…

62. Powerful APIs (inc Service Worker) require HTTPS
https://www.flickr.com/photos/zebble/6080622

63. “The future is here, it’s just unevenly distributed”
✓ ✓ ✓ WiP ?✓

64. We’re getting better access to native features
• Camera
• Notifications
• Location
• Geofencing
• Alarms
• Vibration
• Sharing
• Battery
• and more…
(On some platforms)

65. background sync
https://wicg.github.io/BackgroundSync/spec/
Background Sync (draft)

66. Easier payment mechanisms
https://www.w3.org/TR/payment-request/

67. https://www.flickr.com/photos/acearchie/4369849179
“So how do we test this thing?”

68. Chrome DevTools

69. https://github.com/GoogleChrome/lighthouse
Lighthouse

70. https://speedcurve.com/blog/pwa-performance/
WebPageTest

71. WebPageTest

72. 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

73. https://flights.airberlin.com/en-US/progressive-web-app
AirBerlin demo at Google I/O

74. My current favourite…
Doesn’t support notifications yet…
…hopefully will do soon

75. 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

76. 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?

77. “Every step on the path to a PWA makes sense on it’s own”
Jason Grigsby

78. http://www.flickr.com/photos/auntiep/5024494612
@AndyDavies
andy.davies@nccgroup.trust
http://slideshare.net/andydavies