Upload
andy-davies
View
308
Download
2
Embed Size (px)
Citation preview
Building an Appier Web @AndyDavies, NCC Group, May 2016
https://www.flickr.com/photos/alesimages/4215559895
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
© 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
https://www.flickr.com/photos/michigancommunities/4614847059
Installing apps consumes storage and data
© 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…
We can already add pages to our home screen
Supported by most major mobile operating systems and browsers(Bookmarks page rather than site)
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)
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", }
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", }
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", }
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", }
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", }
<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
Service Worker Skeletonself.addEventListener('install', function(event) { self.skipWaiting(); . . .
});
self.addEventListener('activate', function(event) { . . .
});
self.addEventListener('fetch', function(event) { . . .
});
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); }) ); });
Store a set of resources in cache when service
worker is installed
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
Getting better access to native features
• Camera• Location• Notifications
• Alarms• Vibration• and more…
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
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
http://www.flickr.com/photos/auntiep/5024494612
@AndyDavies
http://slideshare.net/andydavies