Slides from my talk at NCC Group's Web Performance Day in May 2016. Compares the features of apps and the web, what's great about each and explores some of the technologies that will allow us to build websites that can deliver native like experiences.

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

2. We’re spending more and more time in apps…
Digital media usage time is exploding right now, and it’
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
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. 29%
15%
11%
6%
6%
4%
3%
3%
23%
Social Networking
Radio
Games
Multimedia
Instant Messengers
Music
Retail
News/Information
All Others
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
categories and drive two-thirds of total time spent on aBut our usage can be very specific

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

5. Demo
(Next few slides were originally shown as a live demo)

6. Launch from home screen

7. Splash screen on startup

8. A simple app…

9. Works offline too

10. Works offline too

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

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

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

14. “Please, please download our app”

15. “Download our app or else”

16. Updates, updates and more updates…

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

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

19. And mobile audience growth is being driven more by m
properties, which are actually bigger and growing faste
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…

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

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

22. …indexable, searchable

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

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

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

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

27. What if…

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

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

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

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

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

33. W3C App Manifest brings it all together
{
"lang": "en",
"dir": "ltr",
"name": "Performance Matters",
"description": "Performance Matters - NCC Group Web Performance",
"short_name": "Performance Matters",
"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": "#fff",
"background_color": "#fff",

34. Homescreen Icon
{
"lang": "en",
"dir": "ltr",
"name": "Performance Matters",
"description": "Performance Matters - NCC Group Web Performance",
"short_name": "Performance Matters",
"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": "#fff",
"background_color": "#fff",

35. URL of the page that’s launched
{
"lang": "en",
"dir": "ltr",
"name": "Performance Matters",
"description": "Performance Matters - NCC Group Web Performance",
"short_name": "Performance Matters",
"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": "#fff",
"background_color": "#fff",

36. Splash screen
{
"lang": "en",
"dir": "ltr",
"name": "Performance Matters",
"description": "Performance Matters - NCC Group Web Performance",
"short_name": "Performance Matters",
"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": "#fff",
"background_color": "#fff",

37. Orientation and presence of browser controls
{
"lang": "en",
"dir": "ltr",
"name": "Performance Matters",
"description": "Performance Matters - NCC Group Web Performance",
"short_name": "Performance Matters",
"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": "#fff",
"background_color": "#fff",

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

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

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

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

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

44. <script>
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('sw.js').then(function(registration) {
}).catch(function(err) {
console.log('Can't register service worker: ', err);
});
}
</script>
Register a Service Worker

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

46. What are apps actually made of?

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

48. 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);
})
);
});
Store a set of resources
in cache when service
worker is installed

49. 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);
})
);
});
On fetch, check cache for resource,
otherwise retrieve from network

50. https://jakearchibald.com/2014/offline-cookbook/
Not just for offline - other caching patterns

51. Service Worker also enables other features

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

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

54. When put together…

55. When put together…

56. When put together…

57. When put together…

58. When put together…

59. Getting better access to native features
• Camera
• Location
• Notifications
• Alarms
• Vibration
• and more…

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

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

62. It’s being used 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

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

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