Upload
marcus-hellberg
View
970
Download
0
Embed Size (px)
Citation preview
86%
14%TIMESPENT ON SITES
TIMESPENT ON APPS
“Apps continued to cement their lead, and commanded 86% of the average US mobile consumer’s time” Flurry 2014/04/01
Load store
Click install
Accept permissions
Download, wait...
Find in store
Use
Let’s say I intrigued
~1000 of you
800
640
512
410
328
262
“In a consumer mobile app, every step you make a user perform before they get value out of your app will cost you ~20% of users...”
http://blog.gaborcselle.com/2012/10/every-step-costs-you-20-of-users.html
...but what if I can get users directly into a store/install
flow?
Click install 800
Accept permissions 640
Download, wait 512
Find, Use 410
86%
14%TIMESPENT ON SITES
TIMESPENT ON APPS
14%
40% GAMING &
ENT.
28% SOCIAL
20% OTHER 66%
SITES
6% APPS
28% SITES &
APPS
PRIMARY CHANNEL FOR COMMERCIAL TASKS
USER TIME SPENT ON MOBILE DEVICES
average apps used per month bya mobile user
27sites navigated to permonth by the average
Chrome for Android user
100+
Source: Nielsen Mobile Report June 2015
Today's Mobile Web: Broad Reach, Low Engagement Top 1000 mobile apps vs. top 1000 mobile web properties
10.9Monthly unique visitors (MM)
3.3
Average minutes per visitor
Mobile webApps
8.9201.8
Source: comScore Mobile Metrix, U.S., Age 18+, June 2015
<meta name="theme-color" content="#303F9F">
<link rel="manifest" href="manifest.json">
HTML
{ "short_name": "Air Horner", "name": "Air Horner", "start_url": "/", "display": "standalone", "icons": [{ "src": "icons/icon-192.png", "sizes": "192x192", "type": "image/png", "density": "4.0" }], "orientation": "portrait", "gcm_sender_id": "129757602160" }
JSON Manifest
With Manifests
Metadata delegated to one file
Extensible & crawlable
26% increase in average spend
per visit by members arriving via a push notification
72% increase in time spent for users visiting via a push notification
Event-driven Best-effort while executing event handlers
Shut down between events Idle SWs can be reclaimed to limit memory use
Only one active instance 1:N SW/tabs. Node-like I/O via events
example.com
//sw.jsonfetch=function(e){if(e.request.url=="app.html"){e.respondWith(caches.match(e.request));}
if(e.request.url=="content.json"){//gotothenetworkforupdates,//meanwhile,usecachedcontentfetch(...).then(function(r){r.asJSON().then(function(json){e.client.postMessage(json);});});}};
GET/app.htmlHTTP/1.1HOSTexample.com...
GET/content.jsonHTTP/1.1HOSTexample.com...
GET/content.jsonHTTP/1.1HOSTexample.com...
HTTP/1.1200OKDate:Thu,19Feb2015......
Service Workers Are Network Progressive
EnhancementProgressive Apps work without SW for first load & old browsers.
Impact of speed on bounce rates
Source: SOASTA; September, 2015
2.4 2.7 3.0 3.3 3.6 3.9 4.2 4.5 4.8 5.1 5.4 5.7 6.0 6.3 6.6 6.9 7.2 7.5 7.8 8.1 8.4 8.7 9.0 9.3 9.6 9.9
180,000
140,000
100,000
60,000
0
20,000
58
45
32
19
0
6
Sess
ions
Load time (in seconds)
Boun
ce ra
te (%
)
Sessions Bounce rate
13%bounce
rate
20%bounce
rate
58%bounce
rate
"Becoming a more frequent request. We should do it."
https://trac.webkit.org/wiki/FiveYearPlanFall2015
Caching strategies
networkFirst – check network first, fall back on cache
fastest – hit both network and cache at the same time, return faster
networkOnly – bypass cache
chrome://flags/#bypass-app-banner-engagement-checks
Resources
Poylmer Starter Kit developers.google.com/web/tools/polymer-starter-kit
Polymer Slack polymer-slack.herokuapp.com
Getting Started With Progressive Web Apps tutorialaddyosmani.com/blog/getting-started-with-progressive-web-apps
SW Toolbox github.com/GoogleChrome/sw-toolbox