Using InAppBrowser on page ready (ionViewDidLoad)

Ionic Framework ionic-v3
1

Hi there !

I wanted to wrap my website on the application start in the Home page.
So the idea is basicly to wait for the page finish loading then run the InAppBrowser plugins http://ionicframework.com/docs/v2/native/inappbrowser/.

My view code is empty

<ion-content class= 'padding has-subheader'>
</ion-content>

My controller code contains mostly the ionViewDidLoad method

ionViewDidLoad() {
      let browser = new InAppBrowser('http://www.google.com', '_self', this.options);
      browser.show();
}

I face a strange problem. The Browser start but not in the app, It launch an external browser.

Then i tried to put a button on the view

<ion-content class= 'padding has-subheader'>
     <button class = "button" (click)='openBrowser();'>OPEN BROWSER</button>
</ion-content>

And on the controlller

openBrowser() {
    let browser = new InAppBrowser('http://www.google.com', '_self', this.options);
    browser.show();
}

And this work perfectly ! An in app hidden browser is started and this is exactly what i want. The problem is that in order to work the action must come from a button click. I want to made the same things on application ready (cf : jquery).

I don’t understand why the same code can run different actions depending on when / where we call it.

Any help would be apreciated.

Thanks !

2

First of all, this is behaviour that is started partly in the browser on your device. Cordova (where ionic is built upon) is in it’s most simple description “a native wrapper about the default webbrowser”. Modern devices on android usually have some version of chromium installed.

If you check how desktop-chrome behaves when you call window.open (which is really similair to opening the inappbrowser), you will see that popups will only open when they are fired from a “trusted context”, usually meaning “user-performed click event”. When you open a popup at random for example after a timeout for 2 seconds, the context is no longer trusted (since it’s not responding directly to user interaction) and the browser will block the popup and show the user a question if they will allow popups from this site (if it is in a trusted context, it will open immediately).

Similair behaviour could be expected from an inappbrowser. We would only give a “popup” => inappbrowser <= if the user performs some action. Therefore, this is somewhat expected behaviour. Cordova itself is already an “inappbrowser”, so if you only want to display some website (assuming you don’t actually want to create a “google app”), you would be better of telling just cordova to load the external website as an index file. Then it won’t load a page in your app, and it will directly open the website you wanted to display.

But, I’ve got some background information from you story on the ionic-worldwide slack. So let’s dive a bit deeper. Since your goal is to create an app in the future, and for now, since you lack an app, just want to display your website. Why not just be transparent to the user? Create 1 simple ionic page, make it look good, and make it say:

“Thanks for downloading! We will be updating the app in the future to support all the features we are currently offering on our website. For now, nothing has been implemented yet, this is a work in progress! Having this application will make sure you will the updates directly when they are published. For now, we provide you with our website that you can open by clicking on the button below.”

The simply create a button that says “Open the website”, and handle your InAppBrowser logic in the click handler. The click handler has the “trusted context” I spoke about earlier, so it will work fine. You will also have your ionic based app to start off with, completing your goal. Also, you are being honest to your users, that will probably not receive a native or near-native experience on your website, which probably is your goal with the eventual app. Telling them that you are actually showing the website is probably going to make them more understanding about the not-so-native look and feel. If you are actually working on the project, they will enjoy the updates to come :slight_smile:

Then there is one more thing I want to say, I don’t think it’s really related for this particulair case, but it can’t hurt to mention. You could read up on the Content Security Policy (CSP) that is being handled by browser. It basically means that if you are trying to reach anything outside of your domain (on cordova that will be your app files) it will either block the content (usually in desktop browsers, with nice console errors about CSP violations, and also for included files like css and js) or open it outside of your app (so it’s clear for the user that it’s not trusted content, that’s why it’s not opened in your app). If this is the problem you are having now (I don’t think it is, but can’t hurt to try) or if you are encountering this in the future, think about looking into the CSP definition.

3

Thanks for your answer !

I am not really sure it is about “trusted context”, CSP and all that. I tried for exemple in Cordova directly and it almost work. I manage to start a “hidden” inappbrowser without any user interaction.

Actually i manage to get

Cordova : Splash Screen > main cordova page > hidden inappbrowser without a single click.
Ionic : Splash Screen > main ionic page > inappbrowser in a new window without a single click.
Ionic : Splash Screen > main ionic page > user click > hidden inappbrowser

4

It would make sense to me if we would allow a page to load in the background before actually showing it, because that would just improve user experience in general (since showing could be giving a more instant feel). I’m not sure about that situation though, did not try that ever, and I don’t have the opportunity to try before next week either. If it would work like this that would make sense to me though :wink:

5

Dear Sir, i have also stand same problem , kindly help me out