신뢰할 수있는 웹 활동

웹앱의 유효성을 검사하고 여기에서 Android 앱을 만드는 방법

Tom 프로그레시브 웹 앱, 네이티브 앱, 배우기, 넷 및 웹

당신은 날 믿어?

당분간은 앱의 복잡성에 따라 웹 애플리케이션을 적은 노력으로 네이티브 앱으로 변환 할 수 있습니다. 예를 들어 Capacitor.js 또는 Cordova와 같은 프레임 워크는 이러한 기능을 제공하며 오픈 소스 소프트웨어이기도합니다. 웹앱을 네이티브 앱으로 제공하려면 웹 애플리케이션을 로컬로 빌드하고 프레임 워크에이 빌드 출력이있는 위치를 알려주고 기본적으로 앱이 생성 될 때까지 기다려야합니다. 핵심 개념은 웹 사이트가 임베디드 웹보기에서 실행된다는 것입니다. 이제 Google의 "신뢰할 수있는 웹 활동"을 도입하여 상황이 다시 한 번 바뀌려고합니다.

PWA ++

"신뢰할 수있는 웹 활동"(TWA)이란 무엇입니까? 요점은 다음과 같습니다.

  • "신뢰할 수있는 웹 활동"은 Google Play 스토어 및 PWA에서 생성 된 기본 Android 앱의 컨텍스트에서 사용됩니다.
  • "assetlinks"라는 자격 증명을 생성하여 Android 앱용 PWA의 소유권을 확인할 수 있습니다. 여기에서 Google Play가 필요합니다.
  • 이 "assetlinks"파일을 웹 앱의 공개 디렉토리에 업로드하면 Google은 기본 Android 앱이 도착할 때 PWA의 소유권을 확인할 수 있으므로 아무도 만들 수 없습니다.

좋습니다. TWA의 개념에 대한 간략한 개요입니다. 요약하자면 "신뢰"부분은 PWA 소유권 확인과 관련됩니다.

새로운 TWA 하나주세요!

좋아,하지만 실제로 어떻게 작동합니까? 설정은 실제로 매우 간단하며 한 시간 이상 걸리지 않습니다. 방법은 다음과 같습니다.

먼저 PWA가 올바르게 설정되었는지 확인하십시오.

  • manifest.json이 사용 가능하고 검증되었습니다.
  • 아이콘 + 이름이 정확함
  • DevTools에서 이러한 변경 사항을 빠르게 확인할 수 있습니다.

무거운 작업을 모두 처리 할 메인 라이브러리는 CLI를 제공하는 Node.js 패키지 인 "bubblewrap"이며 튜토리얼 전체에서 사용할 것입니다.

먼저 "twa"라는 TWA에 대한 새 디렉터리를 만듭니다. "twa"안에 "android"라는 디렉토리를 하나 더 만들겠습니다. "twa"자체에는 node_modules와 실제 기본 Android 앱인 "android"가 포함됩니다.

이제 새 npm 프로젝트를 시작하려면 "twa"내에 있는지 확인하십시오.

npm init -y

이제 CLI를 dev 종속성으로 추가해 보겠습니다.

npm i -D @bubblewrap/cli

그게 지금 우리에게 필요한 전부입니다. 그러면 "bubblewrap"프로젝트를 초기화하겠습니다. 도메인을 귀하의 것으로 바꾸고“manifest.json”이 어디에 있는지 확인하십시오. 이미 설치된 경우 재사용 할 수있는 Java SDK + Android SDK 위치를 묻는 메시지가 표시됩니다.

npx bubblewrap init --manifest=https://your-pwa.com/manifest.json

계속해서 "bubblewrap"CLI를 사용하여 몇 가지 질문과 답변을 살펴볼 차례입니다. PWA에서 사용 가능한 메타 데이터에 따라 대부분의 필드가 이미 미리 채워집니다.

npx bubblewrap build

이제 PWA가 식별되고 Android 앱이 생성되었으므로 간단한 연기 테스트를 할 차례입니다. 에뮬레이터를 시작하거나 선택한 실제 장치를 사용하십시오.

npx bubblewrap install

모든 것이 제대로 작동하면 웹 앱이 작동하는 기본 Android 앱으로 표시됩니다. 좋아, 가장 어려운 부분이 이미 완료되었습니다!

남은 것은“assetlinks.json”이라는 검증 파일의 생성입니다. Google Play에 App Bundle을 업로드하고 싶다고 가정하고 있으므로 서명이 실제로 어떻게 관리되는지 확인하는 것이 중요합니다.

  • Google Play에서 서명 키를 관리하므로 Google Play Console에서 해당 SHA-256 값을 찾아야합니다.
  • 'bubblewrap'이 이미 하나의 항목이있는 'assetlinks'파일을 만들었을 수 있습니다. 여기에는 다른 SHA-256 해시가 포함되어 있습니다. 걱정하지 마세요. Google Play의 키와 생성 된 키를 모두 사용하겠습니다.

생성 된 "assetlinks"파일이없는 경우, 제가 진행 한 방법은 내 테스트 장치에 "Asset Links Tool"(Google에서 권장, 부록의 링크)을 다운로드하고 생성 된 설치된 서명 된 테스트 앱에서 SHA-256을 읽는 것이 었습니다. "bubblewrap"에 의해 설치됩니다. 그러면이 json을 사용할 수 있습니다. 첫 번째 항목을 복제하고 SHA-256을 Google Play의 항목으로 바꾸면 "assetlinks"파일에 서명 키만 다른 2 개의 항목이 생성됩니다.

거의 완료되었습니다. 이제 기존 PWA의 공용 폴더에 새 디렉터리를 만들고 앱을 한 번만 업로드하면됩니다.

.well-known/assetlinks.json

이제 Google이이를 읽고 소유권을 확인할 수 있습니다.

하나 ... 더 ... 단계 ...

이제 남은 것은 출시 번들을 Google Play에 업로드하고 출시하는 것입니다. 예, 사실 그렇게 간단합니다. Google은 웹에서 가능한 것을 진정으로 추진하며 새로운 것을 시도하는 것을 두려워하지 않습니다. "신뢰할 수있는 웹 활동"은 현재 Android로 제한되어 있지만 웹과 네이티브 간의 격차를 더욱 좁히는 새로운 방법 중 하나입니다.

아, 그리고 그렇습니다. 물론이 웹 앱은 PWA와 TWA입니다. Google Play에서 Android 앱을 확인할 수 있으며 링크는 부록 아래에 있습니다.

- Tom



행위

Feedback

추천 게시물