1 of 61

Why build Progressive Web Apps?

Progressive Web Apps

2 of 61

3 of 61

flickr.com/photos/oimax

Progressive Web Apps

4 of 61

Progressive Web Apps

5 of 61

The hardest problem with�software is distribution

Progressive Web Apps

6 of 61

.vs.

Source: comScore Mobile Metrix, U.S., Age 18+, June 2015

13%

87%

Mobile web

Apps

Progressive Web Apps

7 of 61

80%

OF TIME SPENT IS IN

USERS’ TOP 3 APPS

Source: comScore Mobile Metrix, U.S., Age 18+, June 2015

Progressive Web Apps

8 of 61

Capability

Web

Progressive Web Apps

9 of 61

Capability

Reach

App

Web

*

Web

Progressive Web Apps

10 of 61

Capability

Reach

App

Web

PWA

Progressive Web Apps

11 of 61

Progressive Web Apps

12 of 61

Progressive Web Apps

13 of 61

Progressive Web Apps

14 of 61

Progressive Web Apps

15 of 61

Progressive Web Apps

16 of 61

Progressive Web Apps

17 of 61

Progressive Web Apps

18 of 61

It's all about removing friction

Progressive Web Apps

19 of 61

What was missing?

Reliable performance
Push notifications
Homescreen icon metadata

Progressive Web Apps

20 of 61

What was missing?

Reliable performance
Push notifications
Homescreen icon metadata

Progressive Web Apps

21 of 61

Faster is better

Source: SOASTA, 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)

Bounce rate (%)

Sessions

Bounce rate

13%

bounce

rate

20%

bounce

rate

58%

bounce

rate

Progressive Web Apps

22 of 61

of users bounce from sites that take longer than 3 seconds to load

40%

Progressive Web Apps

23 of 61

Service workers enable reliable performance

Web server

Service worker

Client side proxy written �in JavaScript

Cache

Progressive Web Apps

24 of 61

4x

10x

faster

less data

<1 second

median load time

Progressive Web Apps

25 of 61

<amp-install-serviceworker>

Progressive Web Apps

26 of 61

Progressive Web Apps

27 of 61

github.com/GoogleChrome/lighthouse

Progressive Web Apps

28 of 61

Web Payments API

Credential Management API

Progressive Web Apps

29 of 61

Web Payments API

Credential Management API

Progressive Web Apps

30 of 61

One tap check out with Shopify

Progressive Web Apps

31 of 61

Progressive Web Apps

32 of 61

Web Payments API

Credential Management API

Progressive Web Apps

33 of 61

One-tap sign in

Progressive Web Apps

34 of 61

Auto sign in

Progressive Web Apps

35 of 61

Progressive Web Apps

Reliable: Fast loading, work offline and on flaky networks

Fast: Smooth animation, jank-free scrolling and seamless navigation

Engaging: Launched from the home screen and send push notifications

Progressive Web Apps

36 of 61

Why is this important?�

How do we get started?

Progressive Web Apps

37 of 61

Why is this important?�

How do we get started?

Progressive Web Apps

38 of 61

Reach

Progressive Web Apps

39 of 61

1B

monthly mobile

Chrome users

Progressive Web Apps

40 of 61

Reach on mobile web 2.5x of apps

Monthly unique visitors (MM)

3.3

Mobile web

Apps

8.9

Source: comScore Mobile Metrix, U.S., Age 18+, June 2015. Top 1000 sites vs. Top 1000 apps

Progressive Web Apps

This Comscore data compares reach of the top 1000 sites and apps. Here, you see that mobile web reach is 2.5x that of apps. So when you are able to deliver a better experience to a wider audience, this makes a compelling case.

And you’re likely seeing similar numbers on your own site. It’s worth gut checking your own site traffic numbers and understanding the traffic breakdown between app and mobile web. Anecdotally, we’ve heard sites say that mobile web traffic ranges from 50% to as high as 90% of mobile traffic.

So this data is great. We’re seeing growth in mobile web and that reach is more than double of app traffic. The next question: are there real businesses, at scale seeing success with these investments? We’ve been working hard to provide real life examples so that you have proof points.

41 of 61

Today’s mobile web

Broad Reach, Low Engagement

Top 1000 mobile apps .vs. top 1000 mobile web properties

comScore Mobile Metrix, U.S., Age 18+, June 2015

Mobile web

Apps

Monthly UNIQUE visitors (MM)

3.3

8.9

Average minutes per visitor

201.8

10.9

Progressive Web Apps

42 of 61

Acquisition

Progressive Web Apps

43 of 61

Selio: user acquisition costs

Android App

Mobile Web

€4.00

€0.35

Progressive Web Apps

44 of 61

Conversion

Progressive Web Apps

45 of 61

�2x more

page views

74% increase

in time spent

82% more

conversions on iOS

Progressive Web Apps

AliExpress, based in China, is one of the largest e-commerce players globally.

With their PWA they saw massive uplift within days.

They saw a 74% increase in time spent on the site and two times more pages visited.

For them the number that really matters is whether users actually convert, complete transactions.

AliExpress saw conversions go up across the board.

You might think that since many Progressive Web App features don't work on Safari that that this wouldn't help with users on iOS.

It turned out that wasn't the case at all.

Using the PWA approach to building for the Web, AliExpress saw an 82% increase in their conversion rate on iOS!

The Progressive in PWA does make sense, and focusing on the end-to-end user experience will still have a dramatic impact on your business, even with users who can't experience the full power of Progressive Web Apps.

46 of 61

"One of the reasons we built a Progressive Web App was to be able to invest in the web experience across all browsers. Not only did we see huge benefits on browsers that support the latest features, but we also got to see a bump across the board. That is the sign of a great investment, and one that will keep paying for itself as browsers evolve."

— Lijun Chen, Director of AliExpress Mobile Team.

Progressive Web Apps

47 of 61

Lower acquisition costs

Improve

conversion

Increase potential reach

Progressive Web Apps

48 of 61

Why is this important?�

How do we get started?

Progressive Web Apps

49 of 61

Start from ground up

Progressive Web Apps

50 of 61

Both data points are �compared to native app

92% less data

for initial load�82% less data

to complete first transaction

Progressive Web Apps

51 of 61

Build a simple version

Progressive Web Apps

52 of 61

<1s

initial loading time and �even faster for sub-sequent loads

Progressive Web Apps

53 of 61

80ms

article page load time in �the Progressive Web App

How they did it

Progressive Web Apps

54 of 61

Focus on a feature

Progressive Web Apps

55 of 61

30+ languages

rolled out globally with web push notifications

Progressive Web Apps

56 of 61

“Even for something as holistic as a Progressive Web App, we work in small steps in order to tackle issues one by one, and learn things quickly.”

Jesse Yang, engineer

Booking Developer Blog Post

Progressive Web Apps

57 of 61

from the ground up

a simple version

a single feature

Progressive Web Apps

58 of 61

Progressive Web Apps

59 of 61

Go build!

meow

Progressive Web Apps

60 of 61

But first...

Where to start?

Progressive Web Apps

61 of 61

Progressive Web Apps