PWAサイトをAndroidアプリ化した話（TWAでGoogle Play配布まで）
このサイトを、Androidアプリとしても配布できるようにしました。今回は、PWA（Progressive Web App）として作っていたサイトを、TWA（Trusted Web Activity）という仕組みでAndroidアプリ化した手順を、実際につまずいた点も含めて書いていきます。 ■ そもそもTWAとは TWAは、既存のWebサイトを、ほぼコードを書かずにAndroidアプリとして包める、Google公式の仕組みです。アプリ内でChromeのエンジンをそのまま使い、通常のブラウザのようなアドレスバーを表示せずにサイトを表示できます。ネイティブアプリを1から書く必要がなく、今あるDjangoサイトの資産をそのまま活かせるのが最大の利点です。 前提として、TWA化する前にサイト自体をPWA化しておく必要があります。具体的には、アプリ名やアイコンを定義する「manifest.json」というファイルと、オフライン対応やプッシュ通知を担う「Service Worker」というJavaScriptファイルの2つを用意しました。 ■ Bubblewrapでのプロジェクト生成 TWA化には、Googleが提供する「Bubblewrap」というコマンドラインツールを使いました。Node.js製のツールで、事前にNode.jsとnpmが入っている環境なら、次のコマンドでインストールできます。 npm install -g @bubblewrap/cli 初期化コマンド（bubblewrap init）を実行すると、対話形式で、サイトのmanifest.jsonを読み込みながら、アプリ名・パッケージ名・テーマカラー・アイコン画像などを順番に質問されます。ここで注意したいのが、JDKとAndroid SDKのダウンロードです。まだ入っていない場合、Bubblewrap自身が自動でダウンロード・インストールしてくれますが、あわせて1GB近い容量とそれなりの時間がかかります。 ■ 署名鍵の扱いには要注意 初期化の最後に、アプリの署名に使う鍵（キーストア）を新規作成する場面がありました。ここで設定するパスワードと鍵ファイルは、今後そのアプリを更新するたびにずっと使い続ける、非常に重要なものです。紛失すると、二度と同じアプリとして更新できなくなり、最悪の場合は新しいアプリとして登録し直すしかなくなります。生成直後に、必ず安全な場所へバックアップしておくことを強くおすすめします。 初期化が終わったら、以下のコマンドでビルドします。 bubblewrap build これで、テスト用のAPKファイルと、Google Play提出用のAABファイルの両方が生成されます。 ■ サイトとアプリの信頼関係を証明する TWAでアドレスバーを完全に非表示にするには、「このアプリとこのサイトは同じ運営者が管理している」ことを証明する必要があります。これには「Digital Asset Links」という仕組みを使います。 bubblewrap fingerprint generateAssetLinks というコマンドで、署名鍵から自動的に証明用のJSONファイルが作られます。これを、サイトの「/.well-known/assetlinks.json」という決まった場所に設置する必要がありました。Djangoでは、robots.txtやads.txtと同じ要領で、TemplateViewを使って配信するようにしています。 最初、このJSONファイルの中身が空の配列になってしまう不具合に遭遇しました。原因は、鍵のフィンガープリント（証明書の指紋のようなもの）が、プロジェクトの設定ファイルにまだ登録されていなかったためでした。 keytool -list -v -keystore android.keystore -alias android というコマンドで鍵からフィンガープリントを取得し、 bubblewrap fingerprint add [取得した値] で明示的に登録し直すことで解決しました。 ■ 実機での動作確認 生成したAPKファイルを実際のAndroid端末にインストールしてみると、無事にアドレスバーのない、通常のアプリと同じ見た目で起動できました。Google Play以外からインストールする形になるため、初回だけ「提供元不明のアプリ」という警告が出ますが、設定から許可すればすぐにインストールできます。 ■ 今後について まずはこのAPKファイルを、SNSのフォロワー向けにβ版として直接配布する形にしました。Google Playへの正式リリースには開発者登録（登録料が必要）と審査が必要になるため、身内での反応を見てから、落ち着いて進めていく予定です。 なお、iPhone（iOS）には、AndroidのAPKのような形の自由な野良配布の仕組みが存在しません。iOSでは、Safariの「ホーム画面に追加」機能を使ったPWAとしての利用を案内する形に留めています。 今回、Webサイトとネイティブアプリの境界にある技術に触れてみて、Webの資産をそのままモバイルアプリの入り口として活かせる仕組みの便利さを実感しました。