Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/apache/cordova-plugin-splashscreen

Apache Cordova Plugin splashscreen
https://github.com/apache/cordova-plugin-splashscreen

cordova cplusplus csharp java javascript library mobile nodejs objective-c

Last synced: 4 days ago
JSON representation

Apache Cordova Plugin splashscreen

Awesome Lists containing this project

README 

        
---

title: Browser Splashscreen

description: Control the browser platform splash screen for your app.

---



# cordova-plugin-splashscreen



[![Chrome Testsuite](https://github.com/apache/cordova-plugin-splashscreen/actions/workflows/chrome.yml/badge.svg)](https://github.com/apache/cordova-plugin-splashscreen/actions/workflows/chrome.yml) [![Lint Test](https://github.com/apache/cordova-plugin-splashscreen/actions/workflows/lint.yml/badge.svg)](https://github.com/apache/cordova-plugin-splashscreen/actions/workflows/lint.yml)



This plugin displays and hides a splash screen while your web application is launching. Using its methods you can also show and hide the splash screen manually.



- [cordova-plugin-splashscreen](#cordova-plugin-splashscreen)

  - [Installation](#installation)

  - [Supported Platforms](#supported-platforms)

  - [Platform Splash Screen Image Configuration](#platform-splash-screen-image-configuration)

    - [Example Configuration](#example-configuration)

  - [Preferences](#preferences)

    - [config.xml](#configxml)

    - [Quirks](#quirks)

  - [Methods](#methods)

    - [splashscreen.hide](#splashscreenhide)

    - [splashscreen.show](#splashscreenshow)



## Installation



    // npm hosted (new) id

    cordova plugin add cordova-plugin-splashscreen



    // you may also install directly from this repo

    cordova plugin add https://github.com/apache/cordova-plugin-splashscreen.git



## Supported Platforms



- Browser



## Platform Splash Screen Image Configuration



### Example Configuration



In the top-level `config.xml` file (not the one in `platforms`), add configuration elements like those specified here.



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 file whatever you like. The internal name in the application is automatically determined by Cordova.



Directory structure:



```

projectRoot

    hooks

    platforms

    plugins

    www

        css

        img

        js

    res

        screen

```



```xml



```



## Preferences



### config.xml



- `AutoHideSplashScreen` (boolean, default to `true`). Indicates whether to hide splash screen automatically or not. The splash screen is hidden after the amount of time specified in the `SplashScreenDelay` preference.



    ```xml

    

    ```



- `SplashScreenDelay` (number, default to 3000). Amount of time in milliseconds to wait before automatically hide splash screen.



    ```xml

    

    ```



    This value used to be in seconds (but is now milliseconds) so values less than 30 will continue to be treated as seconds. (Consider this a deprecated patch that will disapear in some future version.)



    To disable the splashscreen add the following preference to `config.xml`:

    ```xml

    

    ```



- `FadeSplashScreen` (boolean, defaults to `true`): Set to `false` to

  prevent the splash screen from fading in and out when its display

  state changes.



    ```xml

    

    ```



- `FadeSplashScreenDuration` (float, defaults to `500`): Specifies the

  number of milliseconds for the splash screen fade effect to execute.



    ```xml

    

    ```



    _Note_: `FadeSplashScreenDuration` is included into `SplashScreenDelay`, for example if you have `` and `` defined in `config.xml`:



    - 00:00 - splashscreen is shown

    - 00:02 - fading has started

    - 00:03 - splashscreen is hidden



    Turning the fading off via `` technically means fading duration to be `0` so that in this example the overall splash screen delay will still be 3 seconds.



    _Note_: This only applies to the application startup - you need to take the fading timeout into account when manually showing/hiding the splash screen in your application's code:



    ```javascript

    navigator.splashscreen.show();

    window.setTimeout(function () {

        navigator.splashscreen.hide();

    }, splashDuration - fadeDuration);

    ```



### Quirks



You can use the following preferences in your `config.xml`:



```xml



     

     

     

     

     

     

     



```



__Note__: `SplashScreen` value should be absolute in order to work in a sub-page.



## Methods



- splashscreen.show

- splashscreen.hide



### splashscreen.hide



Dismiss the splash screen.



```js

navigator.splashscreen.hide();

```



### splashscreen.show



Displays the splash screen.



```js

navigator.splashscreen.show();

```



Your application cannot call `navigator.splashscreen.show()` until the application has

started and the `deviceready` event has fired. But since typically the splash

screen is meant to be visible before your application has started, that would seem to

defeat the purpose of the splash screen.  Providing any parameters in

`config.xml` will automatically `show` the splash screen immediately after your

application is launched and before it has fully started and received the `deviceready`

event. For this reason, it is unlikely you will need to call `navigator.splashscreen.show()` to make the splash

screen visible for application startup.