Cordova WKWebView white screen - iphone

Question

I'm trying to get a simple JavaScript application running inside of Cordova on my iPhone. The project works perfectly fine inside the simulator but displays a strange screen when running it on my phone.
Here's my config.xml file:
<widget
id="com.landonschropp.tictactoe"
version="1.0.0"
xmlns="http://www.w3.org/ns/widgets"
xmlns:cdv="http://cordova.apache.org/ns/1.0">
<name>Tic-Tac-Toe</name>
<description>An awesome little tic-tac-toe game.</description>
<author email="schroppl#gmail.com" href="https://landonschropp.com">Landon Schropp</author>
<content src="http://localhost:8080" />
<access origin="*" />
<allow-navigation href="http://localhost:8080/*" />
<feature name="CDVWKWebViewEngine">
<param name="ios-package" value="CDVWKWebViewEngine" />
</feature>
<preference name="CordovaWebViewEngine" value="CDVWKWebViewEngine" />
<plugin name="cordova-plugin-statusbar" spec="^2.2.3" />
<plugin name="cordova-plugin-whitelist" spec="^1.3.2" />
<plugin
name="cordova-plugin-wkwebview-engine"
spec="git+https://github.com/driftyco/cordova-plugin-wkwebview-engine.git" />
<engine name="ios" spec="^4.4.0" />
</widget>
and my package.json file:
{
"name": "tic_tac_toe",
"description": "A simple tic-tac-toe game",
"dependencies": {
"axios": "^0.16.1",
"babel-preset-es2015": "^6.24.1",
"babel-preset-stage-2": "^6.24.1",
"cheerio": "^0.22.0",
"cordova": "^7.0.0",
"cordova-ios": "^4.4.0",
"cordova-plugin-statusbar": "^2.2.3",
"cordova-plugin-whitelist": "^1.3.2",
"cordova-plugin-wkwebview-engine": "git+https://github.com/driftyco/cordova-plugin-wkwebview-engine.git",
"gulp": "^3.9.1",
"gulp-connect": "^5.0.0",
"gulp-file-cache": "^0.0.1",
"gulp-sass": "^3.1.0",
"gulp-sass-glob": "^1.0.8",
"gulp-transform": "^1.1.0",
"gulp-util": "^3.0.8",
"gulp-watch": "^4.3.11",
"lodash": "^4.17.4",
"phaser": "^2.6.2",
"rollup": "^0.41.6",
"rollup-plugin-babel": "^2.7.1",
"rollup-plugin-commonjs": "^8.0.2",
"rollup-plugin-json": "^2.1.1",
"rollup-plugin-node-resolve": "^3.0.0",
"rollup-stream": "^1.19.0",
"run-sequence": "^1.2.2",
"vinyl-source-stream": "^1.1.0"
},
"devDependencies": {
"babel-register": "^6.24.1",
"chai": "^3.5.0",
"del": "^2.2.2",
"eslint": "^3.19.0",
"mocha": "^3.2.0"
},
"cordova": {
"platforms": [
"ios"
],
"plugins": {
"cordova-plugin-whitelist": {},
"cordova-plugin-wkwebview-engine": {},
"cordova-plugin-statusbar": {}
}
}
}
To build and run the app, I do the following:
yarn install
cordova platform add ios
cordova run ios
Currently, when running the app on my phone I see the following screen:

Answer 1

As dymv mentioned, the issue is most likely that your app cannot reach localhost, since "localhost" in this context was your development computer, not the iPhone. Can you deploy it to a hosted server solution and retest?
The WKWebView plugin is not a local server, but rather an enhanced WebView component (a WebView is basically an embedded browser in your app that runs your HTML, CSS, JavaScript code). The core benefit is that it processes JavaScript faster (much faster!) so your app will perform better.