1
00:00:00,060 --> 00:00:02,130
Hello and welcome to this video.

2
00:00:02,490 --> 00:00:10,650
In this video, I'm going to be creating a manifest file, a manifest file is one of the requirements

3
00:00:11,220 --> 00:00:16,170
of a web application becoming a progressive web app.

4
00:00:16,560 --> 00:00:18,090
What is the Manifest File?

5
00:00:18,870 --> 00:00:27,120
A manifest file is a j some file that includes the metadata of the application.

6
00:00:27,960 --> 00:00:35,550
It includes information like the name of the application, the short name of the application, the description,

7
00:00:36,240 --> 00:00:45,570
the start, your URL, background, color and other relevant information about the application.

8
00:00:45,870 --> 00:00:48,960
I'm going to create the Manifesto J.

9
00:00:48,960 --> 00:00:52,680
Some file inside the public directory.

10
00:00:52,680 --> 00:01:01,860
Some call the public directory selected a right click select new file and I'll call it Manifest JSON

11
00:01:02,040 --> 00:01:05,530
of call the file manifest on a press enter.

12
00:01:06,270 --> 00:01:14,070
And that file should be inside the public directory, so it's very important to make sure it's in the

13
00:01:14,070 --> 00:01:15,150
public directory.

14
00:01:15,450 --> 00:01:22,680
So when the web server serves the directory, it also picks up the manifest chase on file.

15
00:01:22,890 --> 00:01:27,390
Now I'm going to add some information into the Manifest J some file.

16
00:01:27,900 --> 00:01:35,730
The Manifest adjacent file can always be updated with new information about your application.

17
00:01:35,760 --> 00:01:38,790
I've added some information to the Manifest J.

18
00:01:38,790 --> 00:01:47,370
Some file JASON data usually contains key and then values, so you have the keys on the left, which

19
00:01:47,370 --> 00:01:54,900
are represented with blue text, and then you have the values for the keys on the right, which are

20
00:01:54,900 --> 00:01:57,900
represented by this orange text.

21
00:01:58,530 --> 00:02:06,060
So the name of the application is going to be to do list web app and then sometimes the name of an application

22
00:02:06,060 --> 00:02:13,080
can be too long for a particular device that is viewing the application so you can use the short name

23
00:02:13,080 --> 00:02:13,710
instead.

24
00:02:14,250 --> 00:02:19,020
So the short name is to do app, and then we have the description key.

25
00:02:20,010 --> 00:02:27,570
This is what I've added as the description, but you can always add your own description and then start

26
00:02:27,810 --> 00:02:29,180
on the school URL.

27
00:02:29,220 --> 00:02:34,140
This is the start location for the application when the application starts.

28
00:02:34,590 --> 00:02:43,620
So this is the location, so it starts on localhost for three thousand and the start file is the index

29
00:02:43,620 --> 00:02:44,790
to take HTML.

30
00:02:45,300 --> 00:02:51,990
And then I've given it a theme color and this is the theme color when you represent a theme color.

31
00:02:52,020 --> 00:02:56,820
You also have to add it as a metal tag.

32
00:02:57,300 --> 00:03:00,150
Inside the index stood at HTML files.

33
00:03:00,150 --> 00:03:05,970
When you run, the Lighthouse Lighthouse will tell you that's what you have to do.

34
00:03:06,330 --> 00:03:08,910
So I've specified it here online.

35
00:03:08,910 --> 00:03:20,070
The basics I need to go into my index to take HTML and then I need to add a reference the meta tag to

36
00:03:20,490 --> 00:03:21,450
the theme color.

37
00:03:21,660 --> 00:03:28,530
I've added a line for the theme color on line number five here, so they say the theme color and that

38
00:03:28,530 --> 00:03:30,210
is the color I have assigned.

39
00:03:30,540 --> 00:03:37,860
So that has to match what I have specified in the manifesto J.

40
00:03:37,860 --> 00:03:42,430
Some file on line number six while the web server is running.

41
00:03:42,510 --> 00:03:51,660
He also watches out for changes in your application files and then refreshes the application to accommodate

42
00:03:51,660 --> 00:03:52,530
those changes.

43
00:03:52,710 --> 00:04:00,870
I'm going to generate a report just to see if we have addressed some of the issues the report raised

44
00:04:01,020 --> 00:04:04,020
in Lighthouse, so I'll click on Generate Report.

45
00:04:04,530 --> 00:04:11,640
The report has been generated, so I click on the progressive web app option, and if we take a look

46
00:04:11,640 --> 00:04:14,700
here, we may have addressed some of the issues.

47
00:04:15,450 --> 00:04:20,460
So I can't see the issue about the color that has gone.

48
00:04:20,610 --> 00:04:25,800
We have addressed some of the red flags some have gone with to close quite a few.

49
00:04:26,940 --> 00:04:30,330
We've got the manifest, but we haven't got a service worker.

50
00:04:30,960 --> 00:04:39,090
So in the next video, I'm going to add a service worker as we continue to address the issues raised

51
00:04:39,090 --> 00:04:40,920
here with these red flags.

52
00:04:41,350 --> 00:04:47,660
We'll continue to generate reports just to see if we have fixed the issues.

53
00:04:47,670 --> 00:04:54,540
So that is it for this video In this video, I created a manifest file for the application.

54
00:04:55,050 --> 00:04:56,010
Thanks for watching.

55
00:04:56,190 --> 00:04:57,000
Bye for now.