White Screen with Ionic Webview Iframe

Ionic Framework ionic-v3
1

i am using Ionic 3 and webview on my App project, All are working fine on iOS but it is not working on Android, the problem is when I press the next button it will come to white screen on Android Webview Iframe.

  1. Here my Ionic info

Ionic:

  • Ionic CLI : 5.2.3 (/usr/local/lib/node_modules/ionic)
  • Ionic Framework : ionic-angular 3.9.2
  • @ionic/app-scripts : 3.2.4

Cordova:

  • Cordova CLI : 9.0.0 (cordova-lib@9.0.1)
  • Cordova Platforms : android 8.0.0, browser 6.0.0, ios 4.5.5
  • Cordova Plugins : cordova-plugin-ionic-keyboard 2.0.5, cordova-plugin-ionic-webview 4.1.1, (and 14 other plugins)

Utility:

  • cordova-res : 0.6.0
  • native-run : 0.2.5 (update available: 0.2.8)

System:

  • Android SDK Tools : 26.1.1
  • ios-deploy : 1.9.4
  • NodeJS : v8.16.0
  • npm : 6.4.1
  • OS : macOS Mojave
  • Xcode : Xcode 10.3 Build version 10G8
  1. Here my Cordova plugins list
  • cordova-plugin-app-name 1.0.4 “App Namer”
  • cordova-plugin-file 6.0.1 “File”
  • cordova-plugin-file-transfer 1.7.1 “File Transfer”
  • cordova-plugin-google-analytics 1.8.6 “Google Universal Analytics Plugin”
  • cordova-plugin-inappbrowser 3.0.0 “InAppBrowser”
  • cordova-plugin-ionic-keyboard 2.0.5 “cordova-plugin-ionic-keyboard”
  • cordova-plugin-ionic-webview 4.1.1 “cordova-plugin-ionic-webview”
  • cordova-plugin-network-information 2.0.1 “Network Information”
  • cordova-plugin-screen-orientation 3.0.1 “Screen Orientation”
  • cordova-plugin-splashscreen 5.0.2 “Splashscreen”
  • cordova-plugin-statusbar 2.4.2 “StatusBar”
  • cordova-plugin-whitelist 1.3.3 “Whitelist”
  • cordova-plugin-x-toast 2.7.0 “Toast”
  • cordova-plugin-zip 3.1.0 “cordova-plugin-zip”
  • cordova-sqlite-storage 3.2.1 “Cordova sqlite storage plugin - cordova-sqlite-storage plugin version”
  • cordova-unique-device-id 1.3.2 “UniqueDeviceID”
  • es6-promise-plugin 4.2.2 “Promise”
  1. Here my Code

Home.ts

import { Platform, NavController } from 'ionic-angular';
import { Component } from '@angular/core';
import { ServicesProvider } from '../../providers/services/services';

let win: any = window;

@Component({
    selector: 'page-home',
    templateUrl: 'home.html'
})
export class HomePage {
    url: string = "";

    constructor(public platform: Platform, public navCtrl: NavController, public Services: ServicesProvider) {
        this.platform.ready().then(() => {
        if(this.platform.is('cordova')) {
            this.url = this.Services.getStorageDirectory();
            this.url = win.Ionic.WebView.convertFileSrc(this.url) + "/index.html";
        }
        })
    }
}

home.html

<iframe [src]="url | safe" name="trustResourceURL" frameborder="0" scrolling="no" onload="this.style.visibility='visible';"></iframe>

safe.ts

import { Pipe, PipeTransform } from '@angular/core';
import { DomSanitizer } from '@angular/platform-browser';

@Pipe({
    name: 'safe',
})
export class SafePipe implements PipeTransform {
    constructor(private sanitizer: DomSanitizer) {}
    transform(url) {
        return this.sanitizer.bypassSecurityTrustResourceUrl(url);
    }
}

I hope some one can help me figure out where the issue is.

2

While the white screen You try tapping the screen a couple of times. It will show you the webpage.