Building an Appier Web - May 2016

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…
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

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

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

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

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

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

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

“Please, please download our app”

“Download our app or else”

Updates, updates and more updates…

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

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

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…

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

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

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

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

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

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

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

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

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

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 sizes
and 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",
"icons": [
{
"sizes": "144x144",
"type": "image/png"
},
. . .
],
"scope": "/pwa",

URL of the page that’s launched
{
"lang": "en",
"dir": "ltr",
"icons": [
{
"sizes": "144x144",
"type": "image/png"
},
. . .
],
"scope": "/pwa",

Splash screen
{
"lang": "en",
"dir": "ltr",
"icons": [
{
"sizes": "144x144",
"type": "image/png"
},
. . .
],
"scope": "/pwa",

Orientation and presence of browser controls
{
"lang": "en",
"dir": "ltr",
"icons": [
{
"sizes": "144x144",
"type": "image/png"
},
. . .
],
"scope": "/pwa",

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

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

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

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

Building an Appier Web - May 2016

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

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

What are apps actually made of?

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

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

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

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

Service Worker also enables other features

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

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

Getting better access to native features
• Camera
• Location
• Notiﬁcations
• Alarms
• Vibration
• and more…

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

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

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
andy.davies@nccgroup.trust
http://slideshare.net/andydavies

Building an Appier Web - May 2016

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Viewers also liked

Viewers also liked (11)

Similar to Building an Appier Web - May 2016

Similar to Building an Appier Web - May 2016 (20)

More from Andy Davies

More from Andy Davies (20)

Recently uploaded

Recently uploaded (20)

Building an Appier Web - May 2016