Upload
ido-green
View
976
Download
1
Embed Size (px)
Citation preview
Proprietary + Confidential
Ido Green
@greenidoido-green.appspot.com
Proprietary + Confidential
Progressive Web AppsMobile has natively come to the WebSo you can focus on your own magic!
A great product
“Your time should be spent on building the product and talking to customers.
50/50 is a good start.”
Product● Get users manually
● Listen to outside users
● Build an engine: users -> feedback -> product improvement
Execution
You need growth and momentum
● Get new things. Fast.● “Move fast and break things” ● Be obsess on quality● Measure what moves the needle
Keep the momentum● Shipping new version every day/week
● New features
● Keep listen to your users
○ Actions
○ Metrics
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"><HTML> <HEAD> <TITLE>Bach's home page</TITLE> <STYLE type="text/css"> h1 { color: red } </STYLE> </HEAD> <BODY> <H1>Bach's home page</H1> <P>Johann Sebastian Bach was a prolific composer. </BODY></HTML>
● Runs the “desktop Web”
● Pinch and zoom, Pan, etc
● Hitchhikers guide to the galaxy is in
your pocket!
The Mobile Internet came when it brought the Web
example.com
GET /app.html HTTP/1.1HOST example.com...
HTTP/1.1 200 OKDate: Thu, 19 Feb 2015 05:21:56 GMT...
example.com
// sw.jsonfetch = function(e) { if(e.request.url == "app.html") { e.respondWith( caches.match(e.request) ); }
if(e.request.url == "content.json") { // go to the network for updates, // meanwhile, use cached content fetch(...).then(function(r) { r.asJSON().then(function(json) { e.client.postMessage(json); }); }); }};
GET /app.html HTTP/1.1HOST example.com...
GET /content.json HTTP/1.1HOST example.com...
GET /content.json HTTP/1.1HOST example.com...
HTTP/1.1 200 OKDate: Thu, 19 Feb 2015......
Service Workers Are Network Progressive
Enhancement
A Programmable Network Proxy under your control.
Service Workers are to Progressive Web Apps as
XMLHttpRequest was to Ajax
The foundational capability that was a tipping point for innovation
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
RAIL: Instant loading and smooth navigation
● For first visitors, load pages in <10s on 3G net
○ Aspirational goal: <3s to first paint
● For repeat visitors, loading of page in <500 ms
● Always scrolling at 60 frames/second
● Content shouldn’t jump as images are loaded
● Reliable: Fast loading, offline and on flaky
networks
● Fast: Smooth animation, scrolling and nav
● Engaging and integrated
○ On the home screen, no URL bar.
○ Re-engaging with push notifications
● Consistent experience across browsers
The Progressive Web App Experience
The Progressive Web App - Examples
https://noter-1.firebaseapp.com/https://voice-memos.appspot.com
● Users time on Flipkart lite vs. previous
experience: 3.5 minutes vs 70 seconds.
● 3x more time spent on site
● 40% higher re-engagement rate
● 70% greater conversion rate among those
arriving via Add to Homescreen
● 3x lower data usage
● Flipkart case study
26%increase in average spend
per visit by members arrivingvia a push notification
72%increase in time spent for users visiting via a push notification
+50%repeat visits within 3 months
Proprietary + Confidential
PWA 4 Startups● The magic engine:
users -> feedback -> product improvement
● Growth and momentum○ Get new things. Fast.○ New version every day○ Test new features○ Monetization