Do a PWA Audit with Lighthouse using Chrome Dev Tools

Instructor: [00:00] Once we have our PWA ready to deploy, we can run an audit on it with Chrome's DevTools. The audit tool is called Lighthouse. It can test many different aspects of a web application. We're only concerned with the progressive web app test right now. Then we'll run it, as if it were a mobile browser. We'll leave the defaults for throttling and check clear storage. Then we can run the audit.

[00:24] It will test the app, as if it were a mobile device. You can see it cycling through multiple modes. Once it's done, we get a report.

[00:34] First, let's look at the errors. It says that we don't redirect from http to https, which is true while we're in develop mode here. It's very important to do that in production. Most of the PWA features won't work at all on mobile devices if the site's not served through https.

[00:52] Next, it mentions we don't have a background color set in the manifest. Well, we did. Create React App actually ships with the background color line there. We had to remove it, in order to make the iOS splash screen work. We'll have to skip that one for now.

[01:07] The additional items to manually check and past audits are good to review, as well. You can click on one for more information. You'll get more detail and a link to even more, which links to the Google documentation about PWAs, which is quite thorough.

[01:23] Finally, even though we ran and passed the audit, one of the really big things to remember about PWAs is that iOS, Android, and all the various desktop browsers can still behave quite differently for some of the PWA features. It's always a good idea to test your app on each browser where you plan to support it.