1
00:00:00,090 --> 00:00:02,070
Hello and welcome to this video.

2
00:00:02,370 --> 00:00:07,920
In this video, I'm going to be adding icons to the app.

3
00:00:08,520 --> 00:00:15,870
One of the requirements of being a progressive web app is that it should have icons.

4
00:00:16,470 --> 00:00:21,270
This is my icons folder with various sized icons.

5
00:00:21,930 --> 00:00:32,580
The icons must have a PNG file format and you will have icons for different sizes because your application

6
00:00:33,240 --> 00:00:36,300
will be viewed by different devices.

7
00:00:36,780 --> 00:00:47,250
So each icon represents different view ports or device screens that might access your application.

8
00:00:48,330 --> 00:00:56,820
I've got an icon here called Musk's Cable and Musk cable icons, basically allows web developers to

9
00:00:56,820 --> 00:01:08,730
specify a full length icon that will be cropped by the user agent to match or the icons on the device.

10
00:01:09,630 --> 00:01:19,830
The application should also have a splash screen icon, which is basically what the user see when the

11
00:01:19,830 --> 00:01:22,140
application is launched.

12
00:01:23,470 --> 00:01:29,890
So these are all the icons that I'm going to have in the application, he's going to be contained in

13
00:01:29,890 --> 00:01:31,810
a folder called icons.

14
00:01:32,800 --> 00:01:41,140
Each of these icons have to be registered in the Manifest J some file so that the application knows

15
00:01:41,380 --> 00:01:43,270
where to reference it from.

16
00:01:44,140 --> 00:01:51,790
So I've added the icons folder here into my public directory for the application.

17
00:01:52,210 --> 00:02:00,100
Next thing I want to do is update the manifest or chase on file to contain the icons.

18
00:02:00,880 --> 00:02:08,860
So this is what my manifest torture is on file looks like at the moment, so I'm going to add the entries

19
00:02:08,860 --> 00:02:10,570
for each of the icon.

20
00:02:10,930 --> 00:02:18,850
I'm also going to add a value for a background color and also a display.

21
00:02:19,270 --> 00:02:25,990
I have updated the manifesto JSON file to contain the icons.

22
00:02:26,410 --> 00:02:34,690
I've also added an entry for background color on line number seven, and given this file, you also

23
00:02:34,690 --> 00:02:37,540
got a key for display.

24
00:02:37,550 --> 00:02:41,380
I give it a value of minimal Dash UI.

25
00:02:41,950 --> 00:02:53,020
Minimal Dash UI basically consist of all the basic elements required by the user to have a cognitive

26
00:02:53,020 --> 00:02:55,390
experience of the application.

27
00:02:55,690 --> 00:03:02,950
So the UI will include everything from the keyboard to the touch screen display.

28
00:03:04,090 --> 00:03:13,660
Online number nine is where I have declared the icons and the icons are being placed inside an array.

29
00:03:14,140 --> 00:03:21,820
So you represent an area with a square bracket, so that's the beginning and the end on line number

30
00:03:21,850 --> 00:03:23,050
forty one.

31
00:03:23,740 --> 00:03:29,800
So inside the array, we have the value of each of the icons.

32
00:03:30,220 --> 00:03:39,790
The format to represent each of the image icons is we have this source attribute, which is the location

33
00:03:39,790 --> 00:03:44,040
of the image, followed by the name of the image.

34
00:03:44,050 --> 00:03:50,890
So we have the location, which is in the icons folder and then slash the name of the image.

35
00:03:51,310 --> 00:03:56,320
And then we have this size of the image and the type of image.

36
00:03:56,590 --> 00:04:01,180
So it has to be an image and it has to be a P and G format.

37
00:04:01,660 --> 00:04:06,940
So all the images are represented in the same format.

38
00:04:07,360 --> 00:04:13,420
The last declaration here is for a mosque cable icon.

39
00:04:14,200 --> 00:04:23,500
A mosque cable icon basically allows web developers to specify a full blurred icon that will be cropped

40
00:04:23,740 --> 00:04:29,350
by the user agent to match or the icons on the device.

41
00:04:30,220 --> 00:04:37,210
I also need to update the index today's HTML file, for example, on line number eight here in the Manifest

42
00:04:37,210 --> 00:04:40,060
file, where we have the minimal dock UI.

43
00:04:40,570 --> 00:04:49,840
I need to incorporate that into the metal tag that deals with the viewport, so I need to incorporate

44
00:04:49,840 --> 00:04:50,890
that into there.

45
00:04:51,460 --> 00:04:57,730
I need to add a title for the application in the index or HTML file.

46
00:04:58,240 --> 00:05:06,850
I need to add a link to this manifesto torches on file inside the index or HTML file.

47
00:05:07,000 --> 00:05:16,720
Another requirement of a progressive web app is to have a link to app or torch icon so that I'm also

48
00:05:16,720 --> 00:05:20,260
going to add to the index to take HTML5.

49
00:05:21,750 --> 00:05:32,610
Of updated the index HTML file online, No5 updated the meta tag, which controls the viewport to have

