InAppBrowser crash the application: the application stopped

Ionic Framework ionic-v3
1

Hi.

I’m trying to use InAppBrowser fromm ionic-nativ in my Ionic 2 RC5 app, but when I open a link in Android device the application crash, showing the error message “the application stopped”. I don’t know what can I do. I can’t find any resolution.
Someone else got this error? On iOS works pretty well.

import { InAppBrowser } from 'ionic-native';
let browser = new InAppBrowser(encodeURI('http://' + url), '_system');
browser.show();

My config.xml

<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
<widget android-versionCode="13" id="br.com.senior.hcm" version="0.0.6" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
  <name>HCM</name>
  <description>HCM Senior</description>
  <author email="douglas.gelsleichter@senior.com.br" href="senior.com.br"/>
  <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:*"/>
  <allow-navigation href="http://*/*"/>
  <platform name="android">
    <allow-intent href="market:*"/>
    <icon src="resources\android\icon\drawable-ldpi-icon.png" density="ldpi"/>
    <icon src="resources\android\icon\drawable-mdpi-icon.png" density="mdpi"/>
    <icon src="resources\android\icon\drawable-hdpi-icon.png" density="hdpi"/>
    <icon src="resources\android\icon\drawable-xhdpi-icon.png" density="xhdpi"/>
    <icon src="resources\android\icon\drawable-xxhdpi-icon.png" density="xxhdpi"/>
    <icon src="resources\android\icon\drawable-xxxhdpi-icon.png" density="xxxhdpi"/>
    <splash src="resources\android\splash\drawable-port-ldpi-screen.png" density="port-ldpi"/>
    <splash src="resources\android\splash\drawable-port-mdpi-screen.png" density="port-mdpi"/>
    <splash src="resources\android\splash\drawable-port-hdpi-screen.png" density="port-hdpi"/>
    <splash src="resources\android\splash\drawable-port-xhdpi-screen.png" density="port-xhdpi"/>
    <splash src="resources\android\splash\drawable-port-xxhdpi-screen.png" density="port-xxhdpi"/>
    <splash src="resources\android\splash\drawable-port-xxxhdpi-screen.png" density="port-xxxhdpi"/>
  </platform>
  <platform name="ios">
    <allow-intent href="itms:*"/>
    <allow-intent href="itms-apps:*"/>
    <config-file mode="add" parent="ITSAppUsesNonExemptEncryption" target="*-Info.plist">
      <false/>
    </config-file>
    <icon src="resources\ios\icon\icon.png" width="57" height="57"/>
    <icon src="resources\ios\icon\icon@2x.png" width="114" height="114"/>
    <icon src="resources\ios\icon\icon-40.png" width="40" height="40"/>
    <icon src="resources\ios\icon\icon-40@2x.png" width="80" height="80"/>
    <icon src="resources\ios\icon\icon-40@3x.png" width="120" height="120"/>
    <icon src="resources\ios\icon\icon-50.png" width="50" height="50"/>
    <icon src="resources\ios\icon\icon-50@2x.png" width="100" height="100"/>
    <icon src="resources\ios\icon\icon-60.png" width="60" height="60"/>
    <icon src="resources\ios\icon\icon-60@2x.png" width="120" height="120"/>
    <icon src="resources\ios\icon\icon-60@3x.png" width="180" height="180"/>
    <icon src="resources\ios\icon\icon-72.png" width="72" height="72"/>
    <icon src="resources\ios\icon\icon-72@2x.png" width="144" height="144"/>
    <icon src="resources\ios\icon\icon-76.png" width="76" height="76"/>
    <icon src="resources\ios\icon\icon-76@2x.png" width="152" height="152"/>
    <icon src="resources\ios\icon\icon-83.5@2x.png" width="167" height="167"/>
    <icon src="resources\ios\icon\icon-small.png" width="29" height="29"/>
    <icon src="resources\ios\icon\icon-small@2x.png" width="58" height="58"/>
    <icon src="resources\ios\icon\icon-small@3x.png" width="87" height="87"/>
    <splash src="resources\ios\splash\Default-568h@2x~iphone.png" width="640" height="1136"/>
    <splash src="resources\ios\splash\Default-667h.png" width="750" height="1334"/>
    <splash src="resources\ios\splash\Default-736h.png" width="1242" height="2208"/>
    <splash src="resources\ios\splash\Default-Portrait@2x~ipad.png" width="1536" height="2048"/>
    <splash src="resources\ios\splash\Default-Portrait~ipad.png" width="768" height="1024"/>
    <splash src="resources\ios\splash\Default@2x~iphone.png" width="640" height="960"/>
    <splash src="resources\ios\splash\Default~iphone.png" width="320" height="480"/>
  </platform>
  <preference name="loadUrlTimeoutValue" value="700000" />
  <preference name="webviewbounce" value="false"/>
  <preference name="windows-target-version" value="10.0"/>
  <preference name="UIWebViewBounce" value="false"/>
  <preference name="DisallowOverscroll" value="true"/>
  <preference name="android-minSdkVersion" value="16"/>
  <preference name="BackupWebStorage" value="none"/>
  <preference name="SplashScreen" value="screen"/>
  <preference name="orientation" value="portrait"/>
  <preference name="SplashScreenDelay" value="2000"/>
  <preference name="AutoHideSplashScreen" value="false"/>
  <preference name="SplashShowOnlyFirstTime" value="false"/>
  <preference name="FadeSplashScreen" value="true"/>
  <preference name="FadeSplashScreenDuration" value="500"/>
  <preference name="ShowSplashScreenSpinner" value="false"/>
  <preference name="xwalkVersion" value="22+"/>
  <preference name="xwalkCommandLine" value="--disable-pull-to-refresh-effect"/>
  <preference name="xwalkMode" value="embedded"/>
  <preference name="xwalkMultipleApk" value="true"/>
  <preference name="SplashMaintainAspectRatio" value="true"/>
  <feature name="SplashScreen">
    <param name="android-package" value="org.apache.cordova.splashscreen.SplashScreen"/>
  </feature>
  <feature name="StatusBar">
    <param name="ios-package" onload="true" value="CDVStatusBar"/>
  </feature>
  <plugin name="cordova-plugin-inappbrowser" spec="1.6.1"/>
  <plugin name="ionic-plugin-keyboard" spec="~2.2.1"/>
  <plugin name="cordova-plugin-whitelist" spec="1.3.1"/>
  <plugin name="cordova-plugin-console" spec="1.0.5"/>
  <plugin name="cordova-plugin-statusbar" spec="2.2.1"/>
  <plugin name="cordova-plugin-device" spec="1.1.4"/>
  <plugin name="cordova-plugin-crosswalk-webview" spec="~2.2.0">
    <variable name="XWALK_VERSION" value="22+"/>
    <variable name="XWALK_LITEVERSION" value="xwalk_core_library_canary:17+"/>
    <variable name="XWALK_COMMANDLINE" value="--disable-pull-to-refresh-effect"/>
    <variable name="XWALK_MODE" value="embedded"/>
    <variable name="XWALK_MULTIPLEAPK" value="true"/>
  </plugin>
  <plugin name="cordova-plugin-splashscreen" spec="~4.0.1"/>
  <plugin name="cordova-plugin-google-analytics" spec="~1.0.0"/>
  <plugin name="cordova-plugin-camera" spec="~2.2.0"/>
  <plugin name="cordova-custom-config" spec="~2.0.3"/>
  <engine name="ios" spec="4.3.1"/>
  <engine name="android" spec="6.1.1"/>
  <icon src="resources\android\icon\drawable-xhdpi-icon.png"/>
