TWAの挙動をPWAに寄せていく(起動編)

先日、TWAサポートライブラリを使用してPWAをAndroidアプリ化してPlayストアから配信する方法を紹介しました。

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

PWAをPlayストアから配信するという目的は達成しましたが、起動時の見栄えがあまり良くないなぁ・・・という状態だったので、少しのコード追加で起動時挙動をPWAに寄せる方法を紹介したいと思います。


PWAとTWAの起動時挙動はどう違うか

PWAとTWAの起動時挙動を比較してみます。


PWAの挙動

pwa.gif


TWAの挙動

before.gif


差分


  • 起動時のスプラッシュページがない

  • 起動時の画面でActionBarが表示されている(QRとだけ表示されているヘッダー)

  • Webページがフェードインじゃなくスライドインで表示される

  • Webページ表示中のステータスバーが白くて浮いている


PWAに寄せていく

GitHubのcommitログと共に変更箇所を説明します。


ActionBarを消す

アプリのテーマをDarkActionBarからNoActionBarに変更することで、ActivityのActionBarを消しています。

https://github.com/zprodev/QR-TWA/commit/6d8732fb94840b89792f3b33836fc3f17cad4601


TWAのステータスバーにテーマカラーを反映

元はTWAサポートライブラリで提供されているLauncherActivityをそのまま使用していましたが、LauncherActivityを継承した自前のActivityを使用するよう変更し、ChromeCustomTabのIntentを生成しているメソッドをオーバーライドします。

https://github.com/zprodev/QR-TWA/commit/fb93ee7b87827627f03e7258904333003f3cec7b

その上で、リソースとして定義済みのcolorPrimaryDarkをsetToolbarColorでTWAに設定しています。

https://github.com/zprodev/QR-TWA/commit/3944385ce235c405788a0879ef23b13e23dfce3c


TWA起動時のトランジションを変更

ステータスバーの色変更と同様に起動時アニメーションを設定することができるので、Alpha変更アニメーションを定義してsetStartAnimationsでTWAに設定しています。

https://github.com/zprodev/QR-TWA/commit/b0ba980f52a8a028ed23ecc8f814662cd0404579


結果

変更後の起動時挙動は以下ようになります

after.gif

スプラッシュページに関しては若干面倒なので省きましたが、デフォルトの状態よりかなりPWAに近づき違和感がなくなったかなと思います。

実機で見てみたい方は↓から試してみてください :thumbsup:

PWA: https://qr.zpro.app

アプリ: https://play.google.com/store/apps/details?id=app.zpro.qr