 So today we'll be talking about how do you debug progressive web app using Lighthouse. So today our outline is we're talking about what is a progressive web application. And then we'll talk about the Lighthouse that Google designed to audit our websites, to check our web performance. And then we'll talk about how do we run Lighthouse on web pages. You can either do it by using Chrome DevTools or you can use it by the Node.js using command lines. And then I'll cover a bit about what Chrome DevTools are. I'll talk about how do we share and view Lighthouse reports. And I'll talk about how do we do continuous integration and continuous delivery of Lighthouse for our web pages. And then I'll continue to talk about how do we link the Lighthouse reports to our websites using a web UI. And finally I'll show a simple Lighthouse report. How do we do a simple Lighthouse report using a mock PWA at using the audits? So what exactly is progressive web application? So progressive web application is a tool designed by Google. It's a web application that you can build using CSS, HTML and JavaScript. And it works on any web browser and it complies with the standards by the W3C, the World Wide Web Consortium. So what are the features of progressive web application? Firstly, it's progressive. You can use it for any browser, any version because it improves the architecture of a PWA fits those systems. It's progressive, which means that if you're running a PWA you can do it for any screen size, you can do it for laptop, you can do it for tablet, you can do it for phone. It's faster after initial loading. What does that mean? It means that if you need to load the initial resources and elements after loading those resources, you don't need to download them again. You don't need to cache them again. The traditional way of how browsers work is they download the resources and they cache it. But for PWA, once the resources are loaded, they don't need to be re-rendered. It's connectivity independent. So what does that mean? It means that it can run on offline pages. It can run on very low connection quality. It's safe, it's discoverable and you can install it like an app. So how do we test our progressive web application? We can use Google's Lighthouse to test the performance of how our application is working. So what is Google's Lighthouse? Google's Lighthouse is an open source automated tool for improving our quality of web pages. It has different characteristics and features that we look into and then we can determine how do we improve our website. It contains audits for performance for progressive web applications, for search engine optimization and other features. You can run using Chrome Dev2 on the Google Chrome browser and you can audit. So how does the Lighthouse work? First, we audit a URL that we are testing and then we will return the report on how well the page runs. And then the development team will then use the audits, the failing audits to improve the overall page. So how do we run Lighthouse as a Chrome 2 extension? So first, in the Google Chrome we select the URL we wish to audit. And then we open Chrome Dev2 on the browser and we click the audit tab. And then for the audit tab we will perform the audits. And then based on what you are looking at you will select the different audit categories and you will run the audit and then you will generate the report. So how do we run Lighthouse using Node? First, we need to make sure that we have Google Chrome and Node.js on our machine and then we install Lighthouse using the global tag which is npm install-g Lighthouse so we install it as a global module. After that, we run an audit by running Lighthouse and the URL. And then if you want to know more about other features of Lighthouse we can type Lighthouse-help and it will show all the features and functions we can run on the command line. So what are Chrome Dev2s? Chrome Dev2s are web developer tools that Google has built directly onto their Chrome browser for us to test features. So for us, if you want to test work on DOM the document object model or our styling sheets we can right-click our element and then we select inspect to access the element panel for us to make to check how does it look how does it render and if you're using Mac machine you just press command control C but if you're using Windows, Linux or Chrome OS you run control shift C and for us to check for log messages or javascript on the Chrome Dev2s we can use command option J for Mac or control shift J for Windows, Linux or Chrome OS to access the console panel to do debugging. So what's the application of Chrome Dev2s? Why do we use them? First, we can view and change the DOM and we can do the necessary changes how does the web page load and then we can also view and change a web page style using CSS So Casey Best wrote very good articles about these two topics or how we can perform this test using the Chrome Dev2 and we can use Chrome Dev to also debug javascript we can view messages and also run javascript in the console we can optimise the website speed we can change our code so that our website look faster and we can also inspect the network activity so how do we share and view reports using JSON so in Lighthouse there's this thing called a viewer where we can share and view reports online and we can and the Lighthouse reports are all in JSON format so how do we collect the JSON output that we need first we go to Chrome Dev2s and then we download the report and from the command line we will run Lighthouse.js output you run that command to get the to set the output of path to sorry we will run the command to set the Lighthouse on Lighthouse we set the output to JSON and we will set the output path after setting the path we will go back to the viewer and we export the file and we save it as a JSON format so how do we view the report data first we go to the Lighthouse viewer on Google Chrome and then we will attach the JSON file onto the viewer or we can click on the viewer to insert the JSON file so we can also share and view reports using githubgis so we can share them using secret githubgis so how do we do that first we need to export the report using a gis so we export and we open the gis in the viewer and from there in the viewer we click share and if you are doing it for the first time we give permission to access the gis data so your gis will be created using the Lighthouse reports JSON output and the report the gis file name has to end in lighthouse.report.json so how do we view a report save in gis first we add the gis gis equal to id to the viewer's ur to the viewer's url where id is the id of the gis and then after that what do we do we will open the viewer paste the url of the gis into it so ci so now I will talk about what is continuous integration in web development so continuous integration means that we are able to continuously integrate our code into simple, shared and easy to access code repository so it means that you will continuously integrate whatever code changes we are making on our code base so what are the advantages of using continuous integration in web development we are able to decrease the time we review our code we will be able to not ship broken code or code that's not working and we will be able to maintain the code easily and produce updates so how do we do ci in lighthouse we can use so triosh is a contributor and he has this github code repository on lighthouse ci action where he automatically runs lighthouse on every pool request with github action so you just clone the code repository clone the code from the code repository and then you will run the project with your github account and then you will automatically check for your lighthouse when you update your web pages or your code and then we can also integrate the ci for lighthouse using static site generators like jacku getsv or hugo and then there's also this code repository by hcharm on github about how we can use lighthouse so it's a beginners tutorial and it uses react they do lighthouse rendering and checking our web pages for react web template now i'll talk about what is continuous delivery in our web development so what is continuous development continuous development is the development delivery feedback and quality management that runs in parallel at short intervals and a continuous loop which means that you are doing development work you are staging a code into the production server and you are also receiving feedback from the code so they are all running together at the same time so what advantages of using continuous delivery in web development we are able to troubleshoot problems that we face in the website we are able to perform quicker and more frequent releases according to our feedback loop and we can accelerate the feedback loop and improvements so we can improve our code base faster because we know what is the problem of the code we can debug faster and also it will reduce our cost on testing so now I will talk about how do we link our report to our website using web UI to monitor progress to monitor the web performance so Google has this thing called the PageSpeed Insights so we had to run PageSpeed Insights first we go to the PageSpeed Insights page on Google and then we select our web page URL that we want to to run the page on to run the lighthouse on and then we click analyse and then we are able to link the report back to the website but before that we definitely need the report so before that we need to run the audit for the report so now I will show you a demo of how a PWA works so before that a progressive web app has to contain a web manifest a service worker and an app icon of 7 different sizes to fit different screens so now I go to my code base so this is a very simple boilerplate progressive web app so first there is the index for the HTML there is the it works so there is the iOS screens so Apple and also there is also the icons the faith icons and then there needs to be a manifest.json so the manifest.json has to contain the name of an app the language where your website running in your faith icons for the different sizes screen sizes to support different screens and of course you need also the background color and the tint color because it will be something that the Chrome Chrome app will check so the other important thing is you need your service worker JavaScript file to do caching for your pages so what do you do first you name the cache and then you run different pages for the for your files to cache and then after that what do you do is you start the service worker and you cache all the apps content and then after that you will serve the cache content okay so now I will run this app on a web server so there is this thing called live server extension of widgets to your code I am going to run it sorry so I am running so now it is loading okay but because Lighthouse doesn't run on Firefox so I will put it on Chrome okay so that's how it runs that's how it renders so I go to Lighthouse I will search for developer tools and then I go to audits and then I run the audits and then the Lighthouse report will generate so based on report it will show you how fast a reliable website is it will show you about what installable items it will talk to it will give you your feedback on what is your optimisation so do you optimise your PWA do you redirect your HPB website and then there is this thing that I was talking about the background colour which is the set, a team colour to address bar so you will check for all these conditions and then you will export the report to your website so that's all thank you