Couldn't connect to the server - Webpage not available

I am getting following error on “Blank” project, using following commands:

  • ionic cordova run android
  • ionic cordova build android
  • ionic cordova build android --prod
  • ionic cordova build android --prod --release

  • ionic serve works.

I have tried by adding webview plugin, changing Android path, allowing permissions but doesn’t works.

I am using Ionic CLI 4 and its same with Ionic CLI 3.

Following is my config.xml:

<?xml version=‘1.0’ encoding=‘utf-8’?>

<widget id=“io.ionic.starter” version=“0.0.1” xmlns=“http://www.w3.org/ns/widgets” xmlns:cdv=“http://cordova.apache.org/ns/1.0”>

<name>p4</name>

<description>An awesome Ionic/Cordova app.</description>

<author email=“hi@ionicframework” href=“http://ionicframework.com/”>Ionic Framework Team</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:*” />

<preference name=“ScrollEnabled” value=“false” />

<preference name=“android-minSdkVersion” value=“16” />

<preference name=“BackupWebStorage” value=“none” />

<preference name=“SplashMaintainAspectRatio” value=“true” />

<preference name=“FadeSplashScreenDuration” value=“300” />

<preference name=“SplashShowOnlyFirstTime” value=“false” />

<preference name=“SplashScreen” value=“screen” />

<preference name=“SplashScreenDelay” value=“3000” />

<platform name=“android”>

<allow-intent href=“market:*” />

<icon density=“ldpi” src=“resources/android/icon/drawable-ldpi-icon.png” />

<icon density=“mdpi” src=“resources/android/icon/drawable-mdpi-icon.png” />

<icon density=“hdpi” src=“resources/android/icon/drawable-hdpi-icon.png” />

<icon density=“xhdpi” src=“resources/android/icon/drawable-xhdpi-icon.png” />

<icon density=“xxhdpi” src=“resources/android/icon/drawable-xxhdpi-icon.png” />

<icon density=“xxxhdpi” src=“resources/android/icon/drawable-xxxhdpi-icon.png” />

<splash density=“land-ldpi” src=“resources/android/splash/drawable-land-ldpi-screen.png” />

<splash density=“land-mdpi” src=“resources/android/splash/drawable-land-mdpi-screen.png” />

<splash density=“land-hdpi” src=“resources/android/splash/drawable-land-hdpi-screen.png” />

<splash density=“land-xhdpi” src=“resources/android/splash/drawable-land-xhdpi-screen.png” />

<splash density=“land-xxhdpi” src=“resources/android/splash/drawable-land-xxhdpi-screen.png” />

<splash density=“land-xxxhdpi” src=“resources/android/splash/drawable-land-xxxhdpi-screen.png” />

<splash density=“port-ldpi” src=“resources/android/splash/drawable-port-ldpi-screen.png” />

<splash density=“port-mdpi” src=“resources/android/splash/drawable-port-mdpi-screen.png” />

<splash density=“port-hdpi” src=“resources/android/splash/drawable-port-hdpi-screen.png” />

<splash density=“port-xhdpi” src=“resources/android/splash/drawable-port-xhdpi-screen.png” />

<splash density=“port-xxhdpi” src=“resources/android/splash/drawable-port-xxhdpi-screen.png” />

<splash density=“port-xxxhdpi” src=“resources/android/splash/drawable-port-xxxhdpi-screen.png” />

</platform>

<platform name=“ios”>

<allow-intent href=“itms:*” />

<allow-intent href=“itms-apps:*” />

<icon height=“57” src=“resources/ios/icon/icon.png” width=“57” />

<icon height=“114” src=“resources/ios/icon/icon@2x.png” width=“114” />

<icon height=“40” src=“resources/ios/icon/icon-40.png” width=“40” />

<icon height=“80” src=“resources/ios/icon/icon-40@2x.png” width=“80” />

<icon height=“120” src=“resources/ios/icon/icon-40@3x.png” width=“120” />

<icon height=“50” src=“resources/ios/icon/icon-50.png” width=“50” />

<icon height=“100” src=“resources/ios/icon/icon-50@2x.png” width=“100” />

<icon height=“60” src=“resources/ios/icon/icon-60.png” width=“60” />

<icon height=“120” src=“resources/ios/icon/icon-60@2x.png” width=“120” />

<icon height=“180” src=“resources/ios/icon/icon-60@3x.png” width=“180” />

<icon height=“72” src=“resources/ios/icon/icon-72.png” width=“72” />

<icon height=“144” src=“resources/ios/icon/icon-72@2x.png” width=“144” />

<icon height=“76” src=“resources/ios/icon/icon-76.png” width=“76” />

<icon height=“152” src=“resources/ios/icon/icon-76@2x.png” width=“152” />

<icon height=“167” src=“resources/ios/icon/icon-83.5@2x.png” width=“167” />

<icon height=“29” src=“resources/ios/icon/icon-small.png” width=“29” />

<icon height=“58” src=“resources/ios/icon/icon-small@2x.png” width=“58” />

<icon height=“87” src=“resources/ios/icon/icon-small@3x.png” width=“87” />

<icon height=“1024” src=“resources/ios/icon/icon-1024.png” width=“1024” />

<splash height=“1136” src=“resources/ios/splash/Default-568h@2x~iphone.png” width=“640” />

<splash height=“1334” src=“resources/ios/splash/Default-667h.png” width=“750” />

