Add to the web app manifest proper icons for different devices and you will also setup the icon name and the color properties needed for creating the splash screen.
- [Instructor] We now have the web app manifest there so it's time to define some icons and theme colors. Let's start with desktop. When we are running on desktop, you can see that little icon there that by default has an Angular logo. It's the Angular icon. And also we have the title there. So, let's change that. That's a standard HTML. So, for example, we can say here, "My Coffee App," put some spaces. And here we have this icon. So, here we have a link with rel icon pointing to a favicon file that we don't want, really.
So, I'm going to use four icons, a set of icons that I have here in a folder that you can download in the Exercise Files of this video. And I'm going to create then a folder inside source. I will call this icons. And I'm going to put all these icons here. Of course, you can have your own icons as well. You can see I have icons in different sizes. For the favicon let's use the smallest one.
So, I'm going to point to images/icon_96.png. Also, the type is different, this is not an ico file, it's a png, so I'm going to change the type. And if I want to serve that new folder, I need to say so to .angular-cli. Opening .angular-cli.json and adding another asset for my icons. And, if I want, I can remove the favicon file because I'm not going to use it anymore.
So, I need to save these and also I need to serve again. So, probably you need to stop your server and start your server again. So, here is my server. I will stop it with Control + C. And I will serve again. That will take the new changes in the cli.json file. Okay, it's done. So, I'm going to save my new HTML file. So, you can see my icon is not there, it's taking the old one because I don't have the same name here.
It says images and you can see it's icons. So, I need to update that, so icons. I will save. And now you can see we have a nice icon there for my desktop computer. Now let's see what happens on Android. As you can see here, Android is ignoring that favicon. That icon is for desktop. Also, on Android, we have the whole status bar.
So, the first pixels where you can see for example, the notification part of the operating system. And also the URL bar. On Android we can customize that with something called theme color. So, let's do that. So, going back to the HTML, I'm going to add a meta tag anywhere inside the head. I'm going to say meta name "theme-color". And as the content, we can add any CSS color.
It can be even a name, for example, let's write with orange. We're not going to use orange, but let's see what happens. If I refresh nano now you can see that the whole status bar on Android now orange. Pretty cool, right? And this is just a website, so it's not the pwa yet, so you can apply these to any website. So, let's use a different value that matches our icon's color. So, I'm going to use this color that came from my icon.
So, now it looks like a coffee color. So, that's the theme. But, we haven't worked with icons yet. For the icon, we are going to edit our manifest.json file. First, when we are installing our app, the name is really long. So, we want to use a different name for the icon itself. And for that, the manifest.json file has another property called short_name.
And that's the one that it's going to use for the icon. And the name is going to be used for other purposes such as the splash screen. So, for the short name, we can use something like "MyCoffeeApp". Also, we can set the theme color that is similar to the meta tag when in this case, it's going to be used when the user is opening the app from the icon and not from the browser. So, I'm going to use a CSS color here.
And besides the theme color, we also have background color. Background color is going to be used for the splash screen. So, it's not the background color of our app, of our canvas, but for the splash screen. In this case, I'm going to use a background color from my icon as well. And now it's time to talk about the icon. So, the problem with the icon is that we have so many devices out there that there is no single way to define the icon in terms of sizes because different devices will need different icon sizes.
So, that's why in the spec we don't have an icon property, we have an icons property. So, it's an array. Inside the array, we're going to set several icons. We're going to start talking about src, and that's basically the URL of the file. For example, we're going to start with icon_96.png. And then a property known as sizes. In this case, it's 96 by 96.
That's for a low resolution Android device, for example. But, devices with higher resolution will need a better version of that icon, so that's why we have here 144 and 192. So, what happens if we have an Android phone that is requesting or trying to use an icon size that we didn't set? The browser will just pick the nearest one, so we don't need to worry about that.
So, 192 is the high resolution for Android right now. For example, the Galaxy S8 will take that one. And also we have a 512 version. That's really big, and that's going to be used for some stores, for example for the Windows Store, Microsoft Windows Store, for showing the big icon inside the store. So, it's a good idea to always have a really big icon, usually 512 pixels, even if you are not using it today.
Or if we're not going to see it in action. For example, on Android. So, now that we have the icons, the name of the icon, the theme color, and the background color, we are ready to see this in action in our Android device. So, we are back on Android. You can see here we are not going to see that icon. We need to try to add this to the Home screen. And here you can see now, it's taking my new name, the short name, and also it's taking the icon.
Android accepts transparent icons so I can add this to my Home screen. And now if I'm going and check this, that looks pretty cool there. We have a circle icon with a coffee with MyCoffeeApp name inside. If I open that, pay attention to the splash screen because it goes really fast. It's using my colors and the full name of my app. And also, the status bar at the top has our theme color.
And from an OS point of view, now you can see that the theme color and the icon appears in the title of the document when I'm browsing all my apps. So, that's pretty cool because now we have all the UI matching our brand colors and that's something that we want as a browsing web app.
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