[MUSIC PLAYING] PETE: Progressive web apps
seem to be the latest buzzword, but what does it mean? I'm Pete, a developer
advocate at Google. And in this video
series, you'll learn what a progressive web
app is, why it matters, and how you can build one. In this first video, I'll
cover the key concepts of a progressive web app
and how you can get started. So let's jump in. Web development has changed
a lot over the years. When Ajax transformed
the web from static pages into dynamic
interactive experiences, users' expectations went from
clicking on the side of a map and waiting seconds
for it to scroll to something like the
Google Maps experience, with live panning and zooming. You don't have to live
with that horrible click and wait user experience. Unfortunately, the improvements
we've seen on the desktop web haven't translated as
well to the mobile web. Consider this-- if
I asked you to open Google Maps on your phone, would
you do it using the native app or through the browser? Chances are you'd
use the native app. Mobile is the key factor
driving this revolution. We now use mobile devices
more than desktop computers. And depending on which
stats you look at, it's been this way for
more than two years. On mobile, users spend most
of their time in native apps rather than on the web. In fact, they spend 87% of
their time in native apps versus only 13% of their
time on the mobile web. When asked why, users often say
that apps are more predictable. They're easy to find
on the home screen and feature push notifications
that bring them back. So should we abandon the web
and go build native apps? Of course not. There's a flip side
to native app usage. App usage is highly
concentrated, and users tend to only
install and use a few apps. If you're not one of those
chosen apps, too bad. Users have told us that they see
native apps as a big commitment in space, time, and cost. According to a recent
study, the average user installs zero apps per month-- zero. None. By contrast, mobile users visit
over 100 websites every month. This is the power of URLs and
the ephemerality of the web. One way to think about the
difference between native and web apps is on
the capability axis. When you tap on their icon,
native apps start quickly. They tend to work offline. They can show notifications,
sync in the background, and have access to sensors
like camera and microphone. But the reach is
somewhat limited, requiring a different
version for each platform. The web is safer, and
its permission model is more respectful
of your privacy. But without some of
the same capabilities, it doesn't matter how
many people can use it. We want to combine
the capabilities and experience users are
used to in native apps with the reach of the web. We want the best of both worlds. A progressive web
app is simply that-- a great user experience that
feels integrated and earns a place on my home
screen without having to give up the reach to get it. The term "progressive
web apps" really just means radically improving the
quality of your end-to-end user experience. In order to do that, we need
to focus on four things-- making the app fast, making
the experience more integrated, ensuring that it works reliably,
and keeping users engaged. Let's take a look at
each of these properties in a little bit more depth. Users expect apps
to load quickly and to have smooth scrolling. Unfortunately, the web
has a bad name for this, especially on mobile. For now, let's focus
on load performance, which means making sure that
your web app loads fast. Now, this isn't just esoteric. We all know that time is money. This chart shows just
how true that is. 20% of users will abandon a
site if it takes more than three seconds to load. Now, I could make a joke about
kids today and short attention spans, but I'm
guilty of this, too. Other studies show
even worse results. After three seconds, 53% of
users will abandon a site. In short, speed kills. Users shouldn't have to
reach through a browser tab to access your app. In fact, the user shouldn't
even think about the fact that they're on the web. Instead, they should be
able to interact with it in the same way
that they interact with all of the other
apps on their device. They expect to launch it
from the same place they launch all of their other apps. They expect to see
it in the task list. They expect it to have all of
the capabilities and hardware access that other apps have. Web payments-- something that
we'll cover in a future video-- is a good example of
keeping a user in your flow. Instead of requiring the user
to fill out a complex checkout form, the Payment Request
API simplifies it down to a few taps and
can even integrate with other payment apps
like PayPal or Android Pay. Another good example
is media playback. With the Media Session API,
you can provide metadata about what's currently
playing and even handle media-related
events from the user. If the screen is
locked, the user can quickly see
what song is playing and maybe skip to the next song. Users don't expect the web
to work without a network connection. And often, they
don't even bother to try when it's a slow or
intermittent connection. We need to change
that perception. Web apps must be reliable. When the user taps on
a home screen icon, they expect it to load
instantly and reliably. Apps launched from
the home screen should never show the downasaur. Thinking back to the '90s
when the web grew up, this is how we got online. Going online meant putting the
whole house into online mode. I remember having
to yell upstairs, don't pick up the phone. And if someone did, it
would kill my connection. We used to know
when we were online. But now, in the broadband era,
we don't even think about it. Desktop connectivity
is just always there. We've become used to
always being online. And when we're not and we see
this cute little downasaur, it's a disaster. Mobile phones aren't
always online. Maybe you've turned
on airplane mode or your subway stop
doesn't have service. And even when you
have four bars, you might not have
a live connection. But it's not just
the no connection that breaks the user's trust. It's slow and
intermittent connections that affect users just as much. Still, mobile apps never
show the downasaur. Nothing on my home
screen shows this. In order for a web app to earn
its place on the home screen, we need to make them reliable,
even when the network isn't. An engaging app goes
beyond functional and ensures that the whole
experience is delightful, making it easy for the user
to do what they need to do. Using features like web
push, it's always up to date. Notifications keep
the user informed. An engaging app uses
the right capabilities at the right time
in a beautiful way. One example-- push
notifications. They've existed for
a while, but I'm really excited that
we finally have access to them as web
developers, and they even work when the browser is closed. On mobile devices, notifications
are a fundamental part of turning a monthly active
user into a daily active user. So, enough exposition. Let's take a look at Twitter
Lite, a progressive web app designed to deliver
a more robust experience with explicit goals for instant
loading, increasing user engagement, and lower
data consumption. The Twitter Lite
progressive web app combines the best of the
modern web and native features. It became the default mobile
web experience for all users in April of 2017. On the first load,
it looks and behaves like any normal web app. This is a well-designed
mobile experience-- smooth scrolling, responsive
design, all of the rest. When I revisit the
site, Chrome prompts me with an "add to
home screen" banner, making it easy for me to
add it to my home screen. When I click Add, a
little toast pops up letting me know it's been
added to my home screen. In a future version of
Chrome, progressive web apps will also be added
to the task launcher. Let's see how it looks. There it is on the home screen. Tapping the icon
starts it immediately, showing a splash screen
while things are loaded. Then, it launches into a
full-screen experience. It feels like all of the other
installed apps on my phone. Even clicking on
the Task Manager shows it as a
top-level app using the icon, app name, and colors
defined in the manifest. Being in the user's
field of view is very important
for reengagement. Shortly after
launching Twitter Lite, they were seeing over 1 million
launches from the home screen every single day. Twitter implemented
web push notifications that work the same as
those from their native app and arrive even if the
user's browser is closed. Users are prompted to
enable notifications or can go into the settings
and enable notifications there. Notifications appear on
the locked home screen. And when I click on
the notification, I'm taken directly to
the relevant place, making it easy for me to reply,
like, or retweet something. When tweeting, users have
access to all the same features they expect. They can take pictures, attach
photos they've already taken, and so forth. It was pretty cool to
see Twitter demo this at their launch
event, where they posted a tweet with an
image in about a second and got hundreds of likes,
all while still on stage. Reaching a broad set of users
is important for Twitter, especially those
in emerging markets where lower download speeds and
less powerful mobile devices are common. Twitter Lite helps reach this
audience more effectively by making Twitter
faster and easier to use on low-bandwidth
connections. Twitter Lite is only
about 600k over the wire versus almost 24 megabytes to
install the native Android app. And for Twitter, who
measures their success in the number of tweets and
pages viewed per session, their progressive web app
has been a flyaway success, with a 75% increase in tweets
sent and 65% more page views. Today, Twitter Lite
has more active users than any other Twitter client. Twitter Lite is fast. It launches as a full screen
app from my home screen. It's reliable, working no matter
what my network connection is, and it's engaging. Service Workers is one of
the new platform APIs that's behind many of the
new capabilities that I've been talking about. The traditional web model
requires the browser to go to the network for
every single request. And if the network is
down, everything fails, and you get that
famous downasaur. But you don't always need
to traverse the network every single time. The Service Worker can cache
all of the resources needed for your page. It gives you full control
to manage the cache and allows you to decide
when to hit the cache and when to hit the network. Service Workers can handle more
than just network requests. They can handle
system-level notifications, like push messages. A push message is just
another type of request that the Service
Worker services. When a message comes in, it
wakes up the service worker, then calls its onpush handler. Earlier this year, Lancome
launched a new progressive web app. Compared to their previous
mobile experience, time to interactive
dropped by 84%, leading to a 15% decrease
in their bounce rates. To reengage with users, Lancome
added web push notifications, alerting users about exclusive
promotions, product releases, and to reconnect with shoppers
who have abandoned their carts. This strategy has delivered
an 18% open rate on mobile, and conversion rates
on abandoned carts have increased by 8%. The new strategy also delivered
a much better experience across platforms. iOS is important
to Lancome, and 65% of all users landing on
their progressive web app are on iPhones. With their new PWA,
Lancome saw a 53% increase in session length and a
10% decrease in bounce rate among iPhone users, despite the
fact that some features were unavailable to them. All told, the
progressive web app has been a tremendous
success, driving a 17% increase in conversions. Lyft also launched
their new mobile site as a progressive web app, with
the needs of emerging market users in mind. In emerging markets where you
can't take bandwidth or even connectivity for granted, it's
even harder for your audience to get into your app. Instead of making a simple
landing page that asks the user to install something,
their progressive web app is a feature-complete
version of Lyft, just without the install step. Remember, the goal isn't to get
the user to install your app, it's to get them to
use your service. The word "progressive"
in progressive web apps isn't there accidentally. Focusing on the
end-to-end user experience will have a dramatic
impact on your business, even for users who
can't experience the full power of
progressive web apps because they're on a
device that doesn't fully support Service Workers. A progressive web app doesn't
have to be a huge undertaking. So how do you get started? Well, first and foremost,
you need security. That means serving your
site from a secure origin. Everything must be
served via HTTPS. It's like table stakes for
your progressive web app. In fact, for many
new and even some old powerful web APIs
like geolocation, it now requires a secure origin. You may know the green
lock from the URL bar. The green lock indicates that
there's a secure connection between the site and the user. Having a secure connection
really means three things. The user can trust that
the site is actually you, they can be assured that no
one has tampered with the page, and that no one is listening
in on the connection. The web has tremendous
reach, and it's frictionless, so keeping users safe
is hugely important. Once you're serving everything
from a secure origin, you're ready to begin
your journey of building a progressive web app. There are plenty of
ways to get started, but they can be summarized
in these three approaches-- building from the ground up,
starting with a simple version, and focusing on
a single feature. Each of these makes sense
in a different scenario. Starting from the
ground up makes the most sense when a site is
about to go through a redesign. If you're starting
from scratch anyways, it makes sense to build in
progressive web appiness from the beginning. This approach enables you
to easily use the app shell pattern and take advantage of
the power of Service Workers. OLX is one of the largest online
destinations for classified ads in India, providing
communities and high growth markets with a vibrant
online marketplace. They looked to progressive
web app technologies to provide a faster
loading, immersive, and app-like experience. After launching their
progressive web app, the time until the page becomes
interactive fell by 23%, with a corresponding 80%
drop in bounce rates. OLX also wanted to
reengage mobile users, just as they would
on their mobile app. This meant taking
advantage of capabilities like push notifications
and add to home screen. These two updates increased
engagement by 250%. Monetization also improved. With ads loading faster,
the click through rate has increased by 146%. Of course, not everyone
can take this approach. Starting from scratch
often isn't realistic. The second approach is to build
a simple version of the site-- the light or mobile version-- and choose to optimize around
a specific section or user journey. An example of this
approach is Air Berlin. Their schedule
and demands didn't make it possible to
start from scratch, so instead, they focused on
the post-booking experience. Their user journey is one
you might be familiar with. You're at the airport,
and you want quick access to your itinerary details,
destination information, and above all else,
the boarding pass. Their progressive
web app heavily leverages caching to ensure
that it loads super fast and works reliably. From the time the user
taps on the home screen icon until the boarding pass
is up is less than a second, and it works even without
an internet connection. The final strategy is to define
a specific feature to focus on. Pick one feature where
you can have high impact, and focus on that. This is frequently
the approach needed at large companies, where
you may not have the backing to start from
scratch or even build a separate simple version. For example, The
Weather Company has been interested in progressive
web app technologies for quite some time,
but they needed to prioritize based
on what they believed would be highest impact for
their users and their business. They decided that the
most impactful feature was notifications. They decided to focus on a
single feature with web push, and they went big,
rolling out notifications globally in over 60 languages. Users on their
mobile web app can subscribe to multiple
types of notifications, just like on their native app. This success sets them
up on their journey to build a full progressive
web app experience. In the first three months
of rolling out web push, Weather saw over
a million opt-ins. Web push notifications
allow Weather to reach a whole new
audience with the same set of notifications as
their native app users. As you think about
your journey, do what makes sense for your users,
your site, and your company. Speaking of, we've
been so excited to see the incredible momentum
on progressive web apps around the world. Large companies, such as
Wego, Expedia, and Trivago have all rolled out successful
progressive web apps. Publishers like
Infobae and Forbes have launched
progressive web apps, and Forbes has seen a
doubling of user engagement since their launch. E-commerce site such as
Fandango, Alibaba, and Rakuten have all invested in
progressive web apps. Even new services, like
ride-sharing companies, that we might think
of as app only are getting in on the action. Lyft rolled out their
progressive web app last fall, and Ola Cabs, the largest
ride sharing service in India, has just launched their
progressive web app. This is just a sample
of some of the folks who are shipping
or actively working on progressive web apps. Every one of these companies
has had their own path for how they're investing
on the mobile web and starting down the path
of progressive web apps. In the next couple of
videos, Marico and I will show you how you
can build progressive web apps that are fast, integrated,
reliable, and engaging. Then, once you've
completed the videos, we have a collection
of code labs that you can use to put your
newfound knowledge to work. I hope these videos and
the accompanying code labs leave you inspired and confident
about building progressive web apps. With that, thanks. Let's jump into the next video-- building integrated experiences. [MUSIC PLAYING]
