Cordova로 만드는 안드로이드 앱에서 스플래시 화면 구현

Cordova를 이용하여 만들고 있는 안드로이드 앱의 초기 로딩시간이 5초 정도다. 5초 동안 검은 화면으로 나오면 사용자 입장에서는 혼동이 된다. 그래서 초기 화면인 스플래시 화면이 필요하게 되었다. 이렇게 시작된 일이 다양한 문제 때문에 하루종일 걸렸다.

스플래시 화면 띄우기

Cordova 공식 페이지의 이곳에 스플래시 화면 만드는 방법이 나와 있다. 그러나 빠진 내용이 있어서 몇 시간 삽질. 빠진 내용은 이것이다.

<preference name="SplashScreen" value="screen"/>

즉 config.xml 파일에 추가할 부분은 위 문장을 포함하여 다음과 같다.

<platform name="android">
    <splash src="res/splash-land-hdpi.png" density="land-hdpi"/>
    <splash src="res/splash-land-ldpi.png" density="land-ldpi"/>
    <splash src="res/splash-land-mdpi.png" density="land-mdpi"/>
    <splash src="res/splash-land-xhdpi.png" density="land-xhdpi"/>

    <splash src="res/splash-port-hdpi.png" density="port-hdpi"/>
    <splash src="res/splash-port-ldpi.png" density="port-ldpi"/>
    <splash src="res/splash-port-mdpi.png" density="port-mdpi"/>
    <splash src="res/splash-port-xhdpi.png" density="port-xhdpi"/>
</platform>

<preference name="SplashScreen" value="screen"/>
<preference name="SplashScreenDelay" value="20000" />

그리고 위 src 패스의 png 파일들도 추가해 준다.

플러그인 추가

위의 설정만으로는 스플래시 화면이 정해진 20초 동안 나오고 사라진다. 프로그램적으로 메인 로직이 시작하는 시점에 맞춰 스플래시 화면을 없애기 위해서는 플러그인이 필요하다. 플러그인은 이 문서에 설명되어 있다. 그러나 여기에도 빠진 내용이 있어서 헤맸다.

문서대로 따라하고 추가로 html에 다음 코드를 넣는다.

<script src="plugins/org.apache.cordova.splashscreen/www/splashscreen.js" type="text/javascript" charset="utf-8" ></script>

여기서 src 패스는 각자에 맞게 수정.

플러그인 사용

위 문서에 나온대로 자바스크립트 코드에

navigator.splashscreen.hide();

를 추가했지만 스플래시 화면이 안 사라지는 경우도 많았다. 원인은 아마도 splashscreen.js 의 로딩 시점 문제인 거 같다. 그래서 device ready 상태 이후에 위 코드 호출하기로 했다. 우리 회사에서 사용한 코드는 이렇다.

document.addEventListener("deviceready", onDeviceReady, false);

function onDeviceReady() {
  블라블라
  navigator.splashscreen.hide();
  블라블라
}