Hello and welcome to this video.
In this video, I'm going to be creating a manifest file, a manifest file is one of the requirements
of a web application becoming a progressive web app.
What is the Manifest File?
A manifest file is a j some file that includes the metadata of the application.
It includes information like the name of the application, the short name of the application, the description,
the start, your URL, background, color and other relevant information about the application.
I'm going to create the Manifesto J.
Some file inside the public directory.
Some call the public directory selected a right click select new file and I'll call it Manifest JSON
of call the file manifest on a press enter.
And that file should be inside the public directory, so it's very important to make sure it's in the
public directory.
So when the web server serves the directory, it also picks up the manifest chase on file.
Now I'm going to add some information into the Manifest J some file.
The Manifest adjacent file can always be updated with new information about your application.
I've added some information to the Manifest J.
Some file JASON data usually contains key and then values, so you have the keys on the left, which
are represented with blue text, and then you have the values for the keys on the right, which are
represented by this orange text.
So the name of the application is going to be to do list web app and then sometimes the name of an application
can be too long for a particular device that is viewing the application so you can use the short name
instead.
So the short name is to do app, and then we have the description key.
This is what I've added as the description, but you can always add your own description and then start
on the school URL.
This is the start location for the application when the application starts.
So this is the location, so it starts on localhost for three thousand and the start file is the index
to take HTML.
And then I've given it a theme color and this is the theme color when you represent a theme color.
You also have to add it as a metal tag.
Inside the index stood at HTML files.
When you run, the Lighthouse Lighthouse will tell you that's what you have to do.
So I've specified it here online.
The basics I need to go into my index to take HTML and then I need to add a reference the meta tag to
the theme color.
I've added a line for the theme color on line number five here, so they say the theme color and that
is the color I have assigned.
So that has to match what I have specified in the manifesto J.
Some file on line number six while the web server is running.
He also watches out for changes in your application files and then refreshes the application to accommodate
those changes.
I'm going to generate a report just to see if we have addressed some of the issues the report raised
in Lighthouse, so I'll click on Generate Report.
The report has been generated, so I click on the progressive web app option, and if we take a look
here, we may have addressed some of the issues.
So I can't see the issue about the color that has gone.
We have addressed some of the red flags some have gone with to close quite a few.
We've got the manifest, but we haven't got a service worker.
So in the next video, I'm going to add a service worker as we continue to address the issues raised
here with these red flags.
We'll continue to generate reports just to see if we have fixed the issues.
So that is it for this video In this video, I created a manifest file for the application.
Thanks for watching.
Bye for now.