Google Play 스토어에 진보적 인 웹 앱을 가져 오는 방법

PWA (Progressive Web Apps)는 한동안 우리와 함께있었습니다. 그러나 고객에게 설명 할 때마다 같은 질문이 나타납니다.“사용자가 앱 스토어를 사용하여 앱을 설치할 수 있습니까?” 그 대답은 전통적으로 아니오 였지만 이것은 TWA (Trusted Web Activity)라는 새로운 기능을 배송 한 Chrome 72로 변경되었습니다.

신뢰할 수있는 웹 활동은 사용자 정의 탭을 기반으로 한 프로토콜을 사용하여 PWA와 같은 웹 앱 컨텐츠를 YourAndroid 앱과 통합하는 새로운 방법입니다.

이 기사에서는 Netguru의 기존 PWA (Wordguru)를 사용하고 응용 프로그램을 사용할 수 있고 Google Play App Store에서 바로 설치할 수 있도록해야 할 일을 단계별로 설명합니다.

우리가 여기서 다루는 것들 중 일부는 모든 Android 개발자에게 어리석은 소리를 낼 수 있지만,이 기사는 프론트 엔드 개발자, 특히 Android Studio를 사용한 적이 없거나 Android 애플리케이션을 만든 사람의 관점에서 작성되었습니다. 또한 우리가 여기서 다루고있는 많은 것들이 Chrome 72로 제한되어 있기 때문에 여전히 매우 실험적입니다.

1 단계 : 신뢰할 수있는 웹 활동을 설정합니다

TWA를 설정하면 Java 코드를 작성할 필요는 없지만 Android Studio가 필요합니다. 이전에 iOS 또는 Mac 소프트웨어를 개발 한 경우 Xcode와 비슷합니다. 이는 Android 개발을 간소화하도록 설계된 훌륭한 개발 환경을 제공한다는 점에서 Xcode와 매우 유사합니다. 그러니, 그것을 잡고 여기서 나를 만나십시오.

Android Studio에서 새로운 TWA 프로젝트를 만듭니다

안드로이드 스튜디오를 얻었습니까? 글쎄, 나는 실제로 당신을 듣거나 볼 수 없습니다. 그래서 나는 당신이했다고 가정 할 것입니다. 계속해서 깨고 "새로운 Android 스튜디오 프로젝트 시작"을 클릭하십시오. 거기에서“활동 추가”옵션을 선택하여 프로젝트를 구성 할 수 있습니다.

구성은 상당히 간단하지만 항상 무엇인지 아는 것이 좋습니다.

• 응용 프로그램의 이름 을 지정하십시오 (그러나 나는 당신이 그것을 알고 있다고 생각합니다).
• 패키지 이름 : 플레이 스토어의 Android 응용 프로그램 식별자. 독특해야하므로 PWA의 URL을 역 순서 (예 : com.netguru.wordguru)로 사용하는 것이 좋습니다.
• 위치 저장 위치 : 프로젝트가 현지에서 존재하는 곳.
• 언어 : 이를 통해 특정 코드 언어를 선택할 수 있지만 앱이 이미 작성되었으므로 작성할 필요는 없습니다. 우리는 이것을 기본 선택 인 Java에 남겨 둘 수 있습니다.
• 최소 API 레벨 : 이것은 우리와 함께 작업하고있는 Android API의 버전이며 지원 라이브러리에서 요구됩니다 (다음은 다음에 다루겠습니다). API 19를 사용합시다.

이 옵션 아래에 확인란이 거의 없습니다. 그것들은 우리와 관련이 없으므로 모두 확인하지 않은 채로 남겨두고 끝내십시오.

TWA 지원 라이브러리를 추가하십시오

TWA에 지원 라이브러리가 필요합니다. 좋은 소식은 해당 요구 사항을 채우기 위해 두 개의 파일 만 수정하면 동일한 프로젝트 디렉토리에 라이브 인 Gradle 스크립트입니다. 둘 다 Build.gradle이지만 괄호 안의 설명을 보면 구별 할 수 있습니다.

Jitpack이라는 GIT 패키지 관리자가 Android 앱을 위해 특별히 제작되었습니다. 매우 강력하지만 결론은 웹 앱을 게시하는 것입니다. 유료 서비스이지만 Google Play 스토어에 무언가를 처음 가져 오면 비용이 가치가 있다고 말하고 싶습니다.

