Using the InAppBrowser plugin to open files from a URL

Ionic Framework ionic-v3
1

I’m trying to use the InAppBrowser plugin to provide an “open attachment” type functionality where a user views a document that may contain links to files (.doc or .pdf) or images (.png). These will be in the form of URL’s i.e they are not local files on the device. I’d like the user to be able to click on any file and have it open up immediately - without requesting that the file be downloaded (and then opened).

This seems to work iOS but I am having no luck on Android - I can only get the InAppBrowser to open a window and at the bottom of the screen you get a “Do You Want To Download this file” prompt.

Is this a limitation in Android that I won’t be able to get around? Does it simply depend on what apps the user has installed on their phone (e.g PDF viewer or whatever)

Would I need to use the File and File-Opener plugins for this instead of the InAppBrowser plugin? (I didn’t want the user to actually download the file unless they requested to do so)

2

The InAppBrowser is “just” another WebView that loads whatever URLs you throw at it - so from your description I would say that Android just doesn’t know how to display the content and so offers to download it.

What happens in a normal browser, do the documents get displayed as you want?

3

Using window.open you mean? Actually, when I tried that I just got an empty window. I was looking at InAppBrowser plugin so I could control the UI a bit - back button etc.

I just tried some tests in gmail in Chrome. If I send an e-mail and paste in a link to a png file and also attach a png file using the file attach option, the result is very different for each: when you open that e-mail up - the link prompts you to download the file (the exact same thing I am getting in my Ionic app) - the file attachment appears as a thumbnail preview type thing and when you click on it, the image is opened (in what I guess is the desktop browser’s built in image viewer?) .

I suppose what I would like to do in the Ionic app is to mimic what gmail does when it displays a file attachment? Is that possible?

4

No, upload a plain html file to your webserver that link to the files on a webserver - then click on them after opening the page in the browser.

That is functionality of Gmail - not relevant for your case.

That is some server side logic that does stuff with the URL, handles it and then return HTML with the image etc.

5

So to view a PDF file from a URL the InAppBrowser using the system browser causes two annoying prompts for each PDF the user wants to view from this app listing of PDFs. How can we avoid that?

Here is a sample of the screenshots of the two prompts
image

image
image.png447×776 124 KB

I get the 1st snapshot but NOT the second with the Chrome browser if I directly paste a URL to a PDF.

Is there a way to make the system browser automatically display a PDF?
Thank you.
Here is the code behind …

    //
    options : InAppBrowserOptions = {
        location : 'yes',//Or 'no' 
        hidden : 'no', //Or  'yes'
        clearcache : 'yes',
        clearsessioncache : 'yes',
        zoom : 'yes',//Android only ,shows browser zoom controls 
        hardwareback : 'yes',
        mediaPlaybackRequiresUserAction : 'no',
        shouldPauseOnSuspend : 'no', //Android only 
        closebuttoncaption : 'Close', //iOS only
        disallowoverscroll : 'no', //iOS only 
        toolbar : 'yes', //iOS only 
        enableViewportScale : 'no', //iOS only 
        allowInlineMediaPlayback : 'no',//iOS only 
        presentationstyle : 'pagesheet',//iOS only 
        fullscreen : 'yes',//Windows only    
    };
    // https://www.joshmorony.com/using-cordova-plugins-in-ionic-2-with-ionic-native/
    // http://ionicframework.com/docs/v2/native/inappbrowser/
    // https://ionicframework.com/docs/native/in-app-browser/
    // 20170302
    OpenPDFviaInAppBrowser(URL) {        
        // var ref =  cordova.InAppBrowser.open(URL, '_blank', 'location=yes');
        // let browser = new InAppBrowser(URL, '_blank', 'location=yes');
        let browserInst = new InAppBrowser();
        // let browserInst = this.InAppBrowser
        // the following causes the same browser window to be reused for subsequent invocations.
        // _blank _self _system
        // let browser = browserInst.create(URL, '_blank', {location:'yes'})
        let browser = browserInst.create(URL, '_system', this.options)
        // browser.show();
    }