はじめに
個人開発でPWA「ミテルン」をCloudflare Workers上に構築し、TWA（Trusted Web Activity）を使ってAndroidアプリとしてGoogle Play Storeに公開するまでの過程を記録します。
TWAに関する日本語情報は少なく、ハマりどころも含めてすべて書き残しておきます。
ミテルンとは
小規模店舗（カフェ・理髪店・セレクトショップ等）向けの混雑管理PWAです。
- バックエンド: Cloudflare Workers + Hono + D1
- フロントエンド: PWA（Service Worker + Web Push対応）
- 公開URL: https://lp.miterun.app
TWA（Trusted Web Activity）とは
TWAは、ChromeブラウザエンジンをベースにしたWebコンテンツをAndroidアプリとして公開できる仕組みです。
| 比較項目 | WebView | TWA |
|---|---|---|
| URLバー | 非表示 | 認証後は非表示 |
| Cookie/Storage | アプリ固有 | Chromeと共有 |
| Web Push | 非対応 | 対応 |
| Service Worker | 限定的 | フルサポート |
事前準備
必要なもの
- Google Play Consoleアカウント（登録費: $25 USD）
- Bubblewrap CLI
- HTTPSで公開済みのPWA
-
manifest.webmanifestが正しく設定されていること
PWAの要件確認
{
"name": "ミテルン",
"short_name": "ミテルン",
"start_url": "/",
"display": "standalone",
"theme_color": "#4f46e5",
"icons": [
{
"src": "/icons/icon-512.png",
"sizes": "512x512",
"type": "image/png"
}
]
}
Bubblewrap CLIでのビルド
インストール
npm install -g @bubblewrap/cli
プロジェクト初期化
bubblewrap init --manifest https://lp.miterun.app/manifest.webmanifest
対話式で設定を行います:
- Application ID:
dev.workers.sawashin111.autocountercount.twa - Display mode:
standalone - Theme Color:
#4f46e5
AABビルド
bubblewrap build
ビルド成功すると app-release-signed.aab が生成されます。
Digital Asset Linksの設定
これがTWAの肝です。/.well-known/assetlinks.jsonを公開することで、WebサイトとAndroidアプリの関連付けを証明します。
[{
"relation": ["delegate_permission/common.handle_all_urls"],
"target": {
"namespace": "android_app",
"package_name": "dev.workers.sawashin111.autocountercount.twa",
"sha256_cert_fingerprints": ["YOUR_SHA256_FINGERPRINT"]
}
}]
SHA256フィンガープリントの取得:
keytool -list -v -keystore android.ks -alias android
Cloudflare Workersでの配信
app.get('/.well-known/assetlinks.json', (c) => {
return c.json([{
relation: ['delegate_permission/common.handle_all_urls'],
target: {
namespace: 'android_app',
package_name: 'dev.workers.sawashin111.autocountercount.twa',
sha256_cert_fingerprints: [c.env.ASSET_LINKS_FINGERPRINT]
}
}]);
});
Play Storeへの公開
リリース段階
- 内部テスト — Googleアカウントを最大100名追加可能
- クローズドテスト（αテスト） — オプトインURL方式
- オープンテスト（βテスト） — 一般公開前の最終テスト
- 本番公開 — 審査後に公開
審査には通常 数時間〜数日 かかります。
ハマりどころ
1. URLバーが非表示にならない
Digital Asset Linksが正しく設定されていないと、Chrome URLバーが表示されたままになります。
# 確認コマンド
curl https://lp.miterun.app/.well-known/assetlinks.json
2. キーストアの管理
android.ksファイルを紛失すると アプリの更新が永久に不可能 になります。必ずバックアップを。
3. minSdkVersion
TWAはAndroid 6.0（API level 21）以上が必要です。
4. Web Pushが動かない
TWAではChromeとCookieを共有するため、Web PushのVAPIDキーをPWAと同一にする必要があります。
まとめ
| ステップ | 所要時間（目安） |
|---|---|
| Bubblewrapセットアップ | 30分 |
| assetlinks.json設定 | 1時間 |
| Play Console設定 | 1〜2時間 |
| 審査通過 | 数時間〜数日 |
TWAは「PWAのAndroidアプリ化」として非常に優れた選択肢です。WebViewと異なり、Service Worker・Web Push・Cookieが完全に動作するため、ネイティブアプリに近い体験を提供できます。
現在βテスター先着50名を募集中です！テスターへの参加はランディングページからメールでお申し込みください。
📲 詳細・お申し込み: https://lp.miterun.app