편집자 노트 : Jitpack의 스폰서 플러그가 아닙니다. 이 게시물은 Android 앱에 익숙하지 않거나 Google Play에 앱을 제출하고 매장에 직접 연결되는 Android 앱 리포를 관리하는 데 마찰이 적기 때문에 전화 할 가치가 있습니다. 즉, 그것은 전적으로 요구 사항이 아닙니다.

Jitpack에 있으면 프로젝트를 연결합시다. 그 build.gradle (project : wordguru) 파일을 열어 놓고 방금 살펴보고 앱 저장소를 위해 jitpack을 보라고 지시합니다.

 AllProjects {
  리포지토리 {
    ...
    Maven {url 'https://jitpack.io'}
    ...
  }
}

자, 이제 다른 build.gradle 파일을 열어 드리겠습니다. 여기서는 프로젝트에 필요한 종속성을 추가 할 수 있으며 실제로는 다음과 같습니다.

 // build.gradle (모듈 : 앱)

종속성 {
  ...
  구현 'com.github.Googlechrome : Custom-TABS-CLIENT : A0F7418972'
  ...
}

TWA 라이브러리는 Java 8 기능을 사용하므로 Java 8을 활성화해야합니다. 그렇게하려면 동일한 파일에 compileOptions를 추가해야합니다.

 // build.gradle (모듈 : 앱)

안드로이드 {
  ...
  CompileOptions {
    sourcececeatibility javaversion.version_1_8
    Target Compatibility javaversion.version_1_8
  }
  ...
}

다음 섹션에서 다룰 수있는 Manifestplypholders라는 변수도 있습니다. 지금은 앱이 호스팅되는 위치, 기본 URL 및 앱 이름을 정의하기 위해 다음을 추가하겠습니다.

 // build.gradle (모듈 : 앱)

안드로이드 {
  ...
  DefaultConfig {
    ...
    선언문 소유자 = [
      호스트 이름 : "wordguru.netguru.com",
      defaulturl : "https://wordguru.netguru.com",
      LauncherName : "Wordguru"
    ]]
    ...
  }
  ...
}

Android 앱 매니페스트에 앱 세부 정보를 제공하십시오

모든 Android 앱에는 Android 앱 Manifest (Androidmanifest.xml)가있어 앱에 대한 필수 세부 사항을 제공하는 운영 체제, 패키지 정보, 장치 호환성 및 Google Play가 앱의 요구 사항을 표시하는 데 도움이되는 기타 많은 것들을 제공합니다.

우리가 여기서 정말로 관심이있는 것은 활동입니다 (). 이것이 사용자 인터페이스를 구현하고 "신뢰할 수있는 웹 활동"의 "활동"에 필요합니다.

재미있게도, 우리는 Android Studio에서 프로젝트를 설정할 때 "활동 추가 No Activity"옵션을 선택했으며, 매니페스트가 비어 있고 응용 프로그램 태그 만 포함되어 있기 때문입니다.

Manfifest 파일을 열어서 시작합시다. 기존 패키지 이름을 자체 애플리케이션 ID로 바꾸면 이전 섹션에서 정의한 Manifestplaceholders 변수의 값으로 레이블을 바꿀 것입니다.

그런 다음 태그 내부에 태그를 추가하여 실제로 TWA 활동을 추가 할 것입니다.

<!-- manifests/AndroidManifest.xml -->

 // 하이라이트

  

     // 하이라이트

       // 하이라이트

      <!-- This intent-filter adds the TWA to the Android Launcher -->
      
        
        
      의도 필터>

      <!--
        This intent-filter allows the TWA to handle Intents to open
        our hostName
        -->
      
        
        
        
         // 하이라이트
      의도 필터>
    활동>
  응용 프로그램>

그리고 내 친구는 1 단계입니다. 2 단계로 넘어 가자.

2 단계 : 웹 사이트와 앱 간의 관계 확인

TWA는 Android 응용 프로그램과 PWA 간의 연결이 필요합니다. 이를 위해 디지털 자산 링크를 사용합니다.

연결은 양쪽 끝에 설정되어 있어야합니다. 여기서 TWA는 응용 프로그램이고 PWA는 웹 사이트입니다.