<splash height=“2208” src=“resources/ios/splash/Default-736h.png” width=“1242” />

<splash height=“1242” src=“resources/ios/splash/Default-Landscape-736h.png” width=“2208” />

<splash height=“1536” src=“resources/ios/splash/Default-Landscape@2x~ipad.png” width=“2048” />

<splash height=“2048” src=“resources/ios/splash/Default-Landscape@~ipadpro.png” width=“2732” />

<splash height=“768” src=“resources/ios/splash/Default-Landscape~ipad.png” width=“1024” />

<splash height=“2048” src=“resources/ios/splash/Default-Portrait@2x~ipad.png” width=“1536” />

<splash height=“2732” src=“resources/ios/splash/Default-Portrait@~ipadpro.png” width=“2048” />

<splash height=“1024” src=“resources/ios/splash/Default-Portrait~ipad.png” width=“768” />

<splash height=“960” src=“resources/ios/splash/Default@2x~iphone.png” width=“640” />

<splash height=“480” src=“resources/ios/splash/Default~iphone.png” width=“320” />

<splash height=“2732” src=“resources/ios/splash/Default@2x~universal~anyany.png” width=“2732” />

</platform>

<plugin name=“cordova-plugin-whitelist” spec=“1.3.3” />

<plugin name=“cordova-plugin-device” spec=“2.0.2” />

<plugin name=“cordova-plugin-splashscreen” spec=“5.0.2” />

<plugin name=“cordova-plugin-ionic-webview” spec="^2.0.0" />

<plugin name=“cordova-plugin-ionic-keyboard” spec="^2.0.5" />

<engine name=“android” spec=“6.4.0” />

</widget>

Following is package.json

{
“name”: “p4”,
“version”: “0.0.1”,
“author”: “Ionic Framework”,
“homepage”: “http://ionicframework.com/”,
“private”: true,
“scripts”: {
“start”: “ionic-app-scripts serve”,
“clean”: “ionic-app-scripts clean”,
“build”: “ionic-app-scripts build”,
“lint”: “ionic-app-scripts lint”
},
“dependencies”: {
@angular/animations”: “5.2.11”,
@angular/common”: “5.2.11”,
@angular/compiler”: “5.2.11”,
@angular/compiler-cli”: “5.2.11”,
@angular/core”: “5.2.11”,
@angular/forms”: “5.2.11”,
@angular/http”: “5.2.11”,
@angular/platform-browser”: “5.2.11”,
@angular/platform-browser-dynamic”: “5.2.11”,
@ionic-native/core”: “~4.11.0”,
@ionic-native/splash-screen”: “~4.11.0”,
@ionic-native/status-bar”: “~4.11.0”,
@ionic/storage”: “2.1.3”,
“cordova-android”: “7.0.0”,
“cordova-plugin-device”: “^2.0.2”,
“cordova-plugin-ionic-keyboard”: “^2.1.2”,
“cordova-plugin-ionic-webview”: “^2.0.3”,
“cordova-plugin-splashscreen”: “^5.0.2”,
“cordova-plugin-whitelist”: “^1.3.3”,
“ionic-angular”: “3.9.2”,
“ionicons”: “3.0.0”,
“rxjs”: “5.5.11”,
“sw-toolbox”: “3.6.0”,
“zone.js”: “0.8.26”
},
“devDependencies”: {
@ionic/app-scripts”: “3.1.11”,
“typescript”: “~2.6.2”
},
“description”: “An Ionic project”,
“cordova”: {
“plugins”: {
“cordova-plugin-whitelist”: {},
“cordova-plugin-device”: {},
“cordova-plugin-splashscreen”: {},
“cordova-plugin-ionic-webview”: {},
“cordova-plugin-ionic-keyboard”: {}
},
“platforms”: [
“android”
]
}
}

This haven’t occurred before :frowning:

What Android version is your device running on?
Is it supported by “cordova-plugin-ionic-webview”: “^2.0.3”,?

In config.xml, “cordova-plugin-ionic-webview” is “^2.0.0” and minimum android SDK version is 16.
<preference name=“android-minSdkVersion” value=“16” />

In package.json, its as “cordova-plugin-ionic-webview”: “^2.0.3” in dependencies.

How can I know which webview supports this?

Google for " cordova-plugin-ionic-webview", first result:

Requirements

  • iOS : iOS 10+ and cordova-ios 4+
  • Android : Android 5.0+ and cordova-android 6.4+

PS: Nothing of what you posted answered my question of what Android version is running that device.

Oh apologies, Android Version is 4.1.

I have tried these commands:

cordova plugin rm cordova-plugin-ionic-webview
cordova plugin add cordova-plugin-ionic-webview@latest

with Android Version (4.1, 4.4.2), cordova-android 7.0.0 but still the same.

… which means it will not work with cordova-plugin-ionic-webview 2.x and …

this is to be expected as the latest version of this plugin only works with Android 5+.

But my devices are of Android version < 5.

Which ionic version then I can use to solve this issue? Please help with this… as I have already spent days on it. I have tried with Ionic CLI 4 and Ionic CLI 3.19 too.

As I wrote (multiple times now) this has nothing to do with Ionic CLI, but with cordova-plugin-ionic-webview. You have to install an older version that supports those old Android versions.

Got it now! Thank you so much :slight_smile:

1 Like

cordova plugin add cordova-plugin-ionic-webview@1.1.9 and 1.1.19 working for me with Android version 4.4 and cordova 7.0.