AndroidアプリをWebページとシームレスに統合するTWA（Trusted Web Activities）とは？

Android(アンドロイド)

2024.08.13

この記事は約4分で読めます。

TWAは、AndroidアプリとWebコンテンツをシームレスに統合する技術です。これにより、Web技術を使用してアプリを開発し、ネイティブアプリと同等の体験を提供できます。従来のWebViewよりも高速で安定しており、ユーザーエクスペリエンスの向上が期待されます。

TWAを使用するメリット
TWAの設定手順
Android Studioのセットアップ
プロジェクトの作成
TWAライブラリの追加
マニフェストファイルの編集
デプロイメントマニフェストファイルの作成
Google Play Consoleでアプリを公開
まとめ

TWAを使用するメリット

ネイティブアプリのような体験:
TWAを使用すると、ユーザーはアプリをインストールすることなく、Webページを開くだけでネイティブアプリのような体験を得ることができます。これにより、ユーザーはアプリストアからのダウンロードや更新を行う手間を省くことができます。

開発の容易さ:
TWAは、HTML、CSS、JavaScriptなどのWeb技術を使用してアプリを開発できるため、開発の敷居が低くなります。また、既存のWebコンテンツをアプリに統合する際にも容易です。

最新のWeb技術の活用:
TWAは、Chrome Custom Tabsを使用してWebページを表示するため、常に最新のWeb技術を利用できます。これにより、アプリのパフォーマンスやセキュリティを向上させることができます。

概要 | Web on Android | Chrome for Developers

Trusted Web Activity を使用して、プログレッシブウェブアプリを Android アプリにシームレスに統合する方法をご紹介します。

TWAの設定手順

TWAを使用してAndroidアプリを開発する手順は以下の通りです。

Android Studioのセットアップ
プロジェクトの作成
TWAライブラリの追加
マニフェストファイルの編集
デプロイメントマニフェストファイルの作成
Google Play Consoleでアプリを公開

Android Studioのセットアップ

最新バージョンのAndroid Studioをインストールし、開発環境をセットアップします。

Android Studio とアプリツールをダウンロードする - Android デベロッパー | Android Developers

Android Studio は、Android アプリ向けに最適化された統合開発環境（IDE）をアプリ作成者に提供します。Android Studio を今すぐダウンロード

プロジェクトの作成

Android Studioで新しいプロジェクトを作成し、適切な設定を行います。

TWAライブラリの追加

プロジェクトのbuild.gradleファイルにTWAライブラリを追加します。

implementation 'com.google.androidbrowserhelper:androidbrowserhelper:2.2.0'

マニフェストファイルの編集

AndroidManifest.xmlファイルにTWAの設定を追加します。

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

ここで、android:hostにはWebページのドメインを指定します。

デプロイメントマニフェストファイルの作成

Webサイトのルートディレクトリにassetlinks.jsonファイルを作成し、以下の内容を記述します。

[
  {
    "relation": ["delegate_permission/common.handle_all_urls"],
    "target": {
      "namespace": "android_app",
      "package_name": "com.example.app",
      "sha256_cert_fingerprints":
      ["[YOUR_APP_SIGNATURE_HASH"]
    }
  }
]

ここで、package_nameにはアプリのパッケージ名、sha256_cert_fingerprintsにはアプリの署名証明書のSHA-256ハッシュを記述します。