[PWA] PWA Builder 테스트

이제 PWA의 요건을 만족하는지 다시 테스트해보고, 테스트를 통과하였다면 직접 제작한 PWA를 설치하고 실행해보자.

1. 테스트하기

1.1 테스트 전 확인사항

테스트하기 전 변경 사항들이 모두 반영되었는지 확인해야 한다. 만약 ngrok로 생성한 url을 사용하였다면 로컬 서버에서 자동으로 업데이트되기 때문에 바로 테스트가 가능함. 하지만 Github pages url을 사용하였다면 반드시 변경 사항을 repository에 업로드해 주어야 한다.

 

github repository에 파일을 업로드할 때는 챕터 2.3에서 했던 것처럼 드래그 앤 드롭 방법을 사용할 수도 있지만, 일반적으로는 터미널에서 git 명령어를 사용하여 변경 사항을 업데이트

1.2 PWA Builder 테스트

PWA Builder 페이지로 돌아와서 자신의 url을 넣고 테스트해보기

 

2. 우리가 만든 PWA 설치하기

2.1 설치하기

우리가 만든 PWA가 잘 설치되는지 확인 우선 URL을 통해 웹 페이지에 들어가기. 주소창 우측에 보면 설치 버튼이 생긴 것을 발견할 수 있다. 설치 버튼을 눌러서 설치하기.

 

2.2  앱 실행하기

2.2.1 데스크톱으로 실행

데스크톱에 설치가 완료되면 Chrome 앱에 내가 만든 앱이 생성된 것을 확인할 수 있다

오프라인 페이지가 오프라인 환경에서 잘 실행되는 것도 확인가능