Progressive Web Apps For Startups

Proprietary + Confidential
Progressive
Web Apps
For Startups
Oct 2016

Ido Green
@greenido
ido-green.appspot.com

Progressive Web Apps
Mobile has natively come to the Web
So you can focus on your own magic!

Startups Best Practices

Team
● Resourceful
● Determination
● Hire when
desperate

Hire
HireTrueexperts
(especiallyatthestart)
Hiredueto
urgentneed

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.”

Product
Better to build something that
few users LOVE
than something that
a lot of users like

Product - Signals
wordofmouth Needstopayforgrowth

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
SayNo
(often)
Setbiggoals
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
Doeverythingyoucan
(andmore)
Don’tgiveup

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/

● 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.1
HOST example.com
...
HTTP/1.1 200 OK
Date: Thu, 19 Feb 2015 05:21:56 GMT
...

example.com
// sw.js
onfetch = 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.1
HOST example.com
...
GET /content.json HTTP/1.1
HOST example.com
...
GET /content.json HTTP/1.1
HOST example.com
...
HTTP/1.1 200 OK
Date: 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
Sessions
Load time (in seconds)
Bouncerate(%)
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

● 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 arriving
via 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

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

THANK YOU!
Ido Green
@greenido

Progressive Web Apps For Startups

More Related Content

What's hot

Viewers also liked

Similar to Progressive Web Apps For Startups

More from Ido Green

Recently uploaded

Progressive Web Apps For Startups