Preview
Video Player
00:00
00:00
Examples of Progressive Web Apps
3:14Progressive web apps are starting to gain traction, and companies are already using them with encouraging results. This video demonstrates live examples of progressive web apps, using the Android emulator.
Progressive web apps are just
starting to gain traction and
0:00
companies are all ready using
them with promising results.
0:03
So here I'll show you a few live
examples of progressive Web Apps and
0:06
I'll be running Google Chrome
on the Android emulator, so
0:09
you're able to see all the progressive
web app features in action.
0:12
So the first app will
look at is flipkart.com.
0:15
Flipkart uses a progressive web app for
0:18
its popular e-commerce
platform called Flipkart Lite.
0:21
Now, on the desktop browser it looks
like a typical e-commerce site,
0:24
in the Android emulator,
I'll type the address flipkart.com and
0:28
we immediately see the header UI with
the navigation and search field, and
0:31
the loader below that,
then the data loads.
0:35
Now the apps starts off as
a regular browser tab, But
0:37
it's built using progressive
web app technologies and
0:41
characteristics you'll learn
about in the next video.
0:43
As you navigate through the app,
notice how the interactions look and
0:46
feel like those on a native app.
0:51
And to make the experience even more
app like and fully immersive, you can
0:53
click Add to Home screen here in the menu,
and this will prompt you to add the app
0:58
to your home screen with the Flipkart Lite
name and the icon display here.
1:03
So I'll click ADD and over in the home
screen, you'll see the Flipkart Lite icon
1:09
and clicking on it loads the app and the
first thing you'll see is the loading or
1:14
splash screen just like on a native app.
1:18
Once the app loads,
you're still in the Chrome browser but,
1:20
it's now in standalone mode
which hides the browser Chrome,
1:24
providing an immersive
full screen experience.
1:27
And once users sign up and
1:31
log in, the app can even engage
users with push notifications.
1:32
Progressive web apps
should also work offline.
1:37
So if I turn off my internet connection
and click to one of these sections,
1:39
you'll see a message that tells
you there's no connection.
1:44
But Progressive Web Apps
cache static assets locally.
1:47
So the UI is still present, even if
I refresh the app with no connection.
1:50
I can click back to the apps homepage, and
1:54
see all the relevant content
is still being displayed.
1:56
Next, let's have a look at Flipboard.com.
2:00
I'll click Explore to view
all the different boards, and
2:03
after interacting with the app for
a while or on your second visit,
2:08
you'll see that this app displays a Add
to Home screen banner at the bottom,
2:13
prompting you to add the app
to your home screen.
2:17
Click Add To Home Screen and
2:20
just like the Flipkart app, you'll see
the Flipboard icon on your home screen.
2:21
Clicking the icon loads the standalone
app displaying the splash screen
2:27
while the app loads,
then the app in full screen.
2:32
And you'll notice that both apps appear
as top level apps in the device's task
2:34
switcher.
2:39
So as you've seen,
these apps don't need to be packaged and
2:39
deployed through any stores.
2:42
They're just websites that
took all the right vitamins,
2:45
as Chrome engineer
Alex Russell refers to them.
2:47
So when you build a progressive
web app that works for
2:50
all devices, all users are going to be
running the same version of your web app,
2:53
unlike the version
fragmentation of native apps.
2:57
This allows developers to iterate and
deploy updates to users much faster.
3:00
You can view a list of the latest
progressive web apps and
3:05
awesome demos here at pwa.rocks.
3:08
I've posted the link in
the teacher's notes.
3:11