Black screen in Cordova Windows 10 UWP app

Question

I am using Cordova to build a UWP Windows 10 app that contains an Ext.js web application.

I can successfully build the application using Cordova with cordova build windows and with Sencha's system sencha app build native. This outputs a folder in cordova\platforms\windows\AppPackages with an .appx file that I can install after trusting the generated key.

The Problem

When installation completes, if the "Run when finished" checkbox is left checked, the app loads and I see our login screen. If I close the app by pressing the X in the top right corner, and then re-open the app from the start menu, all I see is a black screen (the actual colour is #1d1f20). If I uninstall the app and reinstall, it will work again but only once. Any subsequent close and re-open causes the black screen.

If I uncheck the "run when finished" checkbox, and then I open the app manually, I see the black screen as well.

When the black screen is showing, if I press F12 to open Developer Tools and then press Ctrl and R to reload, I see the login screen. There are no console errors.

If I open the index.html file in a web browser from cordova\platforms\windows\www then I see the login screen.

I tried adding config to the config.xml relating to the splash screen but this did not help the situation.

Just to reiterate, the app works once (if launched immediately), but then all subsequent launches show only a black screen unless I open developer tools and manually reload

In Visual Studio

If I open the solution in Visual Studio and "Run" on Local Machine, it works and I see the login screen.

If I go to Build > Deploy Solution, it will install the app on my system and run it and it works.

This actually causes the app to work, even on subsequent launches!!

If I go to Project > Store > Create App Packages and create an app package, I get the same black screen problem (side note, this creates an .appxbundle file instead of a .appx file).

My System Details:

• Windows 10 x64 version 1709 OS Build 16299.192
• Node: 6.10.3
• npm: 5.6.0
• cordova: 8.0.0
• Visual Studio: Community 2017 15.5.3
• JavaScript UWP Project System: 2.0
• Visual Studio tools for Universal Windows Apps: 15.0.27130.2020
• Ext.js 6.5.1

Cordova Config File

<?xml version='1.0' encoding='utf-8'?>
<widget id="com.foo.foomobile" version="1.0.5" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
    <name>FooMobile</name>
    <description>
        A sample Apache Cordova application that responds to the deviceready event.
    </description>
    <author email="[email protected]" href="http://cordova.io">
        Foo Services
    </author>
    <content src="index.html" />
    <access origin="*" />
    <allow-intent href="http://*/*" />
    <allow-intent href="https://*/*" />
    <allow-intent href="tel:*" />
    <allow-intent href="sms:*" />
    <allow-intent href="mailto:*" />
    <allow-intent href="geo:*" />
    <platform name="android">
        <allow-intent href="market:*" />
    </platform>
    <platform name="ios">
        <allow-intent href="itms:*" />
        <allow-intent href="itms-apps:*" />
    </platform>
    <plugin name="cordova-plugin-whitelist" spec="1" />
    <preference name="windows-target-version" value="10.0" />
    <preference name="KeepRunning" value="true" />
    <engine name="android" spec="~6.2.3" />
    <engine name="windows" spec="^5.0.0" />
</widget>

Any help will be appreciated.

EDIT

I tried the Cordova build with a fresh blank Ext.js 6.5.3 app and that also has the same issue with first launch working and subsequent launches white screen.

Edit 2

Here is a link to the sample app in question

Answer 1

Marc from Sencha helped me to solve the issue by providing an updated microloader. The code is shown in the gist below.

It uses a different way of loading the files.

https://gist.github.com/djam90/79389bb82696b082b83da701e12373ef

An alternative solution is to disable the microloader entirely by modifying app.json:

"production": {
    "output": {
        "microloader": {
            "enable": false
         }
     }
}