Examples of Progressive Web Apps3:14 with Guil Hernandez
Progressive 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
You need to sign up for Treehouse in order to download course files.Sign up