Menu
I'm working on a project where I make much use of the InAppBrowser to view different documents (PDF, DOC, DOCX). I do this with the help 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 an empty white screen, and I have to press the back button to close the InAppBrowser and then re-open it to show the document.
When remotely debugging this strange behavior in Chrome developer tools I see that the loadstart and loadstop events are called appropriately:
When i look at the HTML in the empty/white InAppBrowser i see empty <body>-tags:
The code im using to open the 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 info:
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 resolve this?
701
you are using one of the way to open the doc's in Android's web view
Solution-1: your current webview you can modifiy like below:
encodeURI('https://docs.google.com/gview?embedded=true&url=http://www.your-server.com/files/your_file.pdf')
encode complete url including https://docs.google.com
here is another way to load the url:
http://docs.google.com/viewer?url=http://example.com/example.pdf
if any of this solutions doesn't works out , then try to download the file and open it in browser.
50
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
