Help us understand the problem. What is going on with this article?

【実践】Google Play Store でPWA配信 (TWA)

More than 1 year has passed since last update.

先日「GooglePlayストアでPWAが配信できるようになった!」という記事が話題になっていました。

Google Play Store now open for Progressive Web Apps 😱

実態は「Chrome72で実装されたTWA (Trusted Web Activity) を使用することで、URLバー無しでPWAページを開かせるAndroidアプリを開発できるようになった」という事です。

検証がてら実際にTWAでPWAをGooglPlayストアに公開してみたので手順を紹介したいと思います。

実際のAndroidプロジェクトはGitHubでも公開しています。
https://github.com/zprodev/QR-TWA

環境

AndroidStudioはver3.3.1を使用します。

公開するPWAはこちらのQRコードリーダーです。
https://qr.zpro.app
pwa.gif

開発から公開までの手順

1. AndroidStudioで新規プロジェクト作成

まずAndroidStudioで新規プロジェクトを作成します。
ここでのポイントは以下2つです。

  • デフォルトActivityは不要
  • APIレベルは16以上を選択する(自分は21を選択)

2. TWAサポートライブラリを有効にする

この手順2と次の手順3はGitHubのcommitログも合わせて見てもらえば分かりやすいかなと思います。
https://github.com/zprodev/QR-TWA/commit/f9bcecb5f39a515948c272d00fdc671fc60431b4

Projectレベル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
    }
}

Moduleレベルbuild.gradleの依存関係にTWAサポートライブラリを追加する。

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

3. アプリ側のTWA設定

stringリソースとして 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の挙動

実際に公開したアプリはこちらです。
https://play.google.com/store/apps/details?id=app.zpro.qr

アプリの起動はこんな感じです。
twa.gif

PWAの起動とは若干動作が異なりますが、フルスクリーンでWebページを表示でき、ブラウザとlocalStorageを共有できている事が確認できました。

[追記]
現在配信中アプリは TWAの挙動をPWAに寄せていく(起動編) で改善を加えたものになっています。

まとめ

現状の手順や挙動から見て「GooglePlayストアでPWAが配信できるようになった!」というのはちょっと違うかなと思いますが、WebViewとChromeCustomTabsの利点を併せ持つ新たな手法でWebサイトのアプリ化を行えるようになりました。

公開する手間自体はWebView開発とさほど変わらないし、現状だとWebViewの方が扱いやすいと感じていますが、ログインが必要なWebサービスなどではセッションやストレージ共有は大きな利点だと思うので、選択肢としてアリだなと思いました。

drecom-inc
Drecom with entertainment として発明を産み続け、人々の期待を超えるサービスを提供することを目的とした会社です。
https://www.drecom.co.jp/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした