Ionic: Intercept PDF URLs with cordova-plugin-inappbrowser

Question

I am building an Android/iOS Application with ionic 3, which simply consists of a webview by cordova-plugin-inappbrowser (version 3.0.0) and a responsive homepage. The homepage holds different links to websites as well as to (online) PDF files.

As I've learned, the webview in Android (I haven't tried iOS, yet) does not support opening PDF files. That's why I wanted to intercept the called URLs, and open them in some other way, if they end on '.pdf':

import { Component } from '@angular/core';
import {InAppBrowser, InAppBrowserObject, InAppBrowserOptions} from "@ionic-native/in-app-browser";

export class HomePage {

  options : InAppBrowserOptions = {
    location : 'no',//Or 'no'
    hidden : 'no', //Or  'yes'
    clearcache : 'yes',
    clearsessioncache : 'yes',
    zoom : 'no',//Android only ,shows browser zoom controls
    hardwareback : 'yes',
    mediaPlaybackRequiresUserAction : 'no',
    shouldPauseOnSuspend : 'no', //Android only
    closebuttoncaption : 'Close', //iOS only
    disallowoverscroll : 'no', //iOS only
    toolbar : 'no', //iOS only
    enableViewportScale : 'no', //iOS only
    allowInlineMediaPlayback : 'no',//iOS only
    presentationstyle : 'pagesheet',//iOS only
    fullscreen : 'yes'//Windows only
  };

  constructor(private inAppBrowser: InAppBrowser) {
    this.openWithCordovaBrowser('http://url.tohomepage.com');
  }

  public openWithCordovaBrowser(url : string){
    let target = "_self";
    this.browser = this.inAppBrowser.create(url,target,this.options);
    this.browser.on('loadstart').subscribe((event) => {
      if(event.url.endsWith('.pdf'))
      {
        //Open PDF in some other way
      }
    });
    this.browser.on('loadstop').subscribe((event) => {
    });
    this.browser.on('exit').subscribe((event) => {
    });
  }
}

My problem now is, that when an PDF-URL is called, none of the 3 events (loadstart, loadstop, loaderror) are fired. With an usual URL these events fire as expected. Is there any other way I could intercept these calls? (The beforeload event does not exist in this version as far as I can see)

Thanks for any help/hints!

---

EDIT:

I installed the cordova-plugin-inappbrowser directly from the github master as suggested. The 'beforeload' channel is implemented in the module as far as I can see. But the 'beforeload' event is still not firing. ('loadstart' however is working for none-PDF URLs).

declare var cordova: any;
...

constructor() {
    var iabRef = cordova.InAppBrowser.open("http://someurl.com", "_blank", "beforeload=yes");

    iabRef.addEventListener('beforeload', function(params, callback){
      alert('Beforeload fired');

      // If the URL being loaded is a PDF
      if(params.url.match(".pdf")){
        // Open PDFs in system browser (instead of InAppBrowser)
        cordova.inAppBrowser.open(params.url, "_system");
      }else{
        // Invoke callback to load this URL in InAppBrowser
        callback(params.url);
      }
    });

    iabRef.addEventListener('loadstart', function(params, callback){
      alert('Loadstart fired');
    });
}

Answer 1

If you install cordova-plugin-inappbrowser directly from the Github master branch, there's an unreleased feature added by PR #276 which adds a beforeload event.

First install the plugin direct from master:

cordova plugin add https://github.com/apache/cordova-plugin-inappbrowser

Then use it something like this:

// Open InAppBrowser on initial page
var iabRef = cordova.InAppBrowser.open("http://www.someurl.com", "_blank", "beforeload=yes");

// Add beforeload event handler which is called before each new URL is loaded into the InAppBrowser Webview
iabRef.addEventListener('beforeload', function(params, callback){
    // If the URL being loaded is a PDF
    if(params.url.match(".pdf")){
        // Open PDFs in system browser (instead of InAppBrowser)
        cordova.InAppBrowser.open(params.url, "_system");
    }else{
        // Invoke callback to load this URL in InAppBrowser
        callback(params.url);
    }
});