</widget>

My package.json file:

{
  "name": "hcm",
  "description": "HCM Senior",
  "author": "Senior",
  "homepage": "http://senior.com.br/",
  "private": true,
  "scripts": {
    "build": "ionic-app-scripts build",
    "clean": "ionic-app-scripts clean",
    "ionic:build": "ionic-app-scripts build",
    "ionic:serve": "ionic-app-scripts serve",
    "android": "concurrently \"gulp \"config\" \"--env\" \"dev\" \"--noproxy\"\" \"ionic \"run\" \"android\"\"",
    "android:prod": "concurrently \"gulp \"config\" \"--env\" \"prod\" \"--noproxy\"\" \"ionic \"run\" \"android\"\"",
    "ios": "concurrently \"gulp \"config\" \"--env\" \"dev\" \"--noproxy\"\" \"ionic \"run\" \"ios\"\"",
    "ios:prod": "concurrently \"gulp \"config\" \"--env\" \"prod\" \"--noproxy\"\" \"ionic \"run\" \"ios\"\"",
    "test": "karma start karma.conf.js"
  },
  "dependencies": {
    "@angular/common": "2.1.1",
    "@angular/compiler": "2.1.1",
    "@angular/compiler-cli": "2.1.1",
    "@angular/core": "2.1.1",
    "@angular/forms": "2.1.1",
    "@angular/http": "2.1.1",
    "@angular/platform-browser": "2.1.1",
    "@angular/platform-browser-dynamic": "2.1.1",
    "@angular/platform-server": "2.1.1",
    "@ionic/storage": "1.1.6",
    "ionic-angular": "2.0.0-rc.5",
    "ionic-native": "2.2.11",
    "ionicons": "3.0.0",
    "moment": "2.14.1",
    "rxjs": "5.0.0-beta.12",
    "sw-toolbox": "3.4.0",
    "zone.js": "0.6.26"
  },
  "devDependencies": {
    "@ionic/app-scripts": "1.0.0",
    "typescript": "2.0.9",
    "concurrently": "^3.1.0",
    "jasmine-core": "2.5.2",
    "karma": "1.3.0",
    "karma-chrome-launcher": "2.0.0",
    "karma-jasmine": "1.1.0",
    "karma-typescript": "2.1.5",
    "//": [
      "Dependencias usadas para os scripts Gulp.",
      "Com a liberação do Ionic RC0, não deve mais ser usado Gulp nos projetos, porém não foi disponibilizada nenhuma",
      "alternativa para para troca de ambientes. Quando for liberada apagar as dependencias a seguir e o arquivo gulpfile.js."
    ],
    "gulp": "3.9.1",
    "gulp-rename": "1.2.2",
    "replace": "0.3.0"
  },
  "cordovaPlugins": [
    "cordova-plugin-inappbrowser@1.6.1",
    "ionic-plugin-keyboard@2.2.0",
    "cordova-plugin-whitelist@1.3.1",
    "cordova-plugin-console@1.0.5",
    "cordova-plugin-statusbar@2.2.1",
    "cordova-plugin-device@1.1.4",
    "cordova-plugin-crosswalk-webview@~2.2.0",
    "cordova-plugin-splashscreen@~4.0.1",
    "cordova-plugin-google-analytics@~1.0.0",
    "cordova-plugin-camera@~2.2.0",
    "cordova-custom-config@~2.0.3"
  ],
  "cordovaPlatforms": [
    "ios",
    "android@6.1.1"
  ]
}
2

