Open url in the app

Ionic Framework ionic-v3
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