[MUSIC PLAYING]
[APPLAUSE]
THAO TRAN: Hi, everybody.
So I want to give
a great shout out
to Kate O'Connor on
our marketing team,
who put together that video.
She's did a really
terrific job really
reflecting the state in
what we want everyone
to be building today.
So I'm Thao Tran.
I lead global
product partnerships
for Chrome and the
Web Platform team.
So that's just a fancy
way of saying I basically
get to talk to all
you guys, and talk
to a lot of different
companies and sites
about being early adopters
of all these new, awesome web
technologies.
So it's great to
hear from Darren
and get a state
of where Chrome is
and the overall Web Platform.
And now, I get the
opportunity to tell you
more about progressive
web apps and what's
happened over the last year.
So I did a lot of reflecting
the last couple days.
No, no, no, not about
the other stuff.
But really about where we were
last year at this same event.
And so I wanted-- I went
back and looked at some
of the tweets coming out.
Because the Flipkart
team had just launched
their progressive web app.
We're really kind of
pioneers in this space.
There was a lot of
buzz and excitement
about what's now
possible for the web.
And I really want to
echo Darren's sentiments
about the emerging
markets really leading
the way here in
terms of constraints
leading to a lot of innovation.
But I would say I was a bit
nervous about the success.
And I didn't know
whether it was going
to be specific to
Flipkart, the region.
Will progressive
web apps actually
extend to other
verticals and markets?
And I wasn't sure
if this was going
to be a hot thing
for like a minute,
and then it would
just get shelved away.
And so it got me thinking
a lot about toys.
So this is my son.
And so he recently got a
gift of refrigerator food,
and wanted me to
build a refrigerator.
And so I spent two
hours painstakingly
going through building
custom shelves so
that every single
piece actually fits,
so all the pieces actually fit
across all of these shelves.
And I think most
parents in the audience
would know that most
toys last about a week.
Because it literally
got shelved and empty,
and he didn't really
play with it anymore.
And I wondered, would
progressive web apps actually
have the same fate?
So was the Flipkart
progressive web app a unicorn?
And thankfully, that
wasn't the case.
And so Flipkart continued to
invest in progressive web app
technologies.
Actually, just did a big
refresh of their site.
They also extended
it to their desktop.
And they got tons of
learning this past year
as they battle-tested
progressive web apps.
In fact, they just went
through Big Billion Days,
which is the biggest shopping
event of the year for them
in India.
And last year, the
event was app-only
because they had shut
down their mobile website.
And this year, with the
Flipkart live experience back
and the web
experience back, they
saw as much traffic
on the web on mobile
as they did on desktop.
So it completely
affirmed their commitment
to bringing the
web back on mobile.
And I think beyond Flipkart
and the progressive web apps,
we wanted to see if we were
starting to see momentum
in the overall marketplace.
We started to see
that progressive web
apps organically came up as a
topic at various conferences,
saw a lot of articles
about progressive web apps.
I have a Google Alert letting
me know every time someone
mentions progressive web apps.
Because sometimes,
I get flooded.
And I want to point to three
articles that really illustrate
that progressive web apps
is actually broadening
across all industries.
So Smashing Magazine
wrote a beginner's guide
to progressive web apps.
A few months ago,
Business Insider
wrote about how PWAs
are blurring the lines
between mobile and web.
And then, more recently,
Marketing Land,
which is targeted at
digital marketers,
talked about how the
progressive web apps could
be the next biggest thing.
And so it was really terrific
to see that both developers
and marketers are all interested
in these technologies.
So Darren talked about the
importance of your web audience
being a worldwide audience.
And we've seen tremendous
interest from developers
globally.
After our progressive web
app dev summit in Amsterdam
this past June, we held viewing
parties across the world.
And so these are folks who
actually came to actually watch
together with other Googlers
and with other developers
in the region.
17,000 developers showed
up across 35 countries,
just showing the enormous
momentum and excitement
for wanting to build with
these new technologies.
And my favorite
tweet was that there
was a viewing party
in Bangladesh where
there were over 300 attendees.
And they were so
inspired that they
actually formed a human PWA,
and then tweeted this out.
So definitely my favorite
tweet of all time.
So we're seeing global interest
from sites large and small,
across many industries,
building progressive web apps.
And so I wanted to take
a moment here and just
talk to you about what exactly
is a progressive web app,
and then really tell you
real life partner stories,
so that you can
maybe get inspiration
for how you want to go
about approaching it
at your respective companies.
First of all, it's amazing to
see the term progressive web
app take a life of its own.
We really view it as
a shared definition
across the entire web ecosystem.
And it's great to see
folks in the community
continue to contribute to
what is a progressive web app.
And so we wanted to
offer our definition,
but obviously evolve it to
what makes sense for your site.
And ultimately, it's about
radically improving the web
user experience.
You probably just saw
this in Darren's talk.
But we wanted to make sure you
understand that your PWAs are
first and foremost about
improving your user experience,
making sure it's fast, reliable,
engaging for all users.
And a common question
I get is, wait, does
that mean I have to build
a native app, a PWA,
and a mobile site?
And the answer is no.
Your web experience should just
become your progressive web
app.
And so that also means
that your progressive web
app should be indexed
and crawlable just
like any other website.
We've also gotten a lot of
questions about this as well.
And so I wanted to just note
that we just posted an updated
blog post from Webmaster
Central Blog, where we talked
about updated guidance
on building indexable
progressive web apps.
So definitely check that out.
I think it just got
posted yesterday.
And so we want to
let people know
that building progressive
web apps is a journey.
And so we wanted to just maybe
offer up some of a framework
for how to think about
building a progressive web app.
Because people sometimes
think, oh, gosh,
it feels so inaccessible.
There's so many
things I have to do.
And so we wanted to say,
you know, think about it
as a journey.
You can start off
with a baseline,
with things like
HTTPS, a web app
manifest file, and
a few other things.
And then continue to add on more
and more features over time.
And so an exemplary one
is about pushing your site
to add more features, get
even faster loading times,
provide a more reliable
experience offline,
and even on flaky networks.
So the good news
is that you don't
have to track all this stuff.
Because we actually
heard your feedback,
and we've put
together a baseline
and exemplary checklist
of things to test and fix.
It's on
developers.google.com/web.
You're going to hear
that over and over again,
because we're really
trying to be better
about having a central
Google resource for building
on the web.
And Darren already talked
about Lighthouse School.
And so really think about it
as your personalized guide
for a site to becoming
more progressive.
We're continuing to
invest in Lighthouse,
and it will get better.
So with the
checklist, Lighthouse,
along with testing on
real hardware devices,
you should be on your way
to shipping a great PWA.
So I'm not going to
spend this talk going
into detail about service
worker and all the various APIs.
There are a ton of great
advanced sessions about that.
But I now want to dig into the
impact of progressive web apps,
and why it's a big deal for
your users and your business.
So I've had the really
fortunate opportunity
to work really closely
with a number of partners
across the globe.
It's been awesome to have
folks actually share stats.
Because they want to contribute
back to the ecosystem
and talk about the
awesomeness of what
they're experiencing
after they've
shipped a progressive web app.
So I want to run through
a few progressive web
apps in different stages
to really illustrate
the diversity of approaches,
regions, and industries.
So Darren talked about Alibaba,
which the world's largest B2B
marketplace.
And so the scale at which
they're operating is huge.
And he went over how they saw
a 76% increase in conversions.
So I want to add
one more detail.
Because conversions is
great, but you really
want to make sure that users are
coming back to your site time
and time again.
And so I wanted
to talk about how
they saw an increase on iOS
of monthly active users,
as well as a bump
of 30% on Android.
And so the higher
increase on Android
could probably be
attributed to the fact
that their open rate on
Web Push notifications is
comparable to their native app.
Again, just increasing the
overall reach of your user
base.
And Housing.com is this major,
growing online real estate
platform in India.
So we're seeing incredible
activity and innovation
coming out of India with
Flipkart, and then startups
like Housing embracing
progressive web apps.
And like most
startups, Housing is
obsessed with how to
efficiently acquire
users to gain market traction.
This is probably not something
that developers think about,
but I bet you your
marketing team
is thinking about how
to bring in new users
and how much they cost.
And so Housing took
a look at how much
they were spending
to acquire an app
download versus getting users
to come to their mobile website.
So the first stat
I want to offer
is that it cost them
about $3.75 to get users
to download an Android app.
And how much do you guys think
it's costing them to get users
to their mobile website?
AUDIENCE: $0.75.
THAO TRAN: $0.75?
$0.80?
$0.50?
$0.07.
So I want to pause, and we'll
just observe the difference
here in how much cheaper
it is to get your user
to your mobile website.
So maybe we're saying, well, app
users are usually more loyal,
so it may be worth it.
But for that single
app download,
you can reach 53
mobile web users.
So that's 53 potential
reengagement opportunities.
And Housing is operating
with millions of users,
so obviously, trying to get
more users to their website
efficiently is a no-brainer.
Yeah, people should
take pictures of this
and send it to your
marketing team.
But it's not only about getting
users to your site experience.
You want them to make
sure that they're
getting a really good user
experience once they arrive.
So Housing was seeing faster
page loads, as well as
an increase in conversions.
And the Housing folks
are actually here.
They travelled in from India,
and are giving a talk tomorrow
morning.
So definitely check it out.
I believe it's the
second talk of the day.
So now, I want to
turn to west elm.
You know, we've seen
a lot of adoption
in other parts of the world.
And so we're starting to see
more and more here in the US.
And so west elm is this
modern furnishings company.
And it's on its way to doing
about $2 billion in revenue.
And a significant
portion of that
is actually coming from online.
They don't have a native app.
So they rely on the web
to deliver the best user
experience possible.
And as you can probably
see from your own habits,
you're seeing a growing
number of users shopping
on mobile devices.
So I'm going to cue--
because I'm actually
going to demo an early beta that
they just launched yesterday.
So I already have it
on my home screen.
And so one of the key
principles or tenets
of them launching
this was that they
wanted it to be a hugely
immersive experience.
And so here, you're
dropped right
into this west elm experience.
You can scroll,
everything's super smooth.
You see the navigation on top.
They took a lot of cues
from social applications,
so it's highly visual.
So I can tap in here, see
how smooth everything looks.
And I actually want to go
through an example of when
I showed my sister a desk I
just bought from west elm.
And so instead of me kind of
searching, I just look and say,
oh, wow, I can just
go ahead and just tap.
I look at furniture.
I see home office, desks.
And as I'm scrolling through,
I see-- oh, there it is.
There is the desk I purchased.
And this is actually
how I showed my sister
the desk I bought.
Very much like a
magazine-like experience.
And so this is the
type of user experience
that we're hoping all of
you are inspired to build.
Back to slides.
And so this is
where focusing-- you
know, we talk a lot
about performance
and making sure that
your site is super fast.
But I think we really
think of west elm
as a great example of
how to rethink your user
interactions for
today's audience, which
is about casually consuming
and being inspired by things.
Maybe the user is not going
to purchase every time
they come to your site.
But maybe they want
to come back and just
browse in their few moments
where they have some downtime.
So you can check out their
early beta at the URL there.
And I want to now
turn to Latin America.
So Infobae is one of Argentina's
first major major digital-only
outlets.
It's a top publisher
with a strong presence
throughout
Spanish-speaking LatAm.
And we're actually
starting to see
growing interest in
Latin America for all
these new web technologies.
Infobae's primary motivation
was speed and delivering news
to users as quickly as possible.
And it's no surprise, 65% of
their traffic is on mobile.
And so they took inspiration
from the Washington Post
progressive web
app demo from I/O.
And they started working
with the Post team
and leveraging the Washington
Post CMS to really roll out
their progressive web app.
And we're seeing that
Infobae's article pages are
loading in less than a second.
They're also caching content
for offline experience.
And so, similar to what you saw
with the CNET demo from Darren,
this is really about a
smooth reading experience,
and really what news
should be, and be
resilient to flaky
networks as well.
And then, I want to
talk to you about Lyft.
So we've seen adoption with
retail and publishing sites.
And it's great to see
another use case here.
So for those who
are unfamiliar, Lyft
is an on-demand
ride-sharing network.
It was app-only for a long time.
And so they wanted
to make sure they
could reach users
across all platforms.
And obviously, we've
seen that reach and user
acquisition are critical.
So they rolled out an m-site.
I think there was an
article about rolling out
their m-site for the first
time a few weeks ago.
It wasn't a PWA yet, but
it was just an M-site,
just to test the waters.
And they had some
internal metrics
that they were looking at.
And after a month, they
saw five times more rides
than expected coming
through their mobile web.
So it turns out that people were
probably wanting to book rides,
even before they're
able to download an app.
So here's a GIF of
their user experience.
So after they saw that initial
success with their M-site,
they went all in
and said, you know,
we're going to
invest in mobile web.
We're going to build
a progressive web app.
And so their goal right now
is to achieve feature parity
with their native app.
So they launched a preview
yesterday, ride.lyft.com.
And the team will continue
to iterate and add
more and more
features over time.
And so this is about
making sure they
can deliver a great
experience for all users,
regardless of what
platform you're on.
And they didn't want to
actually have people download
an app if they didn't need to.
And here I want to
point out that they're
trying to achieve feature parity
by also dramatically reducing
the download size.
They were gracious enough to
share some of their stats.
Around 17 megabytes for Android.
You see the bump in iOS there.
And their progressive web
app is less than one meg.
And so the Lyft team
is actually here,
and will kick off tomorrow
morning with Housing as they
deep dive into how they're
building a progressive web app,
and the benefits of
being able to deploy
updates and experiment
quickly for the web.
So the final one where I want
to talk about stats a little bit
is MakeMyTrip.
So we're going back to India.
And MakeMyTrip is one of the
largest travel sites in India.
And what's interesting here
is the MakeMyTrip folks really
started digging into
differences in user behavior
between their native experience
and the mobile web experience.
And so, for those of you
unfamiliar with the India
market, like up to 90%
of users will uninstall
the app in six months.
And so, for an infrequent
purchase like travel,
it can be hard to remain
on the user device.
So after being on the
market for a few months, so
they shared some insights
about what they're seeing
in terms of their user base.
First of all, half
of their bookings
on their progressive web app
are same-day reservations.
And not only are they
same-day reservations,
but this number is
actually 30% higher
compared to their app users.
Turns out that these are
generally last-minute users.
They just want to
book right away,
and they prefer to do so
on their mobile website.
You probably are
experiencing the same thing.
When you want to
get something done,
you just want to get it done.
You don't want to have
to wait for a download.
And the other
fascinating stat is
that, in taking a closer
look at first time visitors,
it turns out that their
progressive web app
users were booking three times
more on their first visit.
And so this really
shows the web is
great at fulfilling the
immediacy of intent,
which is, in this case,
resulting in more bookings.
And so they're also seeing
that the destination cities are
much more widespread
for progressive web app
users versus native app users,
indicating that people might
be booking once
they arrive on site,
and they just want
to get a booking done
as quickly as possible.
So really terrific
stats, and really
giving us insights into the
different user behavior.
They still have a
native app experience.
And that will address and be
great for a specific audience.
But then they're also building
a great progressive web app
experience.
And so I just want to
make sure that-- I talked
a lot about a bunch
of these companies,
seeing worldwide adoption.
And now I want to spend just
a couple minutes talking
about how to get started.
So have an idea of what
you should be building.
And you can see that it can have
high impact on your business.
But the toughest part is
figuring out how to get
started, especially if
you're part of a large org,
or you need to deal with
a lot of legacy issues.
And so you have to take a
look at your different user
experience and figure out
what you want to tackle first.
Sometimes you can
tackle the entire site.
Sometimes you can do a section.
Like CNET Tech Today, they ended
up shipping a progressive web
app for a section.
And if you're a larger
brand, sometimes it's
easier to start
with a smaller site
to become familiar
with the technologies,
and then extend out
to your flagship.
So here, I want to walk
you through a journey
that the Weather
Channel has gone through
over the last year.
And I think many
of you will relate.
So weather.com is a top
20 site here in the US,
delivering billions of
forecasts around the world,
across many, many platforms.
And Weather is really
focused on innovation
and new technologies,
and became really
interested in seeing how
they could build a much
better mobile experience.
So their journey started
about 18 months ago,
where they had to diligently
roadmap what they needed to do,
and knowing that
it will take time.
They're a major site, operating
in almost 200 locales.
And so they had to prioritize.
I think most of you
are figuring out
how to prioritize, transition
to HTTPS right now,
if you have not already done it.
And we have a great session
later talking about HTTP/2
as well.
And so it wasn't easy
with ads and analytics.
But notice it was
starting to get easier
as more third parties were
prioritizing HTTPS as well.
And then in April, they
actually rolled out
Web Push notifications
across 30 languages.
It's actually now 62
languages since they've
continued to expand.
What's significant here is,
in the first three months
of rolling out Web
Push notifications,
Weather saw a million opt-ins.
So they provided the
same set of notifications
as their app users for the web.
But now they're reaching
a whole new audience
with Web Push notifications.
And then, more
recently, they started
looking at integrating
service workers
and transitioning
more of their site
over to a progressive web app.
Given the US site was more
complex and with more legacy,
they decided to tackle their
international sites first,
and have now rolled out
progressive web apps
in 178 countries, seeing
growing traffic in China, India,
and Mexico.
And the Weather
team is constantly
trying to improve their
overall experience.
And they've been happy
enough with working
with these technologies
and seeing some gains here
that they are planning to
expand to a progressive web
app for their flagship
US site in 2017.
And I think I really wanted to
tell this story because I think
we hear a lot about, well, I
can't do it in the next three
months.
We can't figure out
how to prioritize.
But I think, given some of you
who will have legacy sites,
you need to take a step
back and kind of roadmap
out how long it's going to take
and what it's going to mean.
It's not something that's
going to be done overnight.
Think about it as a journey.
And so I want to maybe
walk through the approaches
to building
progressive web apps.
And you know, I've offered
up a diverse set of sites,
and how they've
started building PWAs.
And so we started
just noticing patterns
in how people are
approaching it.
So some folks are lucky
enough to just build new
from the ground up and
transition their experience
almost immediately.
Some people will want to ship
a beta to test and experiment,
rolling out to a small
percentage of traffic
with the intent of transitioning
their main site over over time.
And then some people are
able to actually build
on their existing experience.
So integrating APIs indirectly.
And so Housing and
CNET are actually
two examples of where they were
able to build a new experience
from the ground up.
And I think that was the
right approach for them.
Housing for their
whole site, CNET
for a subsection of their site.
And for the beta, as I
talked about with the demo
with west elm, they couldn't
transition a site right away.
And it was tough
to describe what
this experience could be like.
So even before
they got to a beta,
they actually built a demo,
and then they showed it
to their senior leadership.
And so now, they are
going to move to a beta.
Early beta by the end
of the year, and then
a public beta next year,
which is a great path.
And then they'll start to move
their site over over time.
And Lyft, again, has an
early preview this week,
and they'll continue
to iterate and bring
more and more
features to their PWA.
And as far as existing
sites, I already
talked about the
Weather Channel.
But MakeMyTrip
actually started first
with their hotel
section of their site.
And then they
expanded to fights.
And now they're
going to continue
to add other sections to bring
into the progressive web app
fold.
And so there's no
right way or wrong way
to build a progressive web app.
I just wanted to
offer a framework
as you're going back to
your teams and saying, OK,
section, whole site,
new, beta, existing.
Just so that you can
get the conversation
started in terms of
how to start building.
And so, looking
ahead, there's going
to be tons of great
sessions today.
I want to talk about how
progressive web apps really
is-- you know, we talked a lot
about engagement, conversion.
We don't need to know all the
marketing terms at the bottom.
But think about progressive
web apps as this term
for just improving your
mobile web experience.
And then accelerate
mobile pages.
It's just also a
great way-- if you're
having a lot of traffic
coming in from search
and other platforms,
it's a great way
to get users
quickly to your site
from the top of the funnel.
And we're going to have an
AMP and PWA session tomorrow
morning, where we'll talk
about AMP installing a service
worker to transition to
a progressive web app,
as well as how AMP is being
used inside of a progressive web
app.
We get a lot of
questions about that.
And then, for some of
you, Push Notifications
is like the one
thing that you can
do over the next few months.
That's perfectly fine.
You're able to reengage users so
quickly, like what Carnival did
in what Darren went through.
And then two things I
did want to highlight,
which are actually after
my talk this morning.
Conversion is such a pain point.
Typing is so painful
on the mobile web.
And we've done
ourselves a disservice
by not trying to do more here.
But we are now.
And so seamless sign-in
and one-tap checkout
are going to be great sessions
where you can basically just
understand, get users
into your experience,
build an engaging
experience, and then make
sure they actually
convert and close on them.
So it's really about radically
improving the overall web
experience.
So over the last year, we've
heard from so many of you
the excitement for building
and innovating on the web.
And again, this
really is a journey.
And it requires
constant iteration.
Probably patience
as you're trying
to figure out how you're going
to construct your backend
to fit in with the progressive
web app architecture.
But it's worth it.
And I hope you see that
today by just seeing
the enormous momentum,
and what people
are seeing in terms of success
with their various business
metrics.
And so, speaking of
iteration, I talked
in the beginning of
building a fridge for my son
that didn't really stick.
So I did try again.
So this is actually
a hotel room key.
Because I was traveling a few
months ago, and he was really
upset that he couldn't be
in the hotel room with me.
And so I took a
shoe box, and then I
put a little hotel key slit.
And then he was able to--
I brought my hotel key.
And now he uses it
every single day.
He literally closes his
door, puts in the key card,
beeps, and then lets
himself into his hotel room.
And so he does it every night.
He's been doing that every
night for the last few months.
And so with that, I think that's
your inspiration for building
great web experience
that people will
want to use every single day.
Thank you.
[APPLAUSE]
[MUSIC PLAYING]
