1 00:00:00,210 --> 00:00:02,310 Hello and welcome to this video. 2 00:00:02,790 --> 00:00:06,660 In this video, I'm going to introduce you to a lighthouse. 3 00:00:06,690 --> 00:00:12,630 Lighthouse is a useful tool that web developers use. 4 00:00:12,870 --> 00:00:14,400 What is Lighthouse? 5 00:00:14,940 --> 00:00:25,920 Lighthouse is an open source, automated tool for improving the quality of web pages so you can run 6 00:00:25,920 --> 00:00:32,640 it against any web page public or any web page that requires authentication. 7 00:00:33,360 --> 00:00:38,700 It can audit the performance of a website or web page. 8 00:00:39,360 --> 00:00:50,070 You can check for accessibility and also check if a website or your web app meets the criteria to be 9 00:00:50,100 --> 00:00:51,900 a progressive web app. 10 00:00:52,260 --> 00:00:57,090 You can also check for things like a seal and a lot more. 11 00:00:57,360 --> 00:01:08,250 You can run Lighthouse inside the Chrome developer tools or from the command line or as a node module. 12 00:01:08,730 --> 00:01:13,740 So if you want to run it as a node module, you have to install it using npm. 13 00:01:13,920 --> 00:01:23,250 You can provide any new URL for a website to a lighthouse, and Lighthouse will run an audit on the 14 00:01:23,250 --> 00:01:30,420 website and check for any issues the website or web page might have. 15 00:01:31,050 --> 00:01:38,090 It allows you to generate a report on how well the page did from that report. 16 00:01:38,190 --> 00:01:48,540 You can check on the things that have failed on the audit as indicators on how to improve the web page. 17 00:01:48,960 --> 00:01:59,520 Each audit that you run has a reference documentation that explains why the audit is important and also 18 00:01:59,520 --> 00:02:06,120 guides you how to fix the issue that the audit has detected. 19 00:02:06,630 --> 00:02:13,710 I'm going to access Lighthouse, true, my developer console, so I've got my app running, so I'm just 20 00:02:13,710 --> 00:02:18,390 going to press F12 on my keyboard in the developer tool. 21 00:02:18,420 --> 00:02:24,220 There are different options here, so if you click on this arrow here, it gives you more option and 22 00:02:24,240 --> 00:02:26,010 we have the option for Lighthouse. 23 00:02:26,520 --> 00:02:31,740 So if we look at it here, these are the categories for the Lighthouse. 24 00:02:31,770 --> 00:02:37,320 So, for example, you can check the performance of the app. 25 00:02:37,890 --> 00:02:45,630 So whatever URL you've supplied, that's what the Lighthouse is going to generate a report on so you 26 00:02:45,630 --> 00:02:49,470 can check if the app meets the criteria. 27 00:02:49,470 --> 00:02:56,010 To be a progressive web app, you can check best practices, accessibility and seal. 28 00:02:56,340 --> 00:02:57,840 So let's generate a report. 29 00:02:57,840 --> 00:03:05,520 So I'm going to click to generate a report, and it would generate a report against the URL of supplied 30 00:03:05,760 --> 00:03:06,600 for the app. 31 00:03:06,780 --> 00:03:14,970 The time it takes to generate a report depends on the content of the website that is trying to generate 32 00:03:14,970 --> 00:03:16,020 a report from. 33 00:03:16,590 --> 00:03:23,340 It can take a while for Lighthouse to warm up if this is the first use on the website. 34 00:03:23,850 --> 00:03:31,410 It also displays what it is trying to audit so you can see a serious audit in local host, which is 35 00:03:31,410 --> 00:03:33,960 where my application is running from. 36 00:03:33,990 --> 00:03:41,940 So Lighthouse has generated a report for my web app and this is a report. 37 00:03:41,940 --> 00:03:47,520 So this is a performance accessibility best practices SEO. 38 00:03:48,060 --> 00:03:56,100 And then we have one for progressive app, so I need to click on that so that it will show me the criteria 39 00:03:56,820 --> 00:03:59,970 for progressive app to see this app has met it. 40 00:04:00,150 --> 00:04:04,740 So on the progressive web app, we have two sections. 41 00:04:05,190 --> 00:04:07,170 We have the installable. 42 00:04:08,010 --> 00:04:14,160 This installable becomes green when the requirement has been met. 43 00:04:14,640 --> 00:04:23,460 You can see here, says web app Manifest, or service workers do not meet the install ability requirement. 44 00:04:23,610 --> 00:04:32,250 So one of the criteria of your being a progressive app, it must have a manifest file and also a service 45 00:04:32,250 --> 00:04:35,880 worker, so those to have not added yet. 46 00:04:36,360 --> 00:04:42,540 And if you click on the dropdown here, there is a link that you can click on that will give you more 47 00:04:42,540 --> 00:04:45,200 information about the requirements. 48 00:04:45,200 --> 00:04:53,790 So it tells you some information here or the service worker does in terms of its importance to a progressive 49 00:04:53,790 --> 00:04:54,420 web app. 50 00:04:55,050 --> 00:04:59,110 So in subsequent videos, I will be creating the. 51 00:04:59,520 --> 00:05:09,060 First foul and also a service worker for the app to be optimized as a progressive app. 52 00:05:09,540 --> 00:05:17,400 There's a lot of things we need to satisfy here, so everything here has to go green for it to be a 53 00:05:17,400 --> 00:05:18,450 progressive app. 54 00:05:18,450 --> 00:05:25,020 So for click on the dropdown here again, there's always a link that guides us to what you need to do. 55 00:05:26,580 --> 00:05:33,850 We are running on local tostada moments, so this is not exactly red because we're redirecting the hasty 56 00:05:33,850 --> 00:05:38,310 HTTP traffic to HTTPS on our local server. 57 00:05:38,850 --> 00:05:45,540 And then here we need to configure a custom splash screen to click on the dropdown here. 58 00:05:46,890 --> 00:05:51,600 And there's a link here with documentation as to what to do. 59 00:05:52,230 --> 00:06:00,930 And then here as well, it says here that we do not have a theme color for the address bar. 60 00:06:01,710 --> 00:06:06,780 It tells you how to add that to the methat tag of your HTML document again. 61 00:06:07,080 --> 00:06:08,120 Click on the dropdown. 62 00:06:08,130 --> 00:06:15,810 There's always a link with the documentation link to give you some information how to go about it. 63 00:06:16,290 --> 00:06:18,300 And then here we also have this here. 64 00:06:18,780 --> 00:06:26,010 The content is not size correctly for the viewport and gives you some information here what it is looking 65 00:06:26,010 --> 00:06:26,460 for. 66 00:06:27,030 --> 00:06:28,500 Click on the dropdown again. 67 00:06:28,890 --> 00:06:32,940 There is a link for guidance on what to do. 68 00:06:33,330 --> 00:06:43,230 So all these red flags here have to be satisfied for the app to qualify as a progressive web app. 69 00:06:43,530 --> 00:06:50,370 So we're going to be addressing all these issues and make sure that Waze got ready turns green so that 70 00:06:50,370 --> 00:06:59,430 our app can pass the test of being a progressive web app so you can see the importance of the lighthouse 71 00:06:59,610 --> 00:07:00,780 generated reports. 72 00:07:00,780 --> 00:07:08,370 So any time we make some improvement addressing some of these issues that has been red flagged or run 73 00:07:08,370 --> 00:07:16,110 the report and then see if the report fixes that and they will keep generating the report until we have 74 00:07:16,590 --> 00:07:26,370 satisfied all the red flags here, they must go green so that our app can become a progressive web app. 75 00:07:26,880 --> 00:07:30,090 So that's it for this video on Lighthouse. 76 00:07:30,300 --> 00:07:31,320 Thanks for watching. 77 00:07:31,650 --> 00:07:32,310 Bye for now.