1. 테스트하기1.1 테스트 전 확인사항1.2 PWA Builder 테스트2. 우리가 만든 PWA 설치하기2.1 설치하기2.2 '1만 시간의 법칙' 앱 실행하기2.2.1 데스크톱으로 실행2.2.2 모바일에서 실행하기(ios)
PWA를 만들기 위한 모든 과정을 완료했습니다. 이제 PWA의 요건을 만족하는지 다시 테스트해보고, 테스트를 통과하였다면 직접 제작한 PWA를 설치하고 실행해 봅시다.
1. 테스트하기
1.1 테스트 전 확인사항
테스트하기 전 변경 사항들이 모두 반영되었는지 확인해야 합니다. 만약 ngrok로 생성한 url을 사용하였다면 로컬 서버에서 자동으로 업데이트되기 때문에 바로 테스트가 가능합니다. 하지만 Github pages url을 사용하였다면 반드시 변경 사항을 repository에 업로드해 주어야 합니다.
github repository에 파일을 업로드할 때는 챕터 2.3에서 했던 것처럼 드래그 앤 드롭 방법을 사용할 수도 있지만, 일반적으로는 터미널에서 git 명령어를 사용하여 변경 사항을 업데이트합니다. git 명령어를 사용하는 방법은 <부록. Github - 기본 명령어>를 참고해 주세요.
1.2 PWA Builder 테스트
PWA Builder 페이지로 돌아와서 자신의 url을 넣고 테스트해 봅시다.
150점이네요! 이제 그냥 웹 앱이 아닌 PWA가 되었습니다.
Next 버튼을 누르면 Windows, Android 등 스토어에 등록할 수 있는 스토어 패키지 링크가 안내됩니다.
2. 우리가 만든 PWA 설치하기
2.1 설치하기
자, 이제 우리가 만든 PWA가 잘 설치되는지 확인해 볼까요? 우선 URL을 통해 웹 페이지에 들어갑니다. 주소창 우측에 보면 설치 버튼이 생긴 것을 발견할 수 있습니다. 설치 버튼을 눌러서 설치해 봅시다.
2.2 '1만 시간의 법칙' 앱 실행하기
2.2.1 데스크톱으로 실행
데스크톱에 설치가 완료되면 Chrome 앱에 우리가 만든 1만 시간의 법칙 앱이 생성된 것을 확인할 수 있습니다.
앱을 실행한 화면입니다.
오프라인 페이지가 오프라인 환경에서 잘 실행되는 것도 확인할 수 있습니다.
2.2.2 모바일에서 실행하기(ios)
1. 웹 페이지를 사파리에서 실행합니다.
2.
홈 화면에 추가를 클릭하여 홈 화면에 바로 가기를 추가합니다.3. 홈 화면에 바로 가기가 추가된 것을 확인할 수 있습니다.
