【실천】Google Play Store에서 PWA 배포 (TWA)

요전날 「GooglePlay 스토어에서 PWA가 전달할 수 있게 되었다!」라는 기사가 화제가 되고 있었습니다.

Google Play 스토어 now open for Progressive Web Apps 😱

실태는 "Chrome72에서 구현된 TWA(Trusted Web Activity)를 사용하여 URL 바 없이 PWA 페이지를 열 수 있는 Android 앱을 개발할 수 있게 되었다"는 것입니다.

검증이 시작되면 실제로 TWA에서 PWA를 GooglPlay 스토어에 공개해 보았으므로 절차를 소개하고 싶습니다.

실제 안드로이드 프로젝트는 GitHub에서도 공개하고 있습니다.
htps : // 기주 b. 이 m / zp로 v / QR-와

환경

AndroidStudio는 ver3.3.1을 사용합니다.

공개하는 PWA는 이쪽의 QR코드 리더입니다.
htps // qr. zp 여. 아 p

개발에서 공개까지의 절차

1. AndroidStudio에서 새로운 프로젝트 만들기

먼저 AndroidStudio에서 새 프로젝트를 만듭니다.
여기서의 포인트는 이하 2개입니다.

기본 Activity 필요 없음

API 레벨은 16 이상을 선택한다 (자신은 21을 선택)

2. TWA 지원 라이브러리 활성화

이 단계 2와 다음 단계 3은 GitHub의 commit 로그도 함께 보면 알기 쉽다고 생각합니다.
htps : // 기주 b. 이 m/zp 여에서 v/QR-와 ぁ/꽁치 t/f9b세cb5f39아 515948c272d00fdc671fc60431b4

프로젝트 레벨 build.gradle의 리포지토리에 JitPack을 추가합니다.

allprojects {
    ...
    repositories {
        ...
        maven { url "https://jitpack.io" }
    }
}

Module 레벨 build.gradle 의 컴파일 옵션으로 Java8 를 유효하게 한다.

android {
    ...
    compileOptions {
        sourceCompatibility JavaVersion.VERSION_1_8
        targetCompatibility JavaVersion.VERSION_1_8
    }
}

모듈 레벨 build.gradle 종속성에 TWA 지원 라이브러리를 추가합니다.

dependencies {
    ...
    implementation 'com.github.GoogleChrome.custom-tabs-client:customtabs:3a71a75c9f'
}

3. 앱측 TWA 설정

문자열 리소스로 Digital Asset Links 정보를 정의합니다.

<resources>
    ...
    <string name="asset_statements">
        [{
            \"relation\": [\"delegate_permission/common.handle_all_urls\"],
            \"target\": {
                \"namespace\": \"web\",
                \"site\": \"https://qr.zpro.app\"}
        }]
    </string>
</resources>

AndroidManifest.xml 에 TWA의 메인 Activity와 Digital Asset Links의 meta 데이터를 추가한다.

<application ... >

    <meta-data
        android:name="asset_statements"
        android:resource="@string/asset_statements" />

    <activity
        android:name="android.support.customtabs.trusted.LauncherActivity">

       <meta-data
           android:name="android.support.customtabs.trusted.DEFAULT_URL"
           android:value="https://qr.zpro.app" />

       <intent-filter>
           <action android:name="android.intent.action.MAIN" />
           <category android:name="android.intent.category.LAUNCHER" />
       </intent-filter>

       <intent-filter>
           <action android:name="android.intent.action.VIEW"/>
           <category android:name="android.intent.category.DEFAULT" />
           <category android:name="android.intent.category.BROWSABLE"/>

           <data
             android:scheme="https"
             android:host="qr.zpro.app"/>
       </intent-filter>
    </activity>
</application>

4. PWA측의 TWA 설정

릴리스 빌드에 사용할 Keystore 파일에서 SHA256 Fingerprint를 가져옵니다.

// 取得コマンド
keytool -list -v -keystore Keystoreファイルパス -alias エイリアス名 -storepass　パスワード -keypass パスワード

Digital Asset Links 선언 생성기에 Android 앱의 패키지 ID와 SHA256 Fingerprint를 입력하고 생성 된 문자열을 assetlinks.json로 저장합니다.

PWA의 도메인 루트에 .well-known 폴더를 만들고 그 안에 assetlinks.json를 넣습니다.

5. 빌드하여 GooglePlay 스토어에 등록

앱 아이콘 등 필요에 따라 변경 후 릴리스 빌드를 만들어 GooglePlay 스토어에 등록합니다.
TWA를 사용한다고 해서 특별한 절차는 특별히 없습니다.

이상이 TWA에서 PWA를 GooglPlay 스토어에 공개하는 순서입니다.

TWA의 거동

실제로 공개한 앱은 여기입니다.
htps : // p ぁ y. 오, ぇ. 이 m / s 취해 / 아 ps /에서 원하는 ls? 아니 d = 아 p. zp 여. qr

앱 시작은 이런 느낌입니다.


PWA의 기동과는 약간 동작이 다릅니다만, 풀 스크린으로 Web 페이지를 표시할 수 있어 브라우저와 localStorage를 공유할 수 있는 것을 확인할 수 있었습니다.

[추기]
현재 게재중인 앱은 TWA의 거동을 PWA에 전해 가는(기동편)에서 개선을 추가 한 것입니다.

요약

현상의 순서나 거동으로부터 보고 「GooglePlay 스토어로 PWA가 전달할 수 있게 되었다!」라고 하는 것은 조금 다를까 생각합니다만, WebView와 ChromeCustomTabs의 이점을 겸비한 새로운 수법으로 Web 사이트의 앱화를 할 수 있게 되었습니다.

공개하는 수고 자체는 WebView 개발과 그다지 변하지 않고, 현재라고 WebView 쪽이 취급하기 쉽다고 느끼고 있습니다만, 로그인이 필요한 Web 서비스등에서는 세션이나 스토리지 공유는 큰 이점이라고 생각하기 때문에, 선택지로서 개미 그렇다고 생각했습니다.