Broken splashscreen image during fadeout of splashscreen

[janpio]

By default a new project created with Cordova Windows has a missing splashscreen:

E:\Projects\throwaway
λ cordova create cordovaWindowsMissingSplash
Creating a new cordova project.

E:\Projects\throwaway
λ cd cordovaWindowsMissingSplash\

E:\Projects\throwaway\cordovaWindowsMissingSplash  ([email protected])
λ cordova platform add https://github.com/apache/cordova-windows
Using cordova-fetch for https://github.com/apache/cordova-windows
Warning: using prerelease platform [email protected].
Use 'cordova platform add windows@latest' to add the latest published version instead.
Adding windows project...
Creating Cordova Windows Project:
        Path: platforms\windows
        Namespace: io.cordova.hellocordova
        Name: HelloCordova
Windows project created with [email protected]
Plugin 'cordova-plugin-whitelist' found in config.xml... Migrating it to package.json
Discovered saved plugin "cordova-plugin-whitelist". Adding it to the project
Installing "cordova-plugin-whitelist" for windows
Adding cordova-plugin-whitelist to package.json

E:\Projects\throwaway\cordovaWindowsMissingSplash  ([email protected])
λ cordova run windows
ENV var MSBUILDDIR is set C:\Program Files (x86)\Microsoft Visual Studio\2017\Community\MSBuild\15.0\Bin
Building project: E:\Projects\throwaway\cordovaWindowsMissingSplash\platforms\windows\CordovaApp.Windows10.jsproj
        Configuration : debug
        Platform      : anycpu
        Buildflags    : /p:AppxBundle=Never
        MSBuildTools  : C:\Program Files (x86)\Microsoft Visual Studio\2017\Community\MSBuild\15.0\Bin
buildProject spawn: C:\Program Files (x86)\Microsoft Visual Studio\2017\Community\MSBuild\15.0\Bin\msbuild [
  'E:\\Projects\\throwaway\\cordovaWindowsMissingSplash\\platforms\\windows\\CordovaApp.Windows10.jsproj',
  '/clp:NoSummary;NoItemAndPropertyList;Verbosity=minimal',
  '/nologo',
  '/p:Configuration=debug',
  '/p:Platform=anycpu',
  '/p:AppxBundle=Never'
] { stdio: 'inherit' }
  prebuild.js: Patching platform `10`
  - Injected `base.js` reference to `/www/index.html`
  - Removing /( *)(<script\s+(?:type="text\/javascript"\s+)?src="\/\/Microsoft.WinJS.2.0\/js\/base.js">\s*<\/script>)(\s*)/ from /www/index.html
  - Removing /( *)(<script\s+(?:type="text\/javascript"\s+)?src="\/\/Microsoft.Phone.WinJS.2.1\/js\/base.js">\s*<\/script>)(\s*)/ from /www/index.html
  CordovaApp.Windows10 -> E:\Projects\throwaway\cordovaWindowsMissingSplash\platforms\windows\AppPackages\CordovaApp.Windows10_1.0.0.0_anycpu_debug_Test\Cor
  dovaApp.Windows10_1.0.0.0_anycpu_debug.appx
Deploying windows10 package to device:
E:\Projects\throwaway\cordovaWindowsMissingSplash\platforms\windows\AppPackages\CordovaApp.Windows10_1.0.0.0_anycpu_debug_Test\CordovaApp.Windows10_1.0.0.0_anycpu_debug.appx
Attempting to uninstall previous application version...
Attempting to install application...
Found package: E:\Projects\throwaway\cordovaWindowsMissingSplash\platforms\windows\AppPackages\CordovaApp.Windows10_1.0.0.0_anycpu_debug_Test\CordovaApp.Windows10_1.0.0.0_anycpu_debug.appx

Installing app...

Success: Your app was successfully installed.
Starting application...
ActivateApplication:  io.cordova.hellocordova_h35559jr9hy9m!io.cordova.hellocordova

Leads to:

[janpio]

Probably related:

'WWAHost.exe' (Script): Loaded 'Script Code (MSAppHost/3.0)'. 
Exception was thrown at line 944, column 5 in ms-appx-web://io.cordova.hellocordova/www/cordova.js
0x800a138f - JavaScript runtime error: Unable to get property 'attributes' of undefined or null reference

[janpio]

The image is usually visible as it should be, and only during fadeout of the splashscreen the "broken image" image disappears.

[janpio]

Ok, similar to iOS there seems to be a native splashscreen, and a manually constructed one with a spinner. That second one can't properly display the splashscreen image.

[janpio]

To make the problem more visible, add this to your config.xml:

    <platform name="windows">
        <preference name="SplashScreenBackgroundColor" value="red" />
        <preference name="SplashScreenDelay" value="10000" />
        <preference name="FadeSplashScreenDuration" value="5000" />
	</platform>

[janpio]

Debugging the webview content this is visible:

<div class="extendedSplashScreen hidden" id="extendedSplashScreen" style="opacity: 1; background-color: red;"><span id="extendedSplashImageHelper"></span><img id="extendedSplashImage" style="left: 290px; top: 300px; width: 620px; height: 300px;" draggable="false" onload="" alt="Splash screen image" src="ms-appx-web:///images/splashscreen.png"><progress class="win-medium win-ring extended-splash-progress-desktop" id="extendedSplashProgress" style="margin-top: 632px;"></progress></div>

And indeed, ms-appx-web:///images/splashscreen.png can not be loaded if you add it to the page html directly:

<div class="app">
            <h1>Apache Cordova</h1><img src="ms-appx-web:///images/splashscreen.png">
            <div class="blink" id="deviceready">
                <p class="event listening" style="display:none;">Connecting to Device</p>
                <p class="event received" style="display:block;">Device is Ready</p>
            </div>
        </div>

So either this never worked, or something broke it.

[janpio]

Ah there it is:

[janpio]

So this can be fixed by replacing

<meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *; img-src 'self' data: content:;">

with

<meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *; img-src 'self' data: content: ms-appx-web:;">

in index.html (See difference at the end of string).

Now the question becomes: Should this be added to our default project at https://github.com/apache/cordova-app-hello-world/blob/master/template_src/www/index.html#L31? Or should we change index.html dynamically somehow only for Windows? Or is there some other workaround?

[brody4hire]

What is the status of this issue?

Any reason for this issue to block a patch release?

[brody4hire]

I think we should address this in the next major release.

[timbru31]

We are archiving this repository following Apache Cordova's Deprecation Policy. We will not continue to work on this repository. Therefore all issues and pull requests are being closed. Thanks for your contribution.