Ionic V6 - In app Browser doesn't open and doesn't show an error

[GabrielQSchicora]

I'm developing an APP using Ionic V6 with Angular and Cordova, but I'm having a problem using the In App Browser, when I use the app on the computer (ionic serve) it works fine, but when I test it on the phone (ionic cordova run android) the button that should open the web page does not work, there is simply no action in the app, nor does it show an error in the console.

I'm following this documentation: https://ionicframework.com/docs/native/in-app-browser

I've already used In App Browser in other apps, but with the older ionic and using this documentation: https://ionicframework.com/docs/v3/native/in-app-browser/ (which doesn't work in my app with ionic v6)

Running the ionic info command, I have this data:

Ionic:

   Ionic CLI                     : 6.16.3 (C:\Users\Gabri\AppData\Roaming\nvm\v14.17.0\node_modules\@ionic\cli)
   Ionic Framework               : @ionic/angular 6.1.0
   @angular-devkit/build-angular : 13.2.6
   @angular-devkit/schematics    : 13.2.6
   @angular/cli                  : 13.2.6
   @ionic/angular-toolkit        : 6.1.0

Cordova:

   Cordova CLI       : 10.0.0
   Cordova Platforms : android 9.1.0
   Cordova Plugins   : cordova-plugin-ionic-keyboard 2.2.0, cordova-plugin-ionic-webview 5.0.0, (and 4 other plugins)

Utility:

   cordova-res (update available: 0.15.4) : 0.15.3
   native-run (update available: 1.6.0)   : 1.4.0

System:

   Android SDK Tools : 26.1.1 (C:\Android\android-sdk)
   NodeJS            : v14.17.0 (C:\Program Files\nodejs\node.exe)
   npm               : 6.14.13
   OS                : Windows 10

In the code I use the following import:

import { InAppBrowser } from '@awesome-cordova-plugins/in-app-browser/ngx';

The construtor:

constructor(private iab: InAppBrowser) {}

And the function that opens the browser:

abrirProvaOuGabarito(arquivo: string) {
  this.iab.create(this.servidorCaminhoBase + arquivo, '_system');
}

The generated link would be for example this: https://plataforma.aerosafeead.com.br/Uploads/simulados/prova-1653513297.pdf

I also tested with a google link, with HTTP and HTTPS, I also tried replacing _system with _blank or leaving nothing, I also tried opening the page with window.open() and putting a simple link in the HTML (< a href=""></a>), I tested it on two different phones, but the result is always the same.

In my package.json the imports are these:

"@awesome-cordova-plugins/core": "^5.41.0",
"@awesome-cordova-plugins/in-app-browser": "^5.43.0",

InAppBrowser is in my app.module.ts providers

And in my config.xml I just added the <allow-navigation href="*" /> different from what comes by default, I don't know if it interferes, but I used it because I run youtube videos in my app.

I've looked in several places and no solution solved, I don't know what else to change.

[RajibGanguly014]

Did you solved that problem ? I have similar problem but did not found any solution.

[shukrimint]

The error is caused by cordova-android 9.

You can fix this by upgrading your cordova-android version.

1. Remove the current android platform - ionic cordova platform rm android
2. Add a new cordova-android 10 - ionic cordova platform add android@10.1

That should fix the issue.

[cegasol2018]

I have the same issue, and I already have cordova-android 10.1 . Is there any update regarding this?

[cgutierrez365]

I am running on cordova-android 11 and have the same issue on my ionic cordova app when trying to view the PDF from my Android 13 phone. It works fine on iOS though, so I believe it is specifically an Android issue in the open function of this plugin.

The good news is that I discovered that the Android version works fine if I pass in a web URL instead of a URL to a PDF. It must be that this plugin isn't well suited to processing links to PDFs since they are non-standard web pages.

Maybe someone can investigate the Android source code for the open function and make a pull request. Either that or we need to use a different plugin for opening links to PDFs.

[crossan007]

I had a similar problem with using @awesome-cordova-plugins/in-app-browser in my Ionic Capacitor app.

It would open the native device browser outside of the app.

It was a silly misunderstanding on my part: "@awesome-cordova-plugins/in-app-browser" is just a TypeScript wrapper for cordova-plugin-inappbrowser so I had to npm i --save cordova-plugin-inappbrowser

The official docs for@awesome-cordova-plugins (https://danielsogl.gitbook.io/awesome-cordova-plugins/in-app-browser) indicates running these commands to install it:

$ ionic cordova plugin add cordova-plugin-inappbrowser
$ npm install @awesome-cordova-plugins/in-app-browser

However, when using Capacitor, the cordova plugin add command is rejected:

[ERROR] Refusing to run ionic cordova plugin inside a Capacitor project.

        In Capacitor projects, Cordova plugins are just regular npm dependencies.

        - To add a plugin, use npm i cordova-plugin-inappbrowser
        - To remove, use npm uninstall cordova-plugin-inappbrowser

This is because Capacitor just uses npm dependencies + cap sync to manage plugins.