Embed Size (px)
Citation preview
Proprietary + Confidential
Progressive Web AppsFor Startups
Oct 2016
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!
Proprietary + Confidential
Startups Best Practices
Team
● Resourceful
● Determination
● Hire when
desperate
Hire
Hire True experts (especially at the start)
Hire due to
urgent need
Team - How?
Employees
should feel valued
● 1:1 meetings
● company meeting
● Fire fast
A great product
“Your time should be spent on building the product and talking to customers.
50/50 is a good start.”
ProductBetter to build something that
few users LOVE than something that
a lot of users like
Product - Signals
word of mouth Needs to pay for growth
Great (Simple) Products WIN
Product● Get users manually
● Listen to outside users
● Build an engine: users -> feedback -> product improvement
Execution
Everything will follow the founder.
Do it yourself!
Get Things Done
Say No
(often)Set big goals
Talk &
Listen
Execution
You need growth and momentum
● Get new things. Fast.● “Move fast and break things” ● Be obsess on quality● Measure what moves the needle
Execution
Do everything you can
(and more)Don’t give up
Keep the momentum● Shipping new version every day/week
● New features
● Keep listen to your users
○ Actions
○ Metrics
The Big Bang of Computing
g.co/ProgressiveWebApps
<!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>
Ajax was born to run desktop apps on the Web
How did the Web beat native applications on the desktop?
Distribution Is The Hardest Problem In Software
flickr.com/photos/blakespot/
The Mobile Explosion
● 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
Access to the back catalog is great, but you want to use the new affordances and power
What if the Web evolved those capabilities, just as it did with
Ajax?
What's Missing?
1. Home Screen Access 2. Push Notifications 3. Offline
1. Home screen Access
Less typing, more tapping.
2. Push Notifications
How can we re-engage users at the right time?
1. Works If Browser Closed
2. Needs Permission
3. Offline That Works™
It isn't an app if it doesn't start when you tap.
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
LoadIdleResponse Animation
RAIL performance model
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
e-commerce
● 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
Source: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis non erat sem
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
![Progressive Web Apps [pt_BR]](https://img.dokumen.tips/doc/110x75/58ec92371a28ab086c8b46bf/progressive-web-apps-ptbr.jpg)
