progressive web apps with polymer
TRANSCRIPT
Progressive Web Apps with Polymer
@marcushellberg / vaadin
State of the web on mobile
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
Source: comScore Mobile Metrix, U.S., Age 18+, June 2015
vs.13% 87%
Mobile web Apps
What's holding back the web on mobile?
THIS S**T
IT'S 2016
No other platform tries to run desktop apps on phones
NOPE.
The web has no app model
example.com/
example.com/parts/item
vs.
The problem is friction
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
fiksu.com/resources/fiksu-indexes
80%OF TIME SPENT IS IN USERS’ TOP 3 APPS
Source: comScore Mobile Metrix, U.S., Age 18+, June 2015
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
What's missing?
1.Home screen access 2.Push Notifications 3.Offline support
1. Home screen access
Progressive Web Apps!
Currently, On EVERY PAGE
<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
Time Spent on Flipkart Lite
3x
70 seconds 210 seconds
Returning Visitors week over week
40%
+63% Conversions from Homescreen
visits
2. Push notifications
1. Works even if browser closed 2. Requires Service Worker 3. Needs permission, not Install
Respectful Prompts Succeed
+50% repeat visits within 3 months
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
3. Offline support
Enter service worker
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
GET/app.htmlHTTP/1.1HOSTexample.com...
HTTP/1.1200OKDate:Thu,19Feb201505:21:56GMT...
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
Are we there yet?
"Becoming a more frequent request. We should do it."
https://trac.webkit.org/wiki/FiveYearPlanFall2015
...
1. Application shell
Speed tip: don't block the initial render
Vulcanize all the things
2. Setting up caching
Created by gulpfile
cache-config.json
index.html
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
2. Data sync
Service Worker?
4. Push notifications
Finally: a few tips
chrome://flags/#bypass-app-banner-engagement-checks
chrome://inspect
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
Questions?
