Open url in the app

#1

Hello all,

I have an app that create cards with short data and when click on it I want to use an in app browser sort of thing. Is the only way to use InAppBrowser plugin or are there also other/better ways to do that?

#2

Hi @RenzoM78,

I recommend the SafariViewController plugin from Ionic Native. Despite the name, it also works on Android (through Chrome Custom Tabs) and provides a more modern browser in a native activity inside your app (like the Twitter native app does).

Best,
Rodrigo

#3

Thanks Rodrigo, you mean that the url opens inside the app and not outside? I also saw BrowserTab which have the same i guess. I will try your suggestion also :slight_smile:

#4

Yes, it’s the recommended and modem way to open external links inside an app in iOS and Android. This behavior is also implemented as a default feature in Capacitor.

#5

When I use it like this and click on the the card which is using the safariviewcontroller:

openWebpage(url: string) {
    this.safariViewController.isAvailable()
  .then((available: boolean) => {
      if (available) {

        this.safariViewController.show({
          url: 'http://ionic.io',
          hidden: false,
          animated: false,
          transition: 'curl',
          enterReaderModeIfAvailable: true,
          tintColor: '#ff0000'
        })
        .subscribe((result: any) => {
            if(result.event === 'opened') console.log('Opened');
            else if(result.event === 'loaded') console.log('Loaded');
            else if(result.event === 'closed') console.log('Closed');
          },
          (error: any) => console.error(error)
        );

      } else {
        // use fallback browser, example InAppBrowser
      }
    }
  );
  }

I get the error TypeError: Object(…) is not a function

I can not figure out why… I use as import:

import { SafariViewController } from '@ionic-native/safari-view-controller/ngx';

So guess that is ok

#6

If you’re using Ionic 3, the latest compatible version is 4.21.0, whose import paths don’t have /ngx at the end. Ionic Native 5 needs Ionic 4 and Angular 7.

Check your package.json, downgrade to 4.21.0 if needed and run npm install. Then remove /ngx from your Ionic Native imports and see if the error is still there.

#7

Than that is the problem indeed, i will try

#8

I downgraded to 4.20.0, the 21 is not available :slight_smile:

Now I get an error Uncaught (in promise): cordova_not_available but that is maybe because it can not tested in the browser. For now the other error is gone so thanks :slight_smile:

#9

Yeap, you need to wait for the Cordova plugins to be ready and check if you’re in Cordova or in the browser before using the plugin, like:

import { Platform } from 'ionic-angular';

...

openWebpage(url: string) {
  this.platform.ready()
  .then(readySource => {
    if (readySource === 'cordova') {
      this.safariViewController.show({...});
      ...
    } else {
      // Do a window.open() or similar
    }
  })
  .catch(err => console.error(err));
}
#10

I now have this in my home.ts:

openWebpage(url: string) {
  this.platform.ready()
  .then(readySource => {
    if (readySource === 'cordova') {
     this.safariViewController.isAvailable()
  .then((available: boolean) => {
      if (available) {

        this.safariViewController.show({
          url: url,
          hidden: false,
          animated: false,
          transition: 'curl',
          enterReaderModeIfAvailable: true,
          tintColor: '#ff0000'
        })
        .subscribe((result: any) => {
            if(result.event === 'opened') console.log('Opened');
            else if(result.event === 'loaded') console.log('Loaded');
            else if(result.event === 'closed') console.log('Closed');
          },
          (error: any) => console.error(error)
        );
	  }
	 })
	
 
    } else {
      // Do a window.open() or similar
    }
  })
  .catch(err => console.error(err));
		
}

And this in the home.html:

<ion-card *ngFor="let user of users" (click)="openWebpage(user.link)">

But now when I click on the card nothing happens, no error and no redirect. Is there something wrong in the ts file?

#11

You’ll have to debug the code with the Dev Tools, either adding debugger; at the beginning of the function or several console.log() and see what it’s going on :sweat_smile:

#12

I will do that :slight_smile:

1 Like