이 연결을 설정하려면 선언문 보유자를 다시 수정해야합니다. 이번에는 PWA에 대한 정보를 유지하는 AssetStatements라는 추가 요소를 추가해야합니다.

 // build.gradle (모듈 : 앱)

안드로이드 {
  ...
  DefaultConfig {
    ...
    선언문 소유자 = [
      ...
      AssetStatements : '[{ "관계": [ "delegate_permission/common.handle_all_urls",', ',', '  
        ' "대상": { "네임 스페이스": "웹", "사이트": "https://wordguru.netguru.com"}}]' '
      ...
    ]]
    ...
  }
  ...
}

이제 응용 프로그램 태그에 새로운 메타 데이터 태그를 추가해야합니다. 이를 통해 Android 응용 프로그램은 Manifestplaceholders에 지정된 응용 프로그램과 연결을 설정하고자합니다.

<!-- manifests/AndroidManifest.xml -->



  
    ...
      
    ...
  응용 프로그램>

그게 다야! 우리는 방금 웹 사이트 관계에 대한 응용 프로그램을 설정했습니다. 이제 웹 사이트를 애플리케이션으로 전환 할 수 있습니다.

반대 방향으로 연결을 설정하려면 앱의 /.well-known/assetlinks.json 경로에서 사용할 수있는 .json 파일을 작성해야합니다. 파일은 Android Studio에 내장 된 발전기를 사용하여 만들 수 있습니다. 안드로이드 스튜디오가 안드로이드 개발을 간소화하는 데 도움이된다고 말했습니다!

파일을 생성하려면 세 가지 값이 필요합니다.

