Hello and welcome to this video.
In this video, I'm going to introduce you to a lighthouse.
Lighthouse is a useful tool that web developers use.
What is Lighthouse?
Lighthouse is an open source, automated tool for improving the quality of web pages so you can run
it against any web page public or any web page that requires authentication.
It can audit the performance of a website or web page.
You can check for accessibility and also check if a website or your web app meets the criteria to be
a progressive web app.
You can also check for things like a seal and a lot more.
You can run Lighthouse inside the Chrome developer tools or from the command line or as a node module.
So if you want to run it as a node module, you have to install it using npm.
You can provide any new URL for a website to a lighthouse, and Lighthouse will run an audit on the
website and check for any issues the website or web page might have.
It allows you to generate a report on how well the page did from that report.
You can check on the things that have failed on the audit as indicators on how to improve the web page.
Each audit that you run has a reference documentation that explains why the audit is important and also
guides you how to fix the issue that the audit has detected.
I'm going to access Lighthouse, true, my developer console, so I've got my app running, so I'm just
going to press F12 on my keyboard in the developer tool.
There are different options here, so if you click on this arrow here, it gives you more option and
we have the option for Lighthouse.
So if we look at it here, these are the categories for the Lighthouse.
So, for example, you can check the performance of the app.
So whatever URL you've supplied, that's what the Lighthouse is going to generate a report on so you
can check if the app meets the criteria.
To be a progressive web app, you can check best practices, accessibility and seal.
So let's generate a report.
So I'm going to click to generate a report, and it would generate a report against the URL of supplied
for the app.
The time it takes to generate a report depends on the content of the website that is trying to generate
a report from.
It can take a while for Lighthouse to warm up if this is the first use on the website.
It also displays what it is trying to audit so you can see a serious audit in local host, which is
where my application is running from.
So Lighthouse has generated a report for my web app and this is a report.
So this is a performance accessibility best practices SEO.
And then we have one for progressive app, so I need to click on that so that it will show me the criteria
for progressive app to see this app has met it.
So on the progressive web app, we have two sections.
We have the installable.
This installable becomes green when the requirement has been met.
You can see here, says web app Manifest, or service workers do not meet the install ability requirement.
So one of the criteria of your being a progressive app, it must have a manifest file and also a service
worker, so those to have not added yet.
And if you click on the dropdown here, there is a link that you can click on that will give you more
information about the requirements.
So it tells you some information here or the service worker does in terms of its importance to a progressive
web app.
So in subsequent videos, I will be creating the.
First foul and also a service worker for the app to be optimized as a progressive app.
There's a lot of things we need to satisfy here, so everything here has to go green for it to be a
progressive app.
So for click on the dropdown here again, there's always a link that guides us to what you need to do.
We are running on local tostada moments, so this is not exactly red because we're redirecting the hasty
HTTP traffic to HTTPS on our local server.
And then here we need to configure a custom splash screen to click on the dropdown here.
And there's a link here with documentation as to what to do.
And then here as well, it says here that we do not have a theme color for the address bar.
It tells you how to add that to the methat tag of your HTML document again.
Click on the dropdown.
There's always a link with the documentation link to give you some information how to go about it.
And then here we also have this here.
The content is not size correctly for the viewport and gives you some information here what it is looking
for.
Click on the dropdown again.
There is a link for guidance on what to do.
So all these red flags here have to be satisfied for the app to qualify as a progressive web app.
So we're going to be addressing all these issues and make sure that Waze got ready turns green so that
our app can pass the test of being a progressive web app so you can see the importance of the lighthouse
generated reports.
So any time we make some improvement addressing some of these issues that has been red flagged or run
the report and then see if the report fixes that and they will keep generating the report until we have
satisfied all the red flags here, they must go green so that our app can become a progressive web app.
So that's it for this video on Lighthouse.
Thanks for watching.
Bye for now.