50
00:05:32,640 --> 00:05:40,920
an initial skill and also a maximum skill, I've added a title on line number seven.

51
00:05:42,010 --> 00:05:51,760
Online number eight have added a link to a reference the manifest file on line number nine.

52
00:05:52,150 --> 00:05:56,200
I've added a link to iPod Touch icon.

53
00:05:58,630 --> 00:06:05,620
So those are the modifications I've made to the index, both HDMI files, I'm just going to click,

54
00:06:05,620 --> 00:06:16,750
file and save the changes now that next I'm going to generate a report using Lighthouse just to check

55
00:06:16,930 --> 00:06:24,430
what was still have to do for our app to qualify as a progressive web app.

56
00:06:24,910 --> 00:06:30,130
So I'm going to press F12 on my keyboard to access the Chrome developer tools.

57
00:06:30,910 --> 00:06:39,310
And if we look on the menu items here on the application, you can see that we have the App Dock manifest.

58
00:06:39,310 --> 00:06:46,360
So this is a manifest which gives you information by the Manifest file you can see here what a warning

59
00:06:46,360 --> 00:06:57,190
sign does, saying that for this app to be installable as a progressive web app, it must have the ability

60
00:06:57,730 --> 00:06:59,050
to work offline.

61
00:06:59,500 --> 00:07:04,990
So I've not implemented that yet or implement that in subsequent videos.

62
00:07:05,470 --> 00:07:13,150
So he gives us some information about the app so we can see the icons that have been added for different

63
00:07:13,360 --> 00:07:20,470
device screens and other information relating to the application.

64
00:07:21,010 --> 00:07:28,870
So if I click on this arrow here and go to Lighthouse, I'm just going to click to generate a report.

65
00:07:29,050 --> 00:07:39,340
If we take a look at the progressive web app area that the report has generated, we have just a couple

66
00:07:39,340 --> 00:07:40,930
of red flags.

67
00:07:41,350 --> 00:07:46,540
So we've done quite well in that most of the requirements have turned green.

68
00:07:47,230 --> 00:07:56,200
So with the installable, this means for the all progressive web app to be installable, the app must

69
00:07:56,200 --> 00:08:00,190
have the ability to work offline.

70
00:08:00,760 --> 00:08:03,170
So I've not implemented that yet.

71
00:08:03,190 --> 00:08:05,680
I will do that in subsequent videos.

72
00:08:06,040 --> 00:08:10,810
So once we do that, this option here should turn green.

73
00:08:11,650 --> 00:08:20,410
The second red flag here is referring to the manifest file not having a must cable icon.

74
00:08:21,100 --> 00:08:27,010
I do remember having the mask football icon, so let's take a look at the manifest file.

75
00:08:28,340 --> 00:08:34,610
So this is a manifest file, and as you can clearly see, I do have a mosque liberal icon, so I'm going

76
00:08:34,610 --> 00:08:44,270
to expand this dropdown here and click on the link to see more information so tells you what to do here.

77
00:08:44,490 --> 00:08:47,210
I'm going to scroll through the documentation.

78
00:08:47,240 --> 00:08:48,510
I'm not going to read everything.

79
00:08:48,560 --> 00:08:50,260
I'm just going to go straight to the point.

80
00:08:50,270 --> 00:08:55,370
Okay, so this is the definition in the manifest file.

81
00:08:56,150 --> 00:09:02,330
So I had the source, I had the sizes I had to type, but I didn't have this text.

82
00:09:02,330 --> 00:09:03,710
So I need to add this.

83
00:09:03,710 --> 00:09:04,970
So this is what is saying.

84
00:09:05,480 --> 00:09:08,990
I need to add that to the manifest file.

85
00:09:09,440 --> 00:09:16,850
So I go back to the manifest file and I'm just going to do a comma.

86
00:09:18,820 --> 00:09:22,630
And then top down and add the entry.

87
00:09:23,170 --> 00:09:30,100
So this is what they've recommended, so I've added that a save the file, so I've relaunched the application

88
00:09:30,100 --> 00:09:34,120
just to generate another day, reports I click to generate a report.

89
00:09:34,240 --> 00:09:42,070
So if we take a look at the progressive web app area we can see here, this section, called P2P Optimized,

90
00:09:42,280 --> 00:09:48,490
has now turned green, which means we've satisfied all the requirements on that this section.

91
00:09:49,030 --> 00:09:57,130
So if you look here, the money first has a cable icon that has turned green just by adding that recommended

92
00:09:57,130 --> 00:10:00,040
entry in the manifesto JSON file.

93
00:10:00,400 --> 00:10:08,230
So the other thing we have to satisfy here now is to make the application have offline access.

94
00:10:08,620 --> 00:10:13,320
So once we do that, we should be able to pass this section as well.

95
00:10:13,330 --> 00:10:19,570
That says in soluble, that will go green, which means the application can be installed.

96
00:10:19,990 --> 00:10:23,380
So we will address that in subsequent videos.