iOS: newest version 4.2.0 not working together with InAppBrowser

[KuschL]

iOS: 4.2.0 not working together with cordova-plugin-inapprowser

Problem

Open the InAppBrowser with target "_blank" in an Ionic app on iOS is not working.

I tried the code below in a new Ionic project and can reproduce the issue.

What is expected to happen?

The InAppBrowser should open in a new view and show the given website.

What does actually happen?

The InAppBrowser opens in a new view and don't do anything. If I force version 4.1.3 of cordova-plugin-ionic-webview, the browser works as expected.

Command or Code

//page.ts
import {Component} from '@angular/core';
import {InAppBrowser} from "@ionic-native/in-app-browser/ngx";

@Component({
    selector: 'app-page',
    templateUrl: './page.html',
    styleUrls: ['./page.scss'],
})
export class Page {

    constructor(private iab: InAppBrowser) {}

    openBrowser() {
        const browser = this.iab.create('https://ionicframework.com/docs/components', '_blank')

        browser.on('beforeload').subscribe((e) => {
            console.log('beforeload', e)
        })

        browser.on('loadstart').subscribe((e) => {
            console.log('loadstart', e)
        })

        browser.on('loaderror').subscribe((e) => {
            console.log('loaderror', e)
        })

        browser.on('customscheme').subscribe((e) => {
            console.log('customscheme', e)
        })

        browser.on('loadstop').subscribe((e) => {
            console.log('loadstop', e)
        })

        browser.on('message').subscribe((e) => {
            console.log('message', e)
        })

        browser.on('exit').subscribe((e) => {
            console.log('exit', e)
        })
    }
}

//page.html
<ion-content>
    <ion-button (click)="openBrowser()">Open browser</ion-button>
</ion-content>

Environment, Platform, Device

Tested on any simulator and iPhone with newest iOS Version (13.4.1)

Version information

Ionic info:

Ionic:

   Ionic CLI                     : 6.6.0 (~/.nvm/versions/node/v13.2.0/lib/node_modules/@ionic/cli)
   Ionic Framework               : @ionic/angular 5.0.7
   @angular-devkit/build-angular : 0.803.26
   @angular-devkit/schematics    : 8.3.26
   @angular/cli                  : 8.3.26
   @ionic/angular-toolkit        : 2.2.0

Cordova:

   Cordova CLI       : 9.0.0 (cordova-lib@9.0.1)
   Cordova Platforms : ios 5.1.1
   Cordova Plugins   : cordova-plugin-ionic-keyboard 2.2.0, cordova-plugin-ionic-webview 4.2.0, (and 5 other plugins)

Utility:

   cordova-res : 0.12.1
   native-run  : 1.0.0

System:

   ios-deploy : 1.9.4
   ios-sim    : 8.0.2
   NodeJS     : v13.2.0 (~/.nvm/versions/node/v13.2.0/bin/node)
   npm        : 6.14.4
   OS         : macOS Catalina
   Xcode      : Xcode 11.4.1 Build version 11E503a

package.json:

{
  "name": "browser-test",
  "version": "0.0.1",
  "author": "Ionic Framework",
  "homepage": "https://ionicframework.com/",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/common": "~8.2.14",
    "@angular/core": "~8.2.14",
    "@angular/forms": "~8.2.14",
    "@angular/platform-browser": "~8.2.14",
    "@angular/platform-browser-dynamic": "~8.2.14",
    "@angular/router": "~8.2.14",
    "@ionic-native/core": "^5.0.7",
    "@ionic-native/in-app-browser": "^5.24.0",
    "@ionic-native/splash-screen": "^5.0.0",
    "@ionic-native/status-bar": "^5.0.0",
    "@ionic/angular": "^5.0.0",
    "cordova-ios": "5.1.1",
    "cordova-plugin-inappbrowser": "^3.2.0",
    "core-js": "^2.5.4",
    "native-run": "^1.0.0",
    "rxjs": "~6.5.1",
    "tslib": "^1.9.0",
    "zone.js": "~0.9.1"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.803.20",
    "@angular/cli": "~8.3.23",
    "@angular/compiler": "~8.2.14",
    "@angular/compiler-cli": "~8.2.14",
    "@angular/language-service": "~8.2.14",
    "@ionic/angular-toolkit": "^2.1.1",
    "@types/jasmine": "~3.3.8",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "~8.9.4",
    "codelyzer": "^5.0.0",
    "cordova-plugin-device": "^2.0.2",
    "cordova-plugin-ionic-keyboard": "^2.2.0",
    "cordova-plugin-ionic-webview": "^4.2.0",
    "cordova-plugin-splashscreen": "^5.0.2",
    "cordova-plugin-statusbar": "^2.4.2",
    "cordova-plugin-whitelist": "^1.3.3",
    "jasmine-core": "~3.4.0",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~4.1.0",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~2.0.1",
    "karma-jasmine": "~2.0.1",
    "karma-jasmine-html-reporter": "^1.4.0",
    "protractor": "~5.4.0",
    "ts-node": "~7.0.0",
    "tslint": "~5.15.0",
    "typescript": "~3.4.3"
  },
  "description": "An Ionic project",
  "cordova": {
    "plugins": {
      "cordova-plugin-whitelist": {},
      "cordova-plugin-statusbar": {},
      "cordova-plugin-device": {},
      "cordova-plugin-splashscreen": {},
      "cordova-plugin-ionic-webview": {},
      "cordova-plugin-ionic-keyboard": {},
      "cordova-plugin-inappbrowser": {}
    },
    "platforms": [
      "ios"
    ]
  }
}

[nadinejerome]

I am running into the same issue as well, and following the instructions on this page still result in a warning trigger from Apple

https://ionicframework.com/blog/understanding-itms-90809-uiwebview-api-deprecation/

[morrisonbrett]

Same issue here. I had to rollback to 4.1.3.

For the rollback, I previously had ^4.1.3 in my package.json. I had to change it to 4.1.3 (without the ^) to force it to properly install in package-lock.json.

[Ionitron]

🎉 This issue has been resolved in version 4.2.1 🎉

The release is available on:

• GitHub release
• npm package (@latest dist-tag)

Your semantic-release bot 📦🚀

[cassini-usman]

I am running into the same issue as well, and following the instructions on this page still result in a warning trigger from Apple

https://ionicframework.com/blog/understanding-itms-90809-uiwebview-api-deprecation/

To resolve warning, add this property usewkwebview: 'yes' to InAppBrowserOptions

[derweise]

I still have this issue in 5.0.0.
I do this.iab.create('https://www.google.com', '_blank', this.options);

but the app only shows a blank white view in ios emulator