Im working on a project where I use InAppBrowser to view different documents (PDF, DOC, DOCX). I do this with och docs.google.com and the documents are stored in firebase-storage . Most of the time it works great on my Android device! But sometimes, all I get is a blank white screen, and I have to click the back button to close InAppBrowser and then open it again to display the document.
When debugging this strange behavior remotely in the Chrome developer tools, I see that the loadstart and loadstop events are loadstart accordingly:
When I look at HTML in an empty / white InAppBrowser , I see empty <body> -tags:
The im code used to open InAppBrowser :
import { Injectable } from '@angular/core'; import { Platform } from 'ionic-angular'; import { InAppBrowser, InAppBrowserObject } from '@ionic-native/in-app-browser'; import { ScreenOrientation } from '@ionic-native/screen-orientation'; import { LoaderService } from './loader-service'; import * as firebase from 'firebase'; @Injectable() export class FirebaseStorageService{ browserOptions: string; browser: InAppBrowserObject; constructor( private iab: InAppBrowser, private loaderService:LoaderService, private platform: Platform, private screenOrientation: ScreenOrientation ){ this.browserOptions = 'zoom=no,location=no,useWideViewPort=no,hidden=yes,enableViewportScale=yes'; } viewPdf(path: string, loadText?:string):Promise<any>{ this.showLoader(loadText); return new Promise<any>((resolve, reject) => { firebase.storage().ref().child(path).getDownloadURL().then(url => { let newURL = 'https://docs.google.com/gview?&url=' + encodeURIComponent(url); this.startBrowser(newURL); resolve(); }) .catch(err => { if(this.platform.is('cordova')){ this.loaderService.dismissLoader(); } reject(err); }); }) } private startBrowser(path:string):void{ this.browser = this.iab.create(path, '_blank', this.browserOptions); if(this.platform.is('cordova')){ this.handleBrowserSubscriptions(); this.screenOrientation.unlock(); } } private handleBrowserSubscriptions():void{ let stopSub = this.browser.on('loadstop').subscribe(event => { console.log('loadstop', event) this.loaderService.dismissLoader(); this.browser.show(); stopSub.unsubscribe(); errorSub.unsubscribe(); }); let exitSub = this.browser.on('exit').subscribe(event => { console.log('exit:',event) this.loaderService.dismissLoader(); exitSub.unsubscribe(); this.browser.close(); this.screenOrientation.lock(this.screenOrientation.ORIENTATIONS.PORTRAIT); }); let errorSub = this.browser.on('loaderror').subscribe(event => { console.log('loaderror', event) this.loaderService.dismissLoader(); this.browser.close(); this.screenOrientation.lock(this.screenOrientation.ORIENTATIONS.PORTRAIT); stopSub.unsubscribe(); errorSub.unsubscribe(); }); let startSub = this.browser.on('loadstart').subscribe(event => { console.log('loadstart', event); }) } }
Ionic Information: Cordova CLI: 7.0.1 Ionic Framework Version: 3.2.0 Ionic CLI Version: 2.2.1 Ionic App Lib Version: 2.2.0 Ionic App Scripts Version: 1.3.7 ios-deploy version: Not installed ios-sim version: Not installed OS: Windows 10 Node Version: v6.9.4 Xcode version: Not installed
Has anyone else experienced this, or does anyone know how to solve this?