• 호스팅 사이트 도메인 : 이것은 PWA URL입니다 (예 : https://wordguru.netguru.com/).
• 앱 패키지 이름 : 이것은 TWA 패키지 이름 (예 : com.netguru.wordguru)입니다.
• 앱 패키지 지문 (SHA256) : Google Play 스토어 Keystore를 기반으로 생성되는 고유 한 암호화 해시입니다.

우리는 이미 첫 번째와 두 번째 가치가 있습니다. Android Studio를 사용하여 마지막을 얻을 수 있습니다.

먼저 서명 된 APK를 생성해야합니다. 안드로이드 스튜디오에서 : 빌드 → 서명 된 번들 또는 APK → APK를 생성합니다 .

다음으로 기존 키 스토어가 이미있는 경우 기존 키 스토어를 사용하십시오. 필요한 경우 먼저“새…

그런 다음 양식을 작성합시다. 신청서에 서명 할 자격 증명을 기억하고 응용 프로그램의 소유권을 확인하십시오.

이렇게하면 앱 패키지 지문 (SHA256)을 생성하는 데 필요한 키 스토어 파일이 생성됩니다. 이 파일은 귀하가 응용 프로그램의 소유자라는 증거로 작동하기 때문에 매우 중요합니다 . 이 파일이 손실되면 상점의 응용 프로그램에 대한 추가 업데이트를 수행 할 수 없습니다.

다음으로, 번들의 유형을 선택합시다. 이 경우 프로덕션 번들을 제공하기 때문에 "릴리스"를 선택하고 있습니다. 또한 서명 버전을 확인해야합니다.

이것은 나중에 Google Play 스토어에서 릴리스를 만드는 데 사용될 APK를 생성합니다. Keystore를 만든 후에는 필요한 앱 패키지 지문 (SHA256)을 생성하는 데 사용할 수 있습니다.

Android Studio로 돌아가서 도구 → 앱 링크 어시스턴트 로 이동합시다. 이렇게하면 응용 프로그램과 웹 사이트 간의 관계를 만드는 데 필요한 단계를 보여주는 사이드 바가 열립니다. 우리는 3 단계,“웹 사이트 협회 선언”으로 이동하여 필요한 데이터 : 사이트 도메인 및 응용 프로그램 ID를 작성하려고합니다. 그런 다음 이전 단계에서 생성 된 KeyStore 파일을 선택하십시오.

양식을 작성한 후 "AssetLinks.json 파일을 생성하는"Digital Asset Links 파일 생성 "을 누릅니다. 우리가 그것을 열면, 그것은 다음과 같이 보일 것입니다.

 [{
  "관계": [ "delegate_permission/common.handle_all_urls"],
  "대상": {
    "네임 스페이스": "Android_app",
    "package_name": "com.netguru.wordguru",
    "SHA256_CERT_FINGERPRINTS": [ "8A : F4 : .... : 29:28"]
  }
}]

이 파일은 앱의 /.well-known/assetlinks.json 경로에서 사용할 수있는 파일입니다. 나는 너무 프로젝트 별로이 기사의 범위를 벗어나기 때문에 해당 경로에서 사용할 수있는 방법을 설명하지 않을 것입니다.

"링크 및 확인"버튼을 클릭하여 관계를 테스트 할 수 있습니다. 모든 것이 잘되면“성공!”에 대한 확인을받습니다.

예! 우리는 Android 애플리케이션과 PWA 사이에 양방향 관계를 구축했습니다. 여기에서 모두 내리막 길이이므로 집으로 운전합시다.

3 단계 : 필요한 자산을 얻습니다

Google Play에는 앱이 매장에 잘 표시되도록 몇 가지 자산이 필요합니다. 구체적으로, 우리에게 필요한 것은 다음과 같습니다.

• 앱 아이콘 : 48 × 48, 72 × 72, 96 × 96, 144 × 144, 192 × 192를 포함한 다양한 크기가 필요합니다. 또는 적응 형 아이콘을 사용할 수 있습니다.
• 고해상도 아이콘 : 이것은 매장 전체에 사용되는 512 × 512 PNG 이미지입니다.
• 기능 그래픽 : 이것은 Google Play가 앱 세부 사항보기에서 사용하는 1024 × 500 JPG 또는 24 비트 PNG (알파 없음) 배너입니다.
• 스크린 샷 : Google Play는이를 사용하여 사용자가 다운로드하기 전에 확인할 수있는 앱의 다양한보기를 보여줍니다.

이 모든 것을 갖추면 Google Play 스토어 개발자 콘솔로 진행하여 응용 프로그램을 게시 할 수 있습니다!

4 단계 : Google Play에 게시하십시오!

마지막 단계로 가서 마지막으로 앱을 상점으로 밀어 봅시다.

이전에 생성 한 APK (Androidstudioprojects 디렉토리에 위치)를 사용하여 응용 프로그램을 게시하려면 Google Play 콘솔로 이동해야합니다. 마법사가 매우 간단하게 만들기 때문에 상점에 응용 프로그램을 게시하는 과정을 설명하지 않으므로 프로세스 전반에 걸쳐 단계별 지침이 제공됩니다.

신청서를 검토하고 승인하는 데 몇 시간이 걸릴 수 있지만, 그렇다면 마침내 상점에 나타납니다.

APK를 찾을 수없는 경우 APK를 빌드로 이동하여 새 제품을 만들 수 있습니다. → 서명 된 번들 / APK → 빌드 APK , 기존 KeyStore 파일을 전달하고 KeyStore를 생성 할 때 사용한 별명 및 비밀번호를 채우십시오. APK가 생성되면 통지가 나타나야하며 "찾기"링크를 클릭하여 파일로 이동할 수 있습니다.

축하합니다. 앱이 Google Play에 있습니다!

그게 다야! 방금 PWA를 Google Play 스토어로 밀었습니다. 이 과정은 우리가 원하는만큼 직관적이지는 않지만 여전히 약간의 노력으로 확실히 할 수 있고 믿습니다. 앱이 야생에 표시되는 것을 볼 때 마지막에 훌륭한 채우기를 제공합니다.

이 기능은 여전히 ​​초기 단계 임을 지적 할 가치가 있으며 한동안 실험적 이라고 생각합니다. Chrome 72 이상에서만 작동하기 때문에 현재 응용 프로그램의 프로덕션 릴리스 릴리스를 사용하는 것이 좋습니다 . 그 이전 버전은 앱을 설치할 수 있지만 앱 자체가 즉시 충돌하여 최상의 사용자 경험이 아닙니다.

또한 Custom-Tabs-Client의 공식 릴리스는 아직 TWA를 지원하지 않습니다. 왜 우리가 공식 도서관 릴리스 대신 Raw Github 링크를 사용했는지 궁금하다면 그 이유입니다.

위 내용은 Google Play 스토어에 진보적 인 웹 앱을 가져 오는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!