Cordova WKWebView white screen

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="[email protected]" 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:

1. yarn install
2. cordova platform add ios
3. 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.