삭제한 안드로이드 앱 생성 PWABuilder에서 상단 주소 라인

안녕하세요^_^

PWA Builder를 이용하면 PWA의 동일 코드 기반으로 추가 수정 없이 안드로이드 앱으로 변환하여 원어민 앱을 만들 수 있습니다. 이는 구글의 최신 기술인 버블랩(Bubble wrap)과 MS의 오픈소스 무료 서비스인 PWA Builder가 협력하여 만들어진 편리함입니다. 기술적으로는 크롬 엔진의 TWA(Trusted Web Activitues)라고 하는 커스텀 탭을 사용합니다. 화빌더는 TWA 기술의 내부적인 사용법을 몰라도 사용할 수 있도록 자동화시켜 완성 파일을 만들어 줍니다. 자세한 내용은 아래를 참고하시기 바랍니다.

+ 기존에 운영하던 웹사이트를 PWA에서 안드로이드 앱으로 바꾸는 방법 - https://blog.naver.com/lifeandrew/222134417917 

기존 운영하던 웹사이트를 PWA에서 안드로이드앱으로 바꾸는 방법

하지만 PWA 주인이 아닌 사람이 앱에서 사이트를 도용하는 것을 방지하기 위해 다음 그림과 같이 상단에 주소가 표시됩니다.

이것은 assetlinks.json파일을 연결하면 쉽게 해결할 수 있는데 어떻게 할 수 있는지 알아보겠습니다. 사용해 보는 PWA앱은, 책의 3 페이지째로 설명하는 「E메일-구글 인증 로그인」예제를 적용해 봅시다.

<안드로이드 앱으로 변환하는 책으로 제작한 이메일 - 구글 인증 로그인 PWA 앱 예제>

이 예제를 안드로이드 앱으로 바꾸면 다음과 같습니다. 이렇게 기존의 웹사이트를 PWA에서 주소가 없는 완전한 안드로이드 앱으로 변환할 수 있는지 봅시다.

<위 주소의 행이 없는 것으로 변환된 안드로이드 앱>

 

 

1. PWA Builder에서 PWA를 안드로이드 앱으로 변환

(1) [https:/] 에 액세스 해, PWA호스팅 된 주소를 입력합니다.

그러면 PWA의 조건을 어느 정도 충족하고 있는지가 표시됩니다. 100점 맞으셨네요 상단 우측의 [Build My PWA] 버튼을 누릅니다.

다음에 배포할 수 있는 플랫폼이 표시됩니다. 현재 안드로이드 OS의 구글 플레이스토어, 삼성 갤럭시 스토어, 윈도 OS의 윈도 스토어, 맥 OS를 지원합니다. Mac OS 앱의 경우 다운로드 후 Mac OS의 X Code 툴을 사용하여 빌드합니다. 여기서는 안드로이드 OS에 대한 설명입니다. Android OS의 [다운로드] 버튼을 선택합니다.

(2) 기본값으로 다운로드 할 수도 있지만 나중에 앱 업그레이드를 위한 옵션을 설정하는 것이 좋습니다. [ Options ] 버튼을 누릅니다.

[Android Package Options] 항목이 나타나 스크롤되면서 필요한 정보를 수정합니다. [Fallback behavior]는 TWA(Trusted Web Activities)의 1) 커스텀 탭과 2) 웹 뷰 방식을 선택할 수 있습니다. Android OS를 대상으로 하는 경우 TWA가 바람직하므로 [Custom Tab] 기본값을 선택합니다.

특히 아래쪽에 있는 서명키는 나중에 업그레이드 할 때도 필요하기 때문에 닉네임, 이름, 조직, 국가코드, 패스워드 등의 내용을 입력합니다.

[Done]버튼을 클릭하면 다시 이전 화면으로 이동됩니다. 최종 [Download] 버튼을 클릭합니다. 그러면 지금까지 설정된 내용을 바탕으로 배포파일이 생성되고 다운로드가 됩니다.

(3) 다운로드 된 압축 파일을 풀면 아래와 같은 파일이 들어 있습니다.

위 내용에서 가장 중요한 것은 *.aab,*.apk,assetlinks.json 파일입니다. 이 파일은 바로 구글 플레이에 업로드 할 수 있습니다. 여기서 *.apk는 안드로이드 기기에 복사하여 설치하고 테스트할 때 이용하고 *.aab은 구글 플레이에 업로드합니다. 그리고 assetlinks.json파일은 주소록을 없앨때 사용합니다.

 

 

2) 상단 주소 없애기

TWA 를 실행하면 PWA 의 오너가 아닌, 다른 사람이 도용하는 것을 막기 위해서 URL 주소장이 상부에 표시됩니다. URL 주소록을 삭제하려면 PWA를 호스팅한 본인만 할 수 있습니다. 방법은 다운로드 받은 파일 중 assetlinks.json 파일을 복사하고 루트 폴더의 .well-known 폴더를 새로 추가 또는 삽입하여 웹 호스팅에 업로드 합니다.

(1) VS Code를 이용하여 첫 번째 [nprun build]를 실행하여 dist 배포 폴더를 만듭니다. 그리고 [dist] 폴더에 [.well-known] 폴더를 생성하고 방금 수신한 [assetlinks.json] 파일을 복사하여 넣습니다. npm.dist 등의 노드 패키지 사용법은 책의 [8장.뷰 프레임워크로 PWA 만들기]에서 자세히 소개되니 참고하시기 바랍니다.

윈도우 프로서에서는 끝맺음표로 시작하는 폴더를 생성할 수 없으므로 반드시 VS Code의 프로사 윈도우에서 작업하세요!

(2) VS Code의 터미널 창에서 구글 방화벽을 이용하여 호스팅 서비스에 배포합니다. 파이어베이스 호스팅 사용법 부분은 책의 '08-5.HTTPS에서 파이어베이스 호스팅에 PWA 배포함'에서 자세히 소개되고 있으니 자세한 사용법은 참고하시기 바랍니다.

(3) *.apk 파일을 실행합니다.

안드로이드 폰에 *.apk 파일을 복사하여 실행합니다. 그러면 구글 플레이에서 다운로드 받은 앱이 아니므로 다음과 같이 보안에 주의하라는 대화상자가 나타납니다. 작성한 테스트 앱이므로 [무시하고 설치]를 선택합니다.

그러면 다음과 같이 성공적으로 상단의 주소 바가 삭제된 상태로 수행됩니다.

정상 작동 여부를 확인 후 최종적으로 구글 플레이에 '이메일-Google 로그인 인증.'aab' 파일을 업로드 해주세요.

감사합니다 :)

 

#TWA #PWABuilder #커스텀탭 #TrustedWebActivities #doit프로그레시브웹앱만들기 #PWA #Vue #Vuetify #프로그레시브웹앱 #웹앱 #개발자 #스마트폰 #독서 #개발 #뷰티 #뷰티