Safari View Controller is nothing but an in-app browser plugin for Ionic 2 iOS applications.

You can use the InAppBrowser native plugin to achieve the same.

However, the Safari View Controller is new and powerful iOS9 view controller to show web content in your Ionic 2 applications.

If you want to integrate the payment gateway. then you can use the Safari View Controller. Why because we don't have the SDK for payment gateway on the Ionic 2 mobile applications. So you can open the web page payment gateway using this plugin.

And it had the Done button, which is used to return from the web page to the Ionic 2 application page, where you opened web page.

Response webpage preview in iOS(iPhone SE Emulator)

  
Non-Response webpage preview in iOS(iPhone SE Emulator)


Create a new Ionic 2 project using

ionic start safari blank --v2

Now install the Safari

ionic plugin add cordova-plugin-safariviewcontroller --save
npm install --save @ionic-native/safari-view-controller

Create a button with click event in the home.html file.

<button ion-button (click)="openweb()" >Open Web</button>

And import the Safari View Controller class to the app.module.ts file.

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

Then include the Safari View Controller in the provider of the app.module.ts file.

providers: [SafariViewController,
StatusBar,
SplashScreen,
{provide: ErrorHandler, useClass: IonicErrorHandler}
]

Now import the Safari View Controller class to the home.ts file.

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

Create a reference using the constructor of home.ts file.

constructor(private safariViewController: SafariViewController) {

}


Now create a function, which loads some URL using the Safari View Controller.

openweb()
{
this.safariViewController.isAvailable()
.then((available: boolean) => {
if (available) {

this.safariViewController.show({
url: 'http://www.tnpsc.gov.in/',
hidden: false,
animated: false,
transition: 'curl',
enterReaderModeIfAvailable: true,
tintColor: '#ff0000'
})
.then((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
}
}
);
}

The Full Source code of home.ts file.

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { SafariViewController } from '@ionic-native/safari-view-controller';
@Component({
selector: 'page-home',
templateUrl: 'home.html'
})
export class HomePage {

constructor(private safariViewController: SafariViewController) {

}

openweb()
{
this.safariViewController.isAvailable()
.then((available: boolean) => {
if (available) {

this.safariViewController.show({
url: 'http://www.tnpsc.gov.in/',
hidden: false,
animated: false,
transition: 'curl',
enterReaderModeIfAvailable: true,
tintColor: '#ff0000'
})
.then((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
}
}
);
}

}


To run this application on the iOS emulator

ionic platform add ios
ionic run ios

That's all. you have learned, how to load web pages into the Ionic 2 mobile application.

Safari View Controller Requires minimum iOS9 and Xcode 7 to use. If you are designing the Ionic 2 application for lower versions, then you need to fall back to InAppBrowser native plugin

If you want to know learn, how to use the Ionic 2 InAppBrowser native plugin, please visit the below link.

Advantages over InAppBrowser

  • InAppBrowser uses the slow UIWebView
  • This is now Apple's recommended way to use a browser in your app.
  • Since this is the system's main browser, assets like cookies are shared with your app, so the user is still logged on in his favorite websites.

Tested Device:
iOS Emulator(iPhone  SE Xcode Edior)

The Safari View Controller is not working on the Android emulator( Genymotion emulator).