Testing the Progressive Web Application

[shaownhasan]

It's time to test the intervention we just made through LightHouse.

In this stage we will analyze the website where only the PWA score will be returned to us.

We reach the URL of the site to be transformed
Let's open the Chrome browser developer console
From the console menu, let's move to the AUDITS item

Developer Console / Audits
Click the RUN AUDITS button. The site analysis will begin (stay on the turn leads into sales with overseas chinese in worldwide data page of the site to be analyzed)
Once the evaluation is finished, we will receive a screen with the only available PWA entry.

Developer Console / LightHouse Result
If you followed the procedure to transform your site into a PWA to the letter, you should be able to see a screen with all “green dots”, which means that you have succeeded.

If you notice some “red dots”, then something is wrong.

LightHouse will provide you with every explanation, identifying the points to correct and the solutions to apply.

Now, instead, we will check whether the manifest and the service worker work correctly and are interpreted by the browser.

Let's go step by step:

1. Let's move to the Developer Console under Application


Developer Console / Application
2. On the left we will find an additional menu that contains the items Manifest, Service Worker and Clear cache (and others that do not interest us at this stage). These 3 items will help us understand the correct functioning of the PWA.

3. Let's move on to the Manifest item and check that the data entered through the code editor are correctly decoded by the console (Name, Short Name, Start URL, Background color, Orientation, Display and the Icon Set that we previously prepared)

4. Now let's move to the Service Worker item and check that it is working well. We can understand this because, if the service worker is working correctly, we will have a green dot in the status item with the relative "activated and running".