スプラッシュスクリーン表示

1. splashscreenプラグイン追加

cordova plugin add cordova-plugin-splashscreen

2. config.xmlにファイルパス追加

<platform name="android">

        <splash src="res/android/splash-port-ldpi.png" density="port-ldpi" /><!--200x320-->

        <splash src="res/android/splash-port-mdpi.png" density="port-mdpi"/><!--320x480-->

        <splash src="res/android/splash-port-hdpi.png" density="port-hdpi"/><!--480x800-->

        <splash src="res/android/splash-port-xhdpi.png" density="port-xhdpi"/><!--720x1280-->

        <splash src="res/android/splash-land-ldpi.png" density="land-ldpi" />><!--320x200-->

        <splash src="res/android/splash-land-mdpi.png" density="land-mdpi"/><!--480x320-->

        <splash src="res/android/splash-land-hdpi.png" density="land-hdpi"/><!--800x480-->

        <splash src="res/android/splash-land-xhdpi.png" density="land-xhdpi"/><!--1280x720-->

    </platform>

<platform name="ios">

        <splash height="480" src="res/ios/Default~iphone.png" width="320" />

        <splash height="960" src="res/ios/Default@2x~iphone.png" width="640" />

        <splash height="1136" src="res/ios/Default-568h@2x~iphone.png" width="640" />

        <splash height="1334" src="res/ios/Default-667h@2x~iphone.png" width="750" />

        <splash height="2208" src="res/ios/Default-736h@3x~iphone.png" width="1242" />

        <splash height="1242" src="res/ios/Default-Landscape-736h.png" width="2208" />

        <splash height="1024" src="res/ios/Default-Portrait~ipad.png" width="768" />

        <splash height="768" src="res/ios/Default-Landscape~ipad.png" width="1024" />

        <splash height="2048" src="res/ios/Default-Portrait@2x~ipad.png" width="1536" />

        <splash height="1536" src="res/ios/Default-Landscape@2x~ipad.png" width="2048" />

    </platform>

3. 画像ファイル設置

１つ１つの画像を作るのは面倒なのでプログラムを使って 2208pixelx2208pixel以上の１つの画像から全部の画像を作ります。

これでスプラッシュスクリーンが表示されるようになります。アプリが起動すると自動的に非表示になります。

(Option)ページの初期化が終るまで表示する

シングルページアプリの場合は初期処理に時間がかかるので、初期処理が終るまでスプラッシュスクリーンを表示し続けたい事があります。

(1)自動的に非表示にならないようにする

config.xml

  <preference name="AutoHideSplashScreen" value="false" />

  <preference name="SplashScreenDelay" value="10000" />

(2)マニュアルで閉じる

hoge.js(初期化が終ったら)

   navigator.splashscreen.hide();

SplashScreenDelayは十分に長い時間にする必要がありますが、hide()メソッドが過去動作しない不具合があったことがあり、SplashScreenDelayの時間分表示されてしまったので、初期化が終わるぐらいの適度な長さにしておくのが万が一にもいいと思います。

(Option)任意のタイミングで表示

(未検証) データを全て消すのに時間がかかる場合などにスプラッシュスクリーンを表示して、処理が終ったら最初の画面に戻る場合に使えるかもしれません。

navigator.splashscreen.show();//表示

navigator.splashscreen.hide();//非表j

注意？

• アプリを起動 -> スプラッシュスクリーン表示される
• 戻るボタンでアプリ停止
• アプリを起動 -> スプラッシュスクリーン表示されない

戻るボタンの場合はアプリはおちておらずブラウザは死んでいる(?)