TWA의 거동을 PWA에 전해 가는(기동편)

요 전날 TWA 지원 라이브러리를 사용하여 PWA를 Android 앱으로 만들고 Play 스토어에서 전송하는 방법을 소개했습니다.

【실천】Google Play Store에서 PWA 배포 (TWA)

PWA를 Play 스토어로부터 전달하는 목적은 달성했습니다만, 기동시의 보기가 그다지 좋지 않다・・・라고 하는 상태였으므로, 약간의 코드 추가로 기동시 거동을 PWA에 전하는 방법을 소개하고 싶다고 생각합니다.

PWA와 TWA의 기동시 거동은 어떻게 다른가?

PWA와 TWA의 기동시 거동을 비교해 보겠습니다.

PWA 거동

TWA의 거동

차이

시작시 스플래시 페이지 없음

시작시 화면에 ActionBar가 표시됩니다 (QR로만 표시되는 헤더)

웹 페이지가 페이드 인 대신 슬라이드 인으로 표시됨

웹 페이지가 표시되는 상태 표시 줄이 흰색으로 떠 있습니다

PWA에 가기

GitHub 커밋 로그와 함께 변경 사항을 설명합니다.

ActionBar 지우기

앱 테마를 DarkActionBar에서 NoActionBar로 변경하여 Activity의 ActionBar를 지웁니다.

TWA의 상태 표시줄에 테마 색상을 반영

원래는 TWA 지원 라이브러리에서 제공하는 LauncherActivity를 그대로 사용했지만 LauncherActivity를 상속한 자체 Activity를 사용하도록 변경하고 ChromeCustomTab의 Intent를 생성하는 메서드를 재정의합니다.
htps : // 기주 b. 이 m/zp로에서 v/QR-와 ぁ/꽁치 t/fb93네 7b87827627f03에7258904333003f3세c7b

그런 다음 리소스로 정의됨의 colorPrimaryDark를 setToolbarColor에서 TWA로 설정합니다.
https://魏Tub. 작은 m/zp로에서 v/QRー와 ぁ/코미 t/3944385 키 235C405788 아 0879 그림 f23b13 그림 23df 세 3c

TWA 시작시 전환 변경

상태바의 색 변경과 마찬가지로 시작시 애니메이션을 설정할 수 있으므로 Alpha 변경 애니메이션을 정의하고 setStartAnimations에서 TWA로 설정하고 있습니다.
htps : // 기주 b. 이 m/zp로 v/QR-와 ぁ/꽁치 t/b0바 980f52아8아

결과

변경 후의 기동시 거동은 다음과 같습니다.



스플래시 페이지에 관해서는 약간 귀찮기 때문에 생략했습니다만, 디폴트의 상태보다 꽤 PWA에 접근해 위화감이 없어졌을까라고 생각합니다.

실제 기계로보고 싶은 분은 ↓에서 시도하십시오
PWA: htps // qr. zp 여. 아 p
앱: htps : // p ぁ y. 오, ぇ. 이 m / s 취해 / 아 ps /에서 원하는 ls? 아니 d = 아 p. zp 여. qr