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…

© 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


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

What do we like about apps?

https://www.flickr.com/photos/jennicatpink/819741953

Demo

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

Launch from home screen

Splash screen on startup

A simple app…

Works offline too

Works offline too

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

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…

…indexable, searchable

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

What if…

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

. . . ],


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

. . . ],


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

. . . ],


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

. . . ],


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

Service Worker is an in-browser network proxy

that can intercept requests and responses

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

});

What are apps actually made of?

Shell Content

Many apps are made of a shell and the content

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

https://jakearchibald.com/2014/offline-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

When put together…





Getting better access to native features

• Camera• Location• Notifications

• 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

[email protected]

http://slideshare.net/andydavies

Building an Appier Web - May 2016

Technology