Have you tried pointing it at the most basic of URLs? That would eliminate any rendering issue within the plugin.

Next, I would try removing Crosswalk and retesting. If no crashing occurs then you know it is Crosswalk that is the issue with that HTML. I would then contact that team to report the issue.

3

I can not solve this on android. It’s probrably an error on plugin.

4

Hi,
Have you found any solution?
On Android I got info about Application stopped, what’s more interesting system browser is opening up :confused:

import { Component } from '@angular/core';
import { ViewController, NavParams } from 'ionic-angular';
import { InAppBrowser } from 'ionic-native';

@Component({
  selector: 'outdated',
  templateUrl: 'outdated.html'
})
export class OutdatedAppModal {
  browser: InAppBrowser;
  url: string;

  constructor(
    public viewCtrl: ViewController,
    private navParams: NavParams
  ) {
    this.url = navParams.get('url');
  }

  openBrowser() {
    this.browser = new InAppBrowser(this.url, '_system');
    this.browser.show();
  }

  dismiss() {
    this.viewCtrl.dismiss();
  }
}

$ ionic info
Your system information:

Cordova CLI: 6.5.0 
Ionic Framework Version: 2.2.0
Ionic CLI Version: 2.2.2
Ionic App Lib Version: 2.2.1
Ionic App Scripts Version: 1.1.4
ios-deploy version: Not installed
ios-sim version: Not installed
OS: Linux 4.4
Node Version: v6.5.0
Xcode version: Not installed
5

No, unfortunately i didn’t.

But I found a “solution” opening with parameter “_blank”, who opens in the InAppBrowser, a embedded browser.

Check the docs for more info about it:

6

True with “_blank” works fine but, in my case, I must necessarily use a system browser…

Thanks anyway

UPDATE
Words will not describe how simple a solution was…
when you use _system browser no need to browser.show()

just

  openBrowser() {
    new InAppBrowser(this.url, '_system');
  }
16 Likes
7

This solution isn’y working for me in Ionic 2… says those params don’t match the call signature for InAppBrowser…

8

Just do it like this:

openInBrowser(url) {
    this.iab.create(url, '_system');
}
3 Likes
9

I am calling this.iab.create(url, '_system'); from my application and it opens the url in the system browser. Now, if i press the back button, the InAppBrowser closes but it also closes my application. How to simply just close the InAppBrowser and go back to my application?

1 Like
10

Then try this.iab.create(url, ‘_system’,‘location=yes,hardwareback=yes’);

11

This works on Ionic 4.10.1. Thank you!!

Ionic:

ionic (Ionic CLI) : 4.10.1 (C:\Users\JC\AppData\Roaming\npm\node_modules\ionic)
Ionic Framework : @ionic/angular 4.0.0-rc.0
@angular-devkit/build-angular : 0.13.0
@angular-devkit/schematics : 7.0.7
@angular/cli : 7.0.7
@ionic/angular-toolkit : 1.2.0

Cordova:

cordova (Cordova CLI) : not installed
Cordova Platforms : android 7.1.4, browser 5.0.4, ios 4.5.5
Cordova Plugins : cordova-plugin-ionic 5.2.7, cordova-plugin-ionic-keyboard 2.1.3, cordova-plugin-ionic-webview 2.3.1, (and 8 other plugins)

System:

NodeJS : v10.11.0 (C:\Program Files\nodejs\node.exe)
npm : 6.5.0
OS : Windows 10

1 Like
12

Thank you, you’re the man! :smiley:

13

how to show alert if system application is not existing in android mobile… i want to open just in system only. when i add this.iab.create(url, ‘_system’) this not responding. no errors and no callbacks.