openEventsPlatformApp/plugins/cordova-plugin-splashscreen/README.md
plugins/cordova-plugin-splashscreen/README.mdRaw
1---
2title: Splashscreen
3description: Control the splash screen for your app.
4---
5<!--
6# license: Licensed to the Apache Software Foundation (ASF) under one
7# or more contributor license agreements. See the NOTICE file
8# distributed with this work for additional information
9# regarding copyright ownership. The ASF licenses this file
10# to you under the Apache License, Version 2.0 (the
11# "License"); you may not use this file except in compliance
12# with the License. You may obtain a copy of the License at
13#
14# http://www.apache.org/licenses/LICENSE-2.0
15#
16# Unless required by applicable law or agreed to in writing,
17# software distributed under the License is distributed on an
18# "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
19# KIND, either express or implied. See the License for the
20# specific language governing permissions and limitations
21# under the License.
22-->
23
24|Android|iOS| Windows 8.1 Store | Windows 8.1 Phone | Windows 10 Store | Travis CI |
25|:-:|:-:|:-:|:-:|:-:|:-:|
26|[](http://cordova-ci.cloudapp.net:8080/job/cordova-periodic-build/PLATFORM=android,PLUGIN=cordova-plugin-splashscreen/)|[](http://cordova-ci.cloudapp.net:8080/job/cordova-periodic-build/PLATFORM=ios,PLUGIN=cordova-plugin-splashscreen/)|[](http://cordova-ci.cloudapp.net:8080/job/cordova-periodic-build/PLATFORM=windows-8.1-store,PLUGIN=cordova-plugin-splashscreen/)|[](http://cordova-ci.cloudapp.net:8080/job/cordova-periodic-build/PLATFORM=windows-8.1-phone,PLUGIN=cordova-plugin-splashscreen/)|[](http://cordova-ci.cloudapp.net:8080/job/cordova-periodic-build/PLATFORM=windows-10-store,PLUGIN=cordova-plugin-splashscreen/)|[](https://travis-ci.org/apache/cordova-plugin-splashscreen)|
27
28# cordova-plugin-splashscreen
29
30This plugin is required to work with splash screens. This plugin displays and hides a splash screen during application launch.
31
32Report issues with this plugin on the [Apache Cordova issue tracker][Apache Cordova issue tracker].
33
34## Installation
35
36 // npm hosted (new) id
37 cordova plugin add cordova-plugin-splashscreen
38
39 // you may also install directly from this repo
40 cordova plugin add https://github.com/apache/cordova-plugin-splashscreen.git
41
42## Supported Platforms
43
44- Amazon Fire OS
45- Android
46- BlackBerry 10
47- iOS
48- Windows Phone 7 and 8
49- Windows (`cordova-windows` version >= 4.4.0 is required)
50- Browser
51
52__Note__: Extended splashscreen does not require the plugin on Windows (as opposed to Android and iOS) in case you don't use the plugin API, i.e. programmatic hide/show.
53
54### iOS-specific information
55
56There are two mechanisms for displaying a launch screen on iOS:
57
581. Legacy launch images: images are sized exactly for the device's screen size. Does not support the iPad Pro 12.9's native resolution or split-screen/slide-over multitasking.
59
602. Launch storyboard images: Images are sized based on scale, idiom, and size classes. Supports all devices, and can be used with split-screen/slide-over multitasking.
61
62Apple is moving away from legacy launch images. There is no official support for providing a native-resolution launch image for the iPad Pro 12.9 or for providing launch images that work with split-screen multitasking or slide-over. If your app doesn't need to support these contexts, then you can continue to use legacy launch images for as long as you like.
63
64The preferred method of providing launch images is to use a launch storyboard. For native app developers, the ideal launch storyboard is an unpopulated version of the app's user interface at launch. For non-native app developers who don't wish to learn Interface Builder, however, this plugin simulates the legacy launch image method as much as is feasible.
65
66#### Legacy launch images
67
68If you choose to use legacy launch images, you will use the following syntax in `config.xml`:
69
70```
71 <splash src="res/screen/ios/Default~iphone.png" width="320" height="480"/>
72 <splash src="res/screen/ios/Default@2x~iphone.png" width="640" height="960"/>
73 <splash src="res/screen/ios/Default-Portrait~ipad.png" width="768" height="1024"/>
74 <splash src="res/screen/ios/Default-Portrait@2x~ipad.png" width="1536" height="2048"/>
75 <splash src="res/screen/ios/Default-Landscape~ipad.png" width="1024" height="768"/>
76 <splash src="res/screen/ios/Default-Landscape@2x~ipad.png" width="2048" height="1536"/>
77 <splash src="res/screen/ios/Default-568h@2x~iphone.png" width="640" height="1136"/>
78 <splash src="res/screen/ios/Default-667h.png" width="750" height="1334"/>
79 <splash src="res/screen/ios/Default-736h.png" width="1242" height="2208"/>
80```
81
82Technically the filename for the `src` attribute can be anything you want; the filenames are used because they match what will be used when your project is compiled. The width and height attributes determine which launch images are displayed on which devices as follows:
83
84| width | height | device (orientation) |
85|:-----------:|:------------:|:-------------------------:|
86| 320 | 480 | All non-retina iPhones and iPods |
87| 640 | 960 | iPhone 4/4s/5/5s (portrait) |
88| 750 | 1334 | iPhone 6/6s/7 (portrait) |
89| 1242 | 2208 | iPhone 6+/6s+/7+ (portrait) |
90| 2208 | 1242 | iPhone 6+/6s+/7+ (landscape) |
91| 768 | 1024 | All non-retina iPads (portrait) |
92| 1024 | 768 | All non-retina iPads (landscape) |
93| 1536 | 2048 | All retina iPads (portrait) |
94| 2048 | 1536 | All retina iPads (landscape) |
95
96Note: It is vitally important that the source image actually matches the size specified in the `width` and `height` attributes. If it does not, the device may fail to render it properly, if at all.
97
98#### Launch storyboard images
99
100In order to support newer form factors and split-screen/slide-over multitasking, you should use launch storyboard images. These are similar to the legacy launch images above, but there are crucial differences:
101
102 - images are not specific to a given device.
103
104 - images are scaled to fill the available viewport (while maintaining the aspect ratio).
105
106 - the outer edges of the images will be cropped, and the amount will vary based on device an viewport.
107
108 - there is no need to provide an image for each possible device, viewport, and orientation; iOS will choose the best image for the situation automatically.
109
110##### Designing launch storyboard images
111
112The key to designing a launch storyboard image is understanding that the edges of the image will almost certainly be cropped. Therefore, one should not place any important information near the edges of any images provided to the launch storyboard. Only the center is a safe area, and this all but guarantees that following Apple's advice of presenting an unpopulated user interface will not work well.
113
114Instead, the following tips should enable you to create a launch image that works across a multitude of form factors, viewports, and orientations:
115
116 - Important graphics (logos, icons, titles) should be centered. The safe bounding region will vary, so you will need to test to ensure that the important graphics are never cropped. Better yet, don't supply any important graphics in the first place.
117
118 - You _can_ fine-tune the placement and size of these graphics, but you don't have the same fine-grained control as you did with legacy launch images.
119
120 - Use a simple color wash. If you use two colors, you'll want one color to fill the top half of the image, and the second to fill the bottom half. If you use a gradient, you'll probably want to ensure that the middle of the gradient lines up with the center of the image.
121
122 - Don't worry about pixel perfection -- because the images are scaled, there's almost no chance the images will be perfectly fit to the pixel grid. Since all supported iOS devices use retina screens, users will be hard pressed to notice it anyway.
123
124It is important to understand the concept of scale, idiom, and size class traits in order to use launch storyboard images effectively. Of the images supplied to the launch storyboard, iOS will choose the image that best matches the device and viewport and render that image. It is possible to supply only one launch image if so desired, but it is also possible to fine-tune the displayed launch image based on traits. When fine-tuning, one can ignore traits that aren't targeted or supported by the app.
125
126> Note: If you are using launch storyboard images, there is no need to include legacy images. If you do, the legacy images will be copied, but not used.
127
128##### Scale
129
130| scale | devices |
131|:-----------:|:----------------------:|
132| 1x | All non-retina devices |
133| 2x | Most retina devices |
134| 3x | iPhone 6+/6s+,7s+ |
135
136In general, you'll want to supply 2x and 3x images. Cordova only supports retina devices now, so there's no point in supplying 1x images.
137
138##### Idioms
139
140| idiom | devices |
141|:-----------:|:-------------:|
142| ipad | All iPads |
143| iphone | All iPhones and iPod Touches |
144| universal | All devices |
145
146You only need to provide universal images unless you need to fine-tune for a specific device idiom.
147
148##### Size classes
149
150There are two size classes applies to both screen axes. Narrow viewports are considered to be the "compact" size class, and remaining viewports are considered "regular". When supplying images to Xcode, however, one must choose between "any & compact" and "any & regular". To stay consistent with the native terminology, this feature will match based on "any" and "compact". `any` will match regular-sized viewports.
151
152Note: this feature uses `com` as an abbreviation for "compact" classes.
153
154The following classes are supported by this feature:
155
156| width | height | orientation |
157|:-----------:|:------------:|:-----------------:|
158| any | any | any |
159| com | any | portrait |
160| any | com | landscape (wide) |
161| com | com | landscape (narrow)|
162
163To see the complete list of size classes associated with devices and viewports, see <http://www.sizeclasses.com>.
164
165##### Single-image launch screen
166
167If your launch image is simple, you may be able to avoid creating a lot of different launch images and supply only one. The launch image needs to meet the following requirements:
168
169 - the image should be square
170
171 - the image should be large enough to fit on an iPad Pro 12.9": 2732x2732
172
173 - anything important should fit within the center
174
175 Keep in mind that the image will be cropped, possibly quite severely, depending upon the viewport.
176
177Once the image is created, you can include it in your project by adding the following to `config.xml`:
178
179```
180 <splash src="res/screen/ios/Default@2x~universal~anyany.png" />
181```
182
183Because only one image is provided, iOS will utilize it in every context.
184
185##### Multi-image launch screen
186
187If a single launch image won't meet your needs, you will probably need to supply at least six images, if not more. Furthermore, keep in mind that it will not be possible to fine tune the image to a specific device, but only to a device class, display factor, and viewport size.
188
189If you don't need to target images to a specific idiom, you should create six images, as follows:
190
191| scale | idiom | width | height | size | filename |
192|:-----------:|:-----------:|:-----------:|:------------:|:----------:|:--------------:|
193| 2x* | universal | any | any | 2732x2732 | `Default@2x~universal~anyany.png` |
194| 2x | universal | com | any | 1278x2732 | `Default@2x~universal~comany.png` |
195| 2x | universal | com | com | 1334x750 | `Default@2x~universal~comcom.png` |
196| 3x* | universal | any | any | 2208x2208 | `Default@3x~universal~anyany.png` |
197| 3x | universal | any | com | 2208x1242 | `Default@3x~universal~anycom.png` |
198| 3x | universal | com | any | 1242x2208 | `Default@3x~universal~comany.png` |
199
200\* this image is required in order for iOS utilize the other images within this scale and idiom.
201
202> Note: If the 3x sizes look small too you, that's because there's only one device class that currently has a 3x density: the iPhone 6+/6s+/7+.
203
204The above looks like the following snippet when present in `config.xml`:
205
206```
207 <splash src="res/screen/ios/Default@2x~universal~anyany.png" />
208 <splash src="res/screen/ios/Default@2x~universal~comany.png" />
209 <splash src="res/screen/ios/Default@2x~universal~comcom.png" />
210 <splash src="res/screen/ios/Default@3x~universal~anyany.png" />
211 <splash src="res/screen/ios/Default@3x~universal~anycom.png" />
212 <splash src="res/screen/ios/Default@3x~universal~comany.png" />
213```
214
215Should one need to further fine tune based upon device idiom, one can do so. This might look like so:
216
217| scale | idiom | width | height | size | filename |
218|:-----------:|:-----------:|:-----------:|:------------:|:----------:|:--------------:|
219| 2x* | iphone | any | any | 1334x1334 | `Default@2x~iphone~anyany.png` |
220| 2x | iphone | com | any | 750x1334 | `Default@2x~iphone~comany.png` |
221| 2x | iphone | com | com | 1334x750 | `Default@2x~iphone~comcom.png` |
222| 3x* | iphone | any | any | 2208x2208 | `Default@3x~iphone~anyany.png` |
223| 3x | iphone | any | com | 2208x1242 | `Default@3x~iphone~anycom.png` |
224| 3x | iphone | com | any | 1242x2208 | `Default@3x~iphone~comany.png` |
225| 2x* | ipad | any | any | 2732x2732 | `Default@2x~ipad~anyany.png` |
226| 2x | ipad | com | any | 1278x2732 | `Default@2x~ipad~comany.png` |
227
228\* this image is required in order for iOS utilize the other images within this scale and idiom.
229
230The above looks like the following in `config.xml`:
231
232```
233 <splash src="res/screen/ios/Default@2x~iphone~anyany.png" />
234 <splash src="res/screen/ios/Default@2x~iphone~comany.png" />
235 <splash src="res/screen/ios/Default@2x~iphone~comcom.png" />
236 <splash src="res/screen/ios/Default@3x~iphone~anyany.png" />
237 <splash src="res/screen/ios/Default@3x~iphone~anycom.png" />
238 <splash src="res/screen/ios/Default@3x~iphone~comany.png" />
239 <splash src="res/screen/ios/Default@2x~ipad~anyany.png" />
240 <splash src="res/screen/ios/Default@2x~ipad~comany.png" />
241```
242
243##### Quirks and Known Issues
244
2451. **App on target may not reflect changes to images**
246 Once you run the app on a target, iOS caches the launch image. Unfortunately, when you chance the images, iOS does _not_ invalidate the cache, which means you'll still see the old launch image. You should either: delete the app, or reset content & settings (simulator).
247
2482. **Simulator may not show expected images when launched from CLI**
249 When Xcode deploys to a specific simulator, it only copies the assets that match the simulator's characteristics. For example, if you try to run an app on the iPhone 6s Plus simulator, only @3x launch images are copied. When compiling from the CLI, however, the default is to assume an iPhone 5s, which means only @2x launch images are copied. Unless your launch images are markedly different, chances are good the difference would go unnoticed, but this does mean that the only accurate method of testing is to test on a physical device.
250
2513. **`anyany` must be provided for other variations to be used**
252 If you don't provide an `anyany` version of the launch image for a specific scale and idiom, the other variations (like `anycom`, `comany`, and `comcom`) will ignored.
253
254## Windows-specific information
255
256Splash screen images can be defined using the [MRT](https://cordova.apache.org/docs/en/dev/config_ref/images.html#windows) concept.
257If you specify src="res/windows/splashscreen.png" the following files will be copied into the application's images folder:
258`res/windows/splashscreen.png` | `res/windows/splashscreen.scale-100.png`, `res/windows/splashscreen.scale-125.png`, etc.
259The following are supported:
260
261| Scale, % | Project | Width | Height | Filename |
262|:------------:|:-------------------:|:-----------:|:------------:|:---------------------------------:|
263| 100 | Windows 10/8.1 | 620 | 300 | `splashscreen.png` \| `splashscreen.scale-100.png` |
264| 125 | Windows 10 | 775 | 375 | `splashscreen.scale-125.png` |
265| 150 | Windows 10 | 930 | 450 | `splashscreen.scale-150.png` |
266| 200 | Windows 10 | 1240 | 600 | `splashscreen.scale-200.png` |
267| 400 | Windows 10 | 2480 | 1200 | `splashscreen.scale-400.png` |
268| 140 | Windows 8.1 | 868 | 420 | `splashscreen.scale-140.png` |
269| 180 | Windows 8.1 | 1116 | 540 | `splashscreen.scale-180.png` |
270| 100 | Windows Phone 8.1 | 480 | 800 | `splashscreenphone.png` \| `splashscreenphone.scale-100.png` |
271| 140 | Windows Phone 8.1 | 672 | 1120 | `splashscreenphone.scale-140.png` |
272| 240 | Windows Phone 8.1 | 1152 | 1920 | `splashscreenphone.scale-240.png` |
273
274__Note__: SplashScreens size for Windows 10 project should not exceed 200 KBytes.
275__Note__: Supported formats are `.png`, `.jpg`, `.jpeg`. Mixing of the extensions within a target is not supported. I.e. you can have `splashscreen.jpg` and `splashscreenphone.png` but not `splashscreen.scale-100.png`, `splashscreen.scale-400.jpg`.
276__Note__: You may need to reopen Visual Studio solution after changing the images and doing a `cordova prepare` for the changes to take effect.
277
278## Example Configuration
279In the top-level `config.xml` file (not the one in `platforms`), add configuration elements like those specified here.
280
281Please notice that the value of the "src" attribute is relative to the project root directory and not to the www directory (see `Directory structure` below). You can name the source image whatever you like. The internal name in the app is determined by Cordova.
282
283Directory structure:
284
285```
286projectRoot
287 hooks
288 platforms
289 plugins
290 www
291 css
292 img
293 js
294 res
295 screen
296 android
297 ios
298 windows
299```
300
301```xml
302<platform name="android">
303 <!-- you can use any density that exists in the Android project -->
304 <splash src="res/screen/android/splash-land-hdpi.png" density="land-hdpi"/>
305 <splash src="res/screen/android/splash-land-ldpi.png" density="land-ldpi"/>
306 <splash src="res/screen/android/splash-land-mdpi.png" density="land-mdpi"/>
307 <splash src="res/screen/android/splash-land-xhdpi.png" density="land-xhdpi"/>
308
309 <splash src="res/screen/android/splash-port-hdpi.png" density="port-hdpi"/>
310 <splash src="res/screen/android/splash-port-ldpi.png" density="port-ldpi"/>
311 <splash src="res/screen/android/splash-port-mdpi.png" density="port-mdpi"/>
312 <splash src="res/screen/android/splash-port-xhdpi.png" density="port-xhdpi"/>
313</platform>
314
315<platform name="ios">
316 <!-- There are two mechanisms for showing launch images.
317 -- Legacy method (supports all devices except iPad Pro 12.9):
318 -- Note: Images are determined by width and height. The following are supported -->
319 <splash src="res/screen/ios/Default~iphone.png" width="320" height="480"/>
320 <splash src="res/screen/ios/Default@2x~iphone.png" width="640" height="960"/>
321 <splash src="res/screen/ios/Default-Portrait~ipad.png" width="768" height="1024"/>
322 <splash src="res/screen/ios/Default-Portrait@2x~ipad.png" width="1536" height="2048"/>
323 <splash src="res/screen/ios/Default-Landscape~ipad.png" width="1024" height="768"/>
324 <splash src="res/screen/ios/Default-Landscape@2x~ipad.png" width="2048" height="1536"/>
325 <splash src="res/screen/ios/Default-568h@2x~iphone.png" width="640" height="1136"/>
326 <splash src="res/screen/ios/Default-667h.png" width="750" height="1334"/>
327 <splash src="res/screen/ios/Default-736h.png" width="1242" height="2208"/>
328 <splash src="res/screen/ios/Default-Landscape-736h.png" width="2208" height="1242"/>
329 <!-- Storyboard method (supports all devices):
330 -- Important: If you use the storyboard method, legacy images are
331 -- copied but ignored.
332 -- Note: images are determined by scale, idiom, and size traits. The following
333 -- are suggested based on current device form factors -->
334 <splash src="res/screen/ios/Default@2x~universal~anyany.png" />
335 <splash src="res/screen/ios/Default@2x~universal~comany.png" />
336 <splash src="res/screen/ios/Default@2x~universal~comcom.png" />
337 <splash src="res/screen/ios/Default@3x~universal~anyany.png" />
338 <splash src="res/screen/ios/Default@3x~universal~anycom.png" />
339 <splash src="res/screen/ios/Default@3x~universal~comany.png" />
340
341</platform>
342
343<!-- Configuration using MRT concept (Recommended, see "Windows-specific information" section for details): -->
344<platform name="windows">
345 <splash src="res/screen/windows/splashscreen.png" target="SplashScreen"/>
346 <splash src="res/screen/windows/splashscreenphone.png" target="SplashScreenPhone"/>
347</platform>
348
349<!-- Configuration using image size: -->
350<!--<platform name="windows">
351 <splash src="res/screen/windows/splashscreen.png" width="620" height="300"/>
352 <splash src="res/screen/windows/splashscreenphone.png" width="1152" height="1920"/>
353</platform>-->
354
355<platform name="blackberry10">
356 <!-- Add a rim:splash element for each resolution and locale you wish -->
357 <!-- http://developer.blackberry.com/html5/documentation/rim_splash_element.html -->
358 <rim:splash src="res/screen/blackberry/splashscreen.png"/>
359</platform>
360
361<preference name="SplashScreenDelay" value="10000" />
362```
363
364## Preferences
365
366#### config.xml
367
368- `AutoHideSplashScreen` (boolean, default to `true`). Indicates whether to hide splash screen automatically or not. Splash screen hidden after amount of time specified in the `SplashScreenDelay` preference.
369
370```xml
371 <preference name="AutoHideSplashScreen" value="true" />
372```
373
374- `SplashScreenDelay` (number, default to 3000). Amount of time in milliseconds to wait before automatically hide splash screen.
375
376```xml
377 <preference name="SplashScreenDelay" value="3000" />
378```
379
380Note also that this value used to be seconds, and not milliseconds, so values less than 30 will still be treated as seconds. ( Consider this a deprecated patch that will disapear in some future version. )
381
382To disable the splashscreen add the following preference to `config.xml`:
383```xml
384<preference name="SplashScreenDelay" value="0"/>
385```
386
387**Windows Quirk**: You should disable the splashscreen in case you are updating the entire document body dynamically (f.e. with a SPA router) to avoid affecting UI/controls.
388Note that you should also directly reference `WinJS/base.js` in the page HTML in this case to avoid the issues with activation context ([CB-11658](https://issues.apache.org/jira/browse/CB-11658)).
389
390**iOS Quirk**: to disable the splashscreen on `ios` platform you should also add `<preference name="FadeSplashScreenDuration" value="0"/>` to `config.xml`.
391
392- `FadeSplashScreen` (boolean, defaults to `true`): Set to `false` to
393 prevent the splash screen from fading in and out when its display
394 state changes.
395
396```xml
397 <preference name="FadeSplashScreen" value="false"/>
398```
399
400- `FadeSplashScreenDuration` (float, defaults to `500`): Specifies the
401 number of milliseconds for the splash screen fade effect to execute.
402
403```xml
404 <preference name="FadeSplashScreenDuration" value="750"/>
405```
406
407_Note_: `FadeSplashScreenDuration` is included into `SplashScreenDelay`, for example if you have `<preference name="SplashScreenDelay" value="3000" />` and `<preference name="FadeSplashScreenDuration" value="1000"/>` defined in `config.xml`:
408
409- 00:00 - splashscreen is shown
410- 00:02 - fading has started
411- 00:03 - splashscreen is hidden
412
413Turning the fading off via `<preference name="FadeSplashScreen" value="false"/>` technically means fading duration to be `0` so that in this example the overall splash delay will still be 3 seconds.
414
415_Note_: This only applies to the app startup - you need to take the fading timeout into account when manually showing/hiding the splashscreen in the code:
416
417```javascript
418navigator.splashscreen.show();
419window.setTimeout(function () {
420 navigator.splashscreen.hide();
421}, splashDuration - fadeDuration);
422```
423
424- `ShowSplashScreenSpinner` (boolean, defaults to `true`): Set to `false`
425 to hide the splash-screen spinner.
426
427```xml
428 <preference name="ShowSplashScreenSpinner" value="false"/>
429```
430
431### Android Quirks
432
433In your `config.xml`, you can add the following preferences:
434
435```xml
436<preference name="SplashMaintainAspectRatio" value="true|false" />
437<preference name="SplashShowOnlyFirstTime" value="true|false" />
438```
439
440"SplashMaintainAspectRatio" preference is optional. If set to true, splash screen drawable is not stretched to fit screen, but instead simply "covers" the screen, like CSS "background-size:cover". This is very useful when splash screen images cannot be distorted in any way, for example when they contain scenery or text. This setting works best with images that have large margins (safe areas) that can be safely cropped on screens with different aspect ratios.
441
442The plugin reloads splash drawable whenever orientation changes, so you can specify different drawables for portrait and landscape orientations.
443
444"SplashShowOnlyFirstTime" preference is also optional and defaults to `true`. When set to `true` splash screen will only appear on application launch. However, if you plan to use `navigator.app.exitApp()` to close application and force splash screen appear on next launch, you should set this property to `false` (this also applies to closing the App with Back button).
445
446### Browser Quirks
447
448You can use the following preferences in your `config.xml`:
449
450```xml
451<platform name="browser">
452 <preference name="SplashScreen" value="/images/browser/splashscreen.jpg" /> <!-- defaults to "/img/logo.png" -->
453 <preference name="SplashScreenDelay" value="3000" /> <!-- defaults to "3000" -->
454 <preference name="SplashScreenBackgroundColor" value="green" /> <!-- defaults to "#464646" -->
455 <preference name="ShowSplashScreen" value="false" /> <!-- defaults to "true" -->
456 <preference name="SplashScreenWidth" value="600" /> <!-- defaults to "170" -->
457 <preference name="SplashScreenHeight" value="300" /> <!-- defaults to "200" -->
458</platform>
459```
460
461__Note__: `SplashScreen` value should be absolute in order to work in a sub-page. The `SplashScreen` value is used only for the browser platform. The value will be ignored for other platforms.
462
463### iOS Quirks
464
465- In iOS, the splashscreen images are called launch images. These images are mandatory on iOS.
466
467### Windows Quirks
468
469- `SplashScreenSpinnerColor` (string, defaults to system accent color): hash, rgb notation or CSS color name.
470
471```xml
472<preference name="SplashScreenSpinnerColor" value="#242424"/>
473<preference name="SplashScreenSpinnerColor" value="DarkRed"/>
474<preference name="SplashScreenSpinnerColor" value="rgb(50,128,128)"/>
475```
476
477- `SplashScreenBackgroundColor` (string, defaults to #464646): hex notation.
478
479```xml
480<preference name="SplashScreenBackgroundColor" value="0xFFFFFFFF"/>
481```
482
483## Methods
484
485- splashscreen.show
486- splashscreen.hide
487
488## splashscreen.hide
489
490Dismiss the splash screen.
491
492```js
493navigator.splashscreen.hide();
494```
495
496
497### BlackBerry 10, WP8, iOS Quirk
498
499The `config.xml` file's `AutoHideSplashScreen` setting must be
500`false`. To delay hiding the splash screen for two seconds, add a
501timer such as the following in the `deviceready` event handler:
502
503```js
504setTimeout(function() {
505 navigator.splashscreen.hide();
506}, 2000);
507```
508
509## splashscreen.show
510
511Displays the splash screen.
512
513```js
514navigator.splashscreen.show();
515```
516
517Your application cannot call `navigator.splashscreen.show()` until the app has
518started and the `deviceready` event has fired. But since typically the splash
519screen is meant to be visible before your app has started, that would seem to
520defeat the purpose of the splash screen. Providing some configuration in
521`config.xml` will automatically `show` the splash screen immediately after your
522app launch and before it has fully started and received the `deviceready`
523event. For this reason, it is unlikely you need to call `navigator.splashscreen.show()` to make the splash
524screen visible for app startup.
525
526[Apache Cordova issue tracker]: https://issues.apache.org/jira/issues/?jql=project%20%3D%20CB%20AND%20status%20in%20%28Open%2C%20%22In%20Progress%22%2C%20Reopened%29%20AND%20resolution%20%3D%20Unresolved%20AND%20component%20%3D%20%22Plugin%20Splashscreen%22%20ORDER%20BY%20priority%20DESC%2C%20summary%20ASC%2C%20updatedDate%20DESC