Do a PWA Audit with Lighthouse using Chrome Dev Tools
Chrome has a built-in audit tool called Lighthouse that we can use to give a readiness score to our web app. We'll run the progressive web app test, and interpret the results.
In particular, it's essential that a PWA gets run over HTTPS in production - otherwise, it won't work as a PWA at all.
Also, it's important to recognize the many differences in how PWAs operate between Android and iOS - and to manually test in each browser that you plan to support.
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.
Member comments are a way for members to communicate, interact, and ask questions about a lesson.
The instructor or someone from the community might respond to your question Here are a few basic guidelines to commenting on egghead.io
Be on-Topic
Comments are for discussing a lesson. If you're having a general issue with the website functionality, please contact us at support@egghead.io.
Avoid meta-discussion
Code Problems?
Should be accompanied by code! Codesandbox or Stackblitz provide a way to share code and discuss it in context
Details and Context
Vague question? Vague answer. Any details and context you can provide will lure more interesting answers!