우리는 이미 PWA의 요건을 알고 있습니다. 하지만 우리가 만든 웹이 PWA의 요건을 충족하는지 어떻게 확인할 수 있을까요?

첫 번째 방법은 Chrome DevTools에서 제공하는 Lighthouse를 사용하는 것이고, 다른 하나는 PWA Builder를 사용하는 방법입니다. 본 강의에서는 PWA Builder를 사용하여 실습을 진행할 것입니다.

1. Lighthouse

Lighthouse(라이트 하우스)는 웹 페이지의 품질을 개선하기 위한 자동 오픈 소스 도구로, 성능, 접근성, PWA, SEO 등에 대한 검사를 진행할 수 있습니다.

먼저, Lighthouse를 통해 웹 페이지 검사를 진행하도록 하겠습니다.

1.1 크롬을 통해 웹 페이지 실행하기

스크린샷 2021-08-24 오전 9.44.02.png

1.2 개발자 도구 열기

개발자 도구를 여는 단축키는 Mac에서는 Option + Command + i이고, Windows에서는 Ctrl + Shift + i입니다. F12를 통해서도 개발자 도구를 열 수 있습니다.

아래는 단축키를 사용하지 않고 개발자 도구를 여는 방법입니다.

스크린샷 2021-08-24 오전 9.48.21.png

개발자 도구 상단에 있는 메뉴에서 Lighthouse를 클릭합니다.

스크린샷 2021-08-24 오전 9.51.45.png

스크린샷 2021-08-24 오전 9.51.33.png