apache / apache/cordova-plugin-inappbrowser

Route change in angular webapp cannot detect using ionic 4 Inapp browser

Open
#727 9 comments 0 reactions 0 assignees View on GitHub
Dominant language
Java
Stars
1.1k
Forks
2.2k
PR merge metrics
No merged PRs in 30d

Description

# Bug Report

## Problem

Cannot detect route (url change)change of angular webapp using inappbrowser. i have to close inappbrowser when url changing.but change cannot detect. its alaways showing the same url i passed.

### What is expected to happen?

Have to close Inapp browser when url changing in angular web app.

### What does actually happen?

Url not changing

## Information

Ionic 4 Inapp browser

### Command or Code

var options = "location=no,toolbar=yes";
const browser = this.iab.create('my url', '_blank', options);
browser.on('loadstart').subscribe((event) => {

var reg = "login";
if (event.url.toString().includes('login/') && !event.url.toString().toLowerCase().includes(reg.toLowerCase())) {
browser.close();
this.navctrl.navigateRoot('/auth');
}
});

### Environment, Platform, Device

### Version information

package.json

```
{
"name": "visipal",
"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/http": "^7.2.15",
"@angular/platform-browser": "^8.2.14",
"@angular/platform-browser-dynamic": "^8.2.14",
"@angular/router": "^8.2.14",
"@capacitor/cli": "^1.0.0-beta.25",
"@capacitor/core": "^1.0.0-beta.25",
"@ionic-native/app-version": "^5.19.1",
"@ionic-native/call-number": "^5.19.1",
"@ionic-native/camera": "^5.19.1",
"@ionic-native/core": "^5.19.1",
"@ionic-native/date-picker": "^5.19.1",
"@ionic-native/email-composer": "^5.19.1",
"@ionic-native/file": "^5.19.1",
"@ionic-native/geolocation": "^5.24.0",
"@ionic-native/globalization": "^5.19.1",
"@ionic-native/google-maps": "^5.5.0",
"@ionic-native/in-app-browser": "^5.19.1",
"@ionic-native/keyboard": "^5.19.1",
"@ionic-native/launch-navigator": "^5.23.0",
"@ionic-native/local-notifications": "^5.19.1",
"@ionic-native/native-geocoder": "^5.19.1",
"@ionic-native/native-storage": "^5.19.1",
"@ionic-native/network": "^5.19.1",
"@ionic-native/splash-screen": "^5.19.1",
"@ionic-native/sqlite": "^5.19.1",
"@ionic-native/status-bar": "^5.19.1",
"@ionic-native/toast": "^5.19.1",
"@ionic/angular": "^4.11.5",
"@ionic/storage": "^2.2.0",
"@mauron85/cordova-plugin-background-geolocation": "^3.1.0",
"@types/hammerjs": "^2.0.36",
"call-number": "^1.0.1",
"cordova-android": "^8.1.0",
"cordova-android-support-gradle-release": "^3.0.1",
"cordova-ios": "^5.1.1",
"cordova-plugin-actionsheet": "^2.3.3",
"cordova-plugin-add-swift-support": "^2.0.2",
"cordova-plugin-app-version": "^0.1.9",
"cordova-plugin-badge": "^0.8.8",
"cordova-plugin-camera": "^4.1.0",
"cordova-plugin-datepicker": "^0.9.3",
"cordova-plugin-device": "^2.0.3",
"cordova-plugin-dialogs": "^2.0.2",
"cordova-plugin-email-composer": "^0.9.2",
"cordova-plugin-file": "^6.0.2",
"cordova-plugin-geolocation": "^4.0.2",
"cordova-plugin-globalization": "^1.11.0",
"cordova-plugin-googlemaps": "git+https://github.com/mapsplugin/cordova-plugin-googlemaps.git#multiple_maps",
"cordova-plugin-googlemaps-sdk": "git+https://github.com/mapsplugin/cordova-plugin-googlemaps-sdk.git",
"cordova-plugin-inappbrowser": "^3.1.0",
"cordova-plugin-ionic-keyboard": "^2.2.0",
"cordova-plugin-ionic-webview": "^4.1.3",
"cordova-plugin-local-notification": "^0.9.0-beta.2",
"cordova-plugin-nativegeocoder": "^3.2.2",
"cordova-plugin-nativestorage": "^2.3.2",
"cordova-plugin-network-information": "^2.0.2",
"cordova-plugin-splashscreen": "^5.0.3",
"cordova-plugin-statusbar": "^2.4.3",
"cordova-plugin-whitelist": "^1.3.4",
"cordova-plugin-x-toast": "^2.7.2",
"cordova-sqlite-storage": "^3.4.1",
"core-js": "^2.5.4",
"hammerjs": "^2.0.8",
"ionic-angular": "^3.9.9",
"ionic-long-press": "^2.0.1",
"ionic-swipe-all": "^2.0.0",
"ionic2-calendar": "^0.5.7",
"moment": "^2.24.0",
"mx.ferreyra.callnumber": "0.0.2",
"rxjs": "^6.5.4",
"rxjs-compat": "^6.5.4",
"tslib": "^1.9.0",
"uk.co.workingedge.phonegap.plugin.launchnavigator": "^5.0.4",
"zone.js": "~0.9.1"
},
"devDependencies": {
"@angular-devkit/architect": "^0.803.19",
"@angular-devkit/build-angular": "^0.803.24",
"@angular-devkit/core": "^8.3.19",
"@angular-devkit/schematics": "^8.3.19",
"@angular/cli": "~8.3.19",
"@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": "~2.8.8",
"@types/jasminewd2": "~2.0.3",
"@types/node": "~12.0.0",
"codelyzer": "~4.5.0",
"jasmine-core": "~2.99.1",
"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": "~1.1.2",
"karma-jasmine-html-reporter": "^0.2.2",
"protractor": "~5.4.0",
"ts-node": "~8.1.0",
"tslint": "~5.16.0",
"typescript": "~3.5.3"
},
"description": "An Ionic project",
"cordova": {
"plugins": {
"cordova-plugin-whitelist": {},
"cordova-plugin-statusbar": {},
"cordova-plugin-device": {},
"cordova-plugin-splashscreen": {},
"cordova-plugin-ionic-webview": {
"ANDROID_SUPPORT_ANNOTATIONS_VERSION": "27.+"
},
"cordova-plugin-ionic-keyboard": {},
"cordova-plugin-x-toast": {},
"cordova-plugin-globalization": {},
"cordova-plugin-nativestorage": {},
"cordova-sqlite-storage": {},
"cordova-plugin-network-information": {},
"mx.ferreyra.callnumber": {},
"cordova-plugin-camera": {
"ANDROID_SUPPORT_V4_VERSION": "27.+"
},
"cordova-plugin-email-composer": {
"ANDROID_SUPPORT_V4_VERSION": "27.+"
},
"cordova-plugin-inappbrowser": {},
"cordova-plugin-app-version": {},
"cordova-plugin-datepicker": {},
"cordova-plugin-nativegeocoder": {
"LOCATION_WHEN_IN_USE_DESCRIPTION": "Use geocoder service"
},
"call-number": {},
"cordova-plugin-file": {},
"cordova-plugin-googlemaps": {},
"uk.co.workingedge.phonegap.plugin.launchnavigator": {
"GOOGLE_API_KEY_FOR_ANDROID": "",
"OKHTTP_VERSION": "3.12.0",
"LOCATION_USAGE_DESCRIPTION": "This app requires access to your location for navigation purposes"
},
"cordova-plugin-background-geolocation": {
"GOOGLE_PLAY_SERVICES_VERSION": "11+",
"ANDROID_SUPPORT_LIBRARY_VERSION": "26+",
"ICON": "@mipmap/icon",
"SMALL_ICON": "@mipmap/icon",
"ACCOUNT_NAME": "@string/app_name",
"ACCOUNT_LABEL": "@string/app_name",
"ACCOUNT_TYPE": "$PACKAGE_NAME.account",
"CONTENT_AUTHORITY": "$PACKAGE_NAME",
"ALWAYS_USAGE_DESCRIPTION": "This app always requires location tracking",
"MOTION_USAGE_DESCRIPTION": "This app requires motion detection"
},
"cordova-android-support-gradle-release": {
"ANDROID_SUPPORT_VERSION": "27.+"
},
"cordova-plugin-geolocation": {}
},
"platforms": [
"android",
"ios"
]
}
}
```

## Checklist

- [ ] I searched for existing GitHub issues
- [ ] I updated all Cordova tooling to most recent version
- [ ] I included all the necessary information above

Contributor guide

Open the contributing guide

Research direction

Start by reviewing the reported `browser.on('loadstart')` handler and the listed Ionic, Angular, and Cordova InAppBrowser versions. Try to reproduce the URL-change behavior with the example, noting that no platform or device details are provided. Done means establishing whether URL changes are detected and whether the reported close-and-navigate behavior can be achieved.

Written by the indexing model from the issue text.

Assessment

Tech stack
angular, typescript
Domain
mobile-dev
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
25/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.