Auditing our application

Auditing an application is an important aspect when you develop your application. Whenever you want to improve performance, security, accessibility, or even the Progressive Web App itself, we need to audit our application and see how we can improve it.

To audit our application for PWA, we will be using Lighthouse, which is an open-source project that's used to improve the quality of the application. Lighthouse is built into the Chrome browser; to get to it, we need to open the developer tools. We can do this by right-clicking Inspect or using command + option + I on macOS and Ctrl + Shift + I on Windows. Afterward, we need to go to the Audits tab in developer tools, as follows:

Before we run the Lighthouse audit, we need to build our application using a production setting, and also make sure that we run it in incognito mode (so that no browser extension makes our web page slower).

To build our application with the prod setting, run the following command:

> ng build --prod

Then, go to the dist/electronic-store folder and run your local server. We will be using http-server:

> http-server

Let's open the application in incognito mode and run the audits:

We will see that our application gets a score of 46 for Progressive Web app. To see how that score was calculated, just click on the Progressive Web App score; this will take you to the audit result for the PWA:

The goal of this chapter is to get the score for the PWA to 100. We will address each of the checks in the following section and resolve them.

In this section, we have learned how to audit our application using Lighthouse and follow recommendations for best practices in various categories. In the next section, we will add an Angular service worker to our application using Angular schematics.

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset
18.190.159.10