See a PWA on a real Android device and and iPhone. See how progressive web apps look, and learn about the installation process and how the apps appear after they are installed.
- [Instructor] It's now ti`me to see some Progressive Web Apps in action. Here you can see an Android phone. I'm going to show you a Progressive Web App directly here. I'm going to open Chrome. I'm going to open the website of the NASA for an open-source project. For now it's a website so you can see we have a URL bar at the top. We can type a URL. I'm inside Chrome. I have the keyboard. I have all the Chrome stuff. I'm inside Chrome. Even if I'm open, the apps, you can see I'm inside Chrome.
This is just a website. As we mentioned before, we can install these apps. Using the menu, I'm going to use the option, Add to Home screen. If I click Add to Home screen, now you can see it's adding an icon to my Home screen. Now the NASA was added to my Home screen. If I'm going there, you can see now a new icon. Probably you're thinking, "Well, that's a shortcut "to the same website." The answer is kind of.
If I open that icon, you can see it has first one splash screen. Now if you pay attention, I'm in full-screen mode. I don't have any Chrome URL bar, for example. Also, while it looks like an app, so we have a lot of features here inside and from an OS point of view, you can see it's not Chrome, it's NASA OSS. It's a different app. It looks like an app from a user's point of view.
Even I can close Chrome like this and my NASA app is still there up and running. Of course, it's still using the Chrome engine behind the scenes, but as a user, you can see it's a full app. Now I'm going to try another Progressive Web App. It's a QR Code Reader, QR Code Scanner. You can see it's open in my camera.
In this case, it's using my hardware. I'm still inside Chrome so let's install this, add to the Home screen, and now I have the QR Scanner there. It's ready to be used as a full screen QR Code scanner. Now I can point and tilt there. You can see that's the QR Code saying, "Hello." Now I have installed a full-screen app inside my Android operating system.
That's a Progressive Web App. Most of these apps also work offline without connection. Now it's time to see what happens on iOS. I'm here in iOS Simulator. I will open Safari, again, the browser for now. We're going to try the same NASA Progressive Web App. You can see it's a website, it's working inside Safari. Now I can click Share. I can add to my Home Screen.
It's requesting the addition of an icon that appear directly in my iPhone. Of course, it works also on iPad. If I open this icon now, I'm in full-screen mode. You can see that the NASA app is behind the status bar. From an OS point of view, it looks like a different app. I can stop Safari and the app is still there. Now from a user's point of view, it looks like a different app.
Let's try another Progressive Web App on iOS. I will open Polytimer. It's just a very small timer app. Let's install the app first, so Share, Add to Home Screen. Polytimer, that's the icon, Add. Now we have the icon on a full-screen experience that you can see it's up and running. It looks like a completely native app from a user's point of view.
It's still using the WebGate engine but outside of Safari. Now you know how Progressive Web Apps looks like on Android and iOS. Now it's time to start coding our own app and see how to create offline experiences that will be installed and will work offline.
Instructor Maximiliano Firtman takes you through the steps of upgrading an enterprise-style application to a PWA. First, he discusses the preparation steps involved. Then, he explains how to lay out and create the user interface. Next, he demonstrates how to get your application to connect to web services. Maximiliano also show how to make sure your PWA is installable, followed by how to leverage service workers for going offline.
- Progressive web app architecture
- Creating business logic classes
- Geolocation and data services
- Adding routes to a project
- Creating a RESTful API
- Connecting Angular with HTTP module
- Connecting the form with the service
- The web app manifest
- Using service workers
- Pre-caching an app's shell with ngsw
- Serving an app while offline
- Updating an interface on network status change