プログラミング

TWA と PWA に触れてみる: TWA を使った Android アプリケーションを作成する

3/24 の早朝はまだ 3/23 だよね!なので実質 3/23 に投稿された記事です。

最近いろいろと話題になる PWA と、それと一緒に話題になる TWA に触れてみようと言う感じの内容をメモ書き程度に残しておきます。

冒頭になにかいい感じの文章を書こうと思いましたが(例えばシャニマスで話題になったガワネイティブアプリ等から TWA に話を持っていく等)、特にいい感じの文章が思いつかなかったのでそのまま淡々と書いていきます。また一度に全部書いても後々ネタが尽きて困りそうだなぁと思ったため、2~3回ぐらいに別けます。

最初の内容は TWA を使った Android アプリケーションを作成する です。

0. TWA ってなんぞ

読んでください: Trusted Web Activity

1. プロジェクトを作成する

これがなければ何も始まりません。
IntelliJ IDEA を起動し、 Android のプロジェクトを作成していきます。

img01
img02
img03

Target API Level を 19 以上にするとのことですが、正直個人的には 19 は切り捨てていいのではと捉えているので、 API 21 でやっています。
Activity の追加はせずプロジェクトを作成します。

2. build.gradle を編集

Project と Module それぞれを編集します。

  • build.gradle(Project): allprojects の Maven リポジトリに Jitpack を追加
allprojects {
    repositories {
        google()
        jcenter()
        maven {
            url "https://jitpack.io"
        }
    }
}
  • build.gradle(Module): compileOptions の追記と dependencies 内に追記

Java 8 JDK を利用するように、 compileOptions を android {...} 内に追記します。

android {
    defaultConfig {
        ...(省略)
    }
    buildTypes {
        ...
    }
    compileOptions {
        sourceCompatibility JavaVersion.VERSION_1_8
        targetCompatibility JavaVersion.VERSION_1_8
    }
}

TWA サポートライブラリを dependencies に追加します。

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

3. Android Manifest を編集

編集の前に IDEA の右下の方に Import Changes 等のダイアログが出ていれば押してビルド回しておくと補完等が効いて入力が楽になると思います。
app/manifests/AndroidManifest.xml を編集していきます。
全体としてはこのような内容になります:

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
          package="com.example.examplepwa">
    <application android:allowBackup="true"
                 android:label="@string/app_name"
                 android:icon="@mipmap/ic_launcher"
                 android:roundIcon="@mipmap/ic_launcher_round"
                 android:supportsRtl="true"
                 android:theme="@style/AppTheme">

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

            <meta-data android:name="android.support.customtabs.trusted.DEFAULT_URL"
                       android:value="https://example.com" />

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

        </activity>
    </application>
</manifest>

頭の <application ...> 辺りまではデフォルトで記述されているので、その後ろに追記していきます。

TWA の LauncherActivity を追加します。

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

TWA のデフォルトの URL を指定します。 example.com は適宜読み替えてください。

...
            <meta-data android:name="android.support.customtabs.trusted.DEFAULT_URL"
                       android:value="https://example.com" />
...

デフォルトで開かれる Activity に指定します。

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

4. ビルド & 実行

この段階でビルドして実行をすることができます。 Web サイト側に PWA の設定を行っていない場合、表示が ChromeCustomTabs と同じような表示になりますが大丈夫です。(後で設定していきます。)

img04

5. App Links に対応させる

単に TWA を利用するだけなら必要はありませんが、ないとわざわざアプリにした意味は…?みたいになりかねないので設定します。
App Links は特定の Web サービスに対応するアプリケーションがインストールされている場合、そのサービスの URL にアクセスした場合対応するアプリケーションを開く機能です。

5.1. strings.xml に asset_statements の値を追加

res/values/strings.xml を編集していきます。
おそらく app_name しか存在していないかと思いますのでその下に追記していきます。この値は後で Android Manifest に指定しますので、補完等が効いて便利なので先に設定しておきます。
全体としてはこのような内容になります:

<resources>
    <string name="app_name">プロジェクト作成時指定したアプリ名</string>
    <string name="asset_statements">
        [{
        \"relation\": [\"delegate_permission/common.handle_all_urls\"],
        \"target\": {
            \"namespace\": \"web\",
            \"site\": \"https://example.com\"}
        }]
    </string>
</resources>

example.com は適宜読み替えてください。

5.2. Android Manifest の編集

<application ...><activity ...> の間に asset_statements の記述をします。

    <application android:allowBackup="true"
                 android:label="@string/app_name"
                 ...
                 android:theme="@style/AppTheme">

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

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

また intent-filter<activity ...> 内に追加し、 URL を開いたときに関連付けられるアプリケーションに指定します。

        <activity android:name="android.support.customtabs.trusted.LauncherActivity">
            ...
            </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="example.com" />
            </intent-filter>

        </activity>

example.com は適宜読み替えてください。

6. Android アプリのカスタマイズ

必要に応じてアプリアイコンやアプリ名を変更します。
アプリ側は完了です。次回は Web サイト側に PWA の設定をしていきます。

コメントを残す

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

Theme by Anders Norén