Hello and welcome to this video.
In this video, I'm going to be adding icons to the app.
One of the requirements of being a progressive web app is that it should have icons.
This is my icons folder with various sized icons.
The icons must have a PNG file format and you will have icons for different sizes because your application
will be viewed by different devices.
So each icon represents different view ports or device screens that might access your application.
I've got an icon here called Musk's Cable and Musk cable icons, basically allows web developers to
specify a full length icon that will be cropped by the user agent to match or the icons on the device.
The application should also have a splash screen icon, which is basically what the user see when the
application is launched.
So these are all the icons that I'm going to have in the application, he's going to be contained in
a folder called icons.
Each of these icons have to be registered in the Manifest J some file so that the application knows
where to reference it from.
So I've added the icons folder here into my public directory for the application.
Next thing I want to do is update the manifest or chase on file to contain the icons.
So this is what my manifest torture is on file looks like at the moment, so I'm going to add the entries
for each of the icon.
I'm also going to add a value for a background color and also a display.
I have updated the manifesto JSON file to contain the icons.
I've also added an entry for background color on line number seven, and given this file, you also
got a key for display.
I give it a value of minimal Dash UI.
Minimal Dash UI basically consist of all the basic elements required by the user to have a cognitive
experience of the application.
So the UI will include everything from the keyboard to the touch screen display.
Online number nine is where I have declared the icons and the icons are being placed inside an array.
So you represent an area with a square bracket, so that's the beginning and the end on line number
forty one.
So inside the array, we have the value of each of the icons.
The format to represent each of the image icons is we have this source attribute, which is the location
of the image, followed by the name of the image.
So we have the location, which is in the icons folder and then slash the name of the image.
And then we have this size of the image and the type of image.
So it has to be an image and it has to be a P and G format.
So all the images are represented in the same format.
The last declaration here is for a mosque cable icon.
A mosque cable icon basically allows web developers to specify a full blurred icon that will be cropped
by the user agent to match or the icons on the device.
I also need to update the index today's HTML file, for example, on line number eight here in the Manifest
file, where we have the minimal dock UI.
I need to incorporate that into the metal tag that deals with the viewport, so I need to incorporate
that into there.
I need to add a title for the application in the index or HTML file.
I need to add a link to this manifesto torches on file inside the index or HTML file.
Another requirement of a progressive web app is to have a link to app or torch icon so that I'm also
going to add to the index to take HTML5.
Of updated the index HTML file online, No5 updated the meta tag, which controls the viewport to have
an initial skill and also a maximum skill, I've added a title on line number seven.
Online number eight have added a link to a reference the manifest file on line number nine.
I've added a link to iPod Touch icon.
So those are the modifications I've made to the index, both HDMI files, I'm just going to click,
file and save the changes now that next I'm going to generate a report using Lighthouse just to check
what was still have to do for our app to qualify as a progressive web app.
So I'm going to press F12 on my keyboard to access the Chrome developer tools.
And if we look on the menu items here on the application, you can see that we have the App Dock manifest.
So this is a manifest which gives you information by the Manifest file you can see here what a warning
sign does, saying that for this app to be installable as a progressive web app, it must have the ability
to work offline.
So I've not implemented that yet or implement that in subsequent videos.
So he gives us some information about the app so we can see the icons that have been added for different
device screens and other information relating to the application.
So if I click on this arrow here and go to Lighthouse, I'm just going to click to generate a report.
If we take a look at the progressive web app area that the report has generated, we have just a couple
of red flags.
So we've done quite well in that most of the requirements have turned green.
So with the installable, this means for the all progressive web app to be installable, the app must
have the ability to work offline.
So I've not implemented that yet.
I will do that in subsequent videos.
So once we do that, this option here should turn green.
The second red flag here is referring to the manifest file not having a must cable icon.
I do remember having the mask football icon, so let's take a look at the manifest file.
So this is a manifest file, and as you can clearly see, I do have a mosque liberal icon, so I'm going
to expand this dropdown here and click on the link to see more information so tells you what to do here.
I'm going to scroll through the documentation.
I'm not going to read everything.
I'm just going to go straight to the point.
Okay, so this is the definition in the manifest file.
So I had the source, I had the sizes I had to type, but I didn't have this text.
So I need to add this.
So this is what is saying.
I need to add that to the manifest file.
So I go back to the manifest file and I'm just going to do a comma.
And then top down and add the entry.
So this is what they've recommended, so I've added that a save the file, so I've relaunched the application
just to generate another day, reports I click to generate a report.
So if we take a look at the progressive web app area we can see here, this section, called P2P Optimized,
has now turned green, which means we've satisfied all the requirements on that this section.
So if you look here, the money first has a cable icon that has turned green just by adding that recommended
entry in the manifesto JSON file.
So the other thing we have to satisfy here now is to make the application have offline access.
So once we do that, we should be able to pass this section as well.
That says in soluble, that will go green, which means the application can be installed.
So we will address that in subsequent videos.