Using InAppBrowser to make standalone app - Ionic

Ionic Native
#1

Hi guys,

The problem is this. I am trying to encapsulate the mobile version of a site and make it a mobile app temporary, so i can develop the real app in ionic slow and take my time to make it perfect.

So, the app goes well, fires the URL i want, syncs well with all the plugins, but if the user goes “back - back” on the phone takes him to the ionic app - webview and the “url” is never loaded again with InAppBrowser. How can i prevent the user so that when it goes back on the phone it closes the app, instead of heading to the webview in ionic that loads the URL via InAppBrowser…

I am trying to make this URL as a standalone app that runs in ionic so that i can have access to plugins and functionalities.

So is there a way to keep the user only in the URL loaded via InAppBrowser so i can use this view as a standalone app?

thanks a lot!

#2

so what you are saying is that that when you press back multiple times the in app browser closes and never opens again?

#3

When i press back from the inappbrowser, it goes in the ionic web view, the “Home” page with default html from ionic. In the home.ts is where i am loading the inappbrowser to trigger.

So i don’t want the user to be able to move “back” from the URL loaded via Inappbrowser.

And yes the user remains with the default “Home” page and the URL doesn’t get load anymore unless i close the app and restart it.

I want the user to be stuck in the view loaded via InAppBrowser and when he uses “back” button to simply close the app, not navigate in the original ionic app that encapsulates the view. Makes sense?

#4

I think for this you will have to overwrite your $rootScope.$ionicGoBack() to instead of going back to the previous state should infact close the app.

use this two methods in your controller…

$rootScope.$ionicGoBack = function() {
    console.log("exiting the app");
    ionic.Platform.exitApp();
  };

$ionicPlatform.registerBackButtonAction(function(e){
    ionic.Platform.exitApp();
    e.preventDefault();
    return false;
  },101);
});
#5

i forgot to mention i need this in ionic 2. thank you

#6

That’s not really how it works, in InAppBrowser you can’t access the plugins etc.

#7

I am using OneSignal plugin that triggers when the user logins in the URL loaded by InAppBrowser, so actually i do have access to some plugins via InAppBrowser. But this is not the issue… the issue is stated above

#8

Yeah but you are fighting the system instead of working with it. I wouldn’t be surprise if Apple would decline the app when submitting to the App Store for example.

Do you have any real code running in index.html and the Ionic app behind it? If not you can also manipulate the Cordova project to load a URL from the web instead of the local index.html.

#9

I am manipulating to load an external URL: example:

const browser = this.iab.create(‘https://google.com’, ‘_blank’, {
location: ‘no’,
zoom: ‘no’,
hardwareback: ‘no’
});

I was doing some testing with the “hardwareback” option from the “create” method. Basically i want all the functionalities to happen in the webview encapsulated by ionic. But i don’t want when the user uses back button from Android (the psysical back button that the phone has) to be restricted in exiting the inappbrowser and instead closing the app.

I just want to load the URL and have access to some native plugins to have some functionalities and to restrict the user as above.

#10

This is not possible.
When you load a site in the InAppBrowser, it is essentially loaded in it’s own isolated context.
I does not have a reference to any cordova plugins nor does it know it’s being loaded in cordova.
What you’re trying to do is not what the InAppBrowser was designed for.

#11

@mhartington

So i have the default ionic project with the only home page, where in the home.ts i am creating with InAppBrowser the URL instance. I just want to block the user there, when he uses the back button, not to return in the blank “home” page, but instead to close the app.

So basically to simulate an ionic 2 app by initializing the external URL and keeping the user there, and when he uses the last “back” button (with no where to go back to) instead of going to the “home” root page, to close the app.

Makes sense?

I am trying to buy some time until i finish the default ionic 2 app, by encapsulating with InAppBrowser the mobile web version.

If not possible with ionic, any other alternatives?

thank you.

#12

This is technically possible

This will get you into trouble at most, at least will give users a less that great experience.
You should not be doing this at all. Take the time to properly build the app out.

As stated in the previous comment, it’s technically possible. But just because you could, doesn’t mean you should. Users will not like it, Apple will not like it, can chances are google will not like it either

1 Like
#13

I looked on the forum and found a solution that the users say it works, but it doesn’t work for me.

So i will copy paste my code below, after event “loadstop” i am taking the url in order to match and see if the user is on the homepage of the web app, and in here i want to restrict him on going back and instead close the app like there wasn’t anything back.

ionViewWillEnter() {

const browser = this.iab.create('http://test.net/login', '_blank', {
  location: 'no',
  zoom: 'no',
});

browser.on('loadstop').subscribe(
  data => {
      let url = data.url;
      url = url.replace(/[^a-zA-Z]/g,'');

      if (url.endsWith('net')) {
        this.platform.registerBackButtonAction(() => {
          let nav = this.app.getActiveNav();
          if (nav.canGoBack()) {
            this.platform.exitApp();
          } else {
            this.platform.exitApp();
          }
        });

A little help please?

#14

I am looking for the same solution as well. Tried the code above, seems like “platform.registerBackButtonAction” doesn’t work.

#15

More than one knowledgeable and experienced person are telling y’all in no uncertain terms that this is not a road worth going down. I suggest listening to them.

#16

I know this is not a road going on, i don’t want to keep it as a definitive solution, i just want to patch things for the moment until i finish the actual app. So please anyone help!!!

#17

do you mind to share where did you get this source code from?

#18

A post was split to a new topic: Disable done Button While Using In App Browser but want Previous And Next Button

#19

A post was split to a new topic: To edit cordova to load url instead of local index.html

#20

You can try like this
I hope it will help to you.

ngOnInit(){
      this.platform.ready().then(() => {
            const browser = this.iab.create('URL','_self',{location:'no', zoom:'no'});
            browser.on('exit').subscribe(() => {
           this.platform.exitApp();         
      });
    });
}

Thank you.

2 Likes