Skip to main content

Safari View Controller

For displaying read-only web content.

Requires Cordova plugin: cordova-plugin-safariviewcontroller. For more info, please see the Safari View Controller plugin docs.

https://github.com/EddyVerbruggen/cordova-plugin-safariviewcontroller

Stuck on a Cordova issue?

Don't waste precious time on plugin issues.

If you're building a serious project, you can't afford to spend hours troubleshooting. Ionic’s experts offer premium advisory services for both community plugins and premier plugins.

Installation#

$ npm install cordova-plugin-safariviewcontroller
$ npm install @ionic-native/safari-view-controller
$ ionic cap sync

Supported Platforms#

  • Android
  • iOS

Usage#

React#

Learn more about using Ionic Native components in React

Angular#

import { SafariViewController } from '@ionic-native/safari-view-controller/ngx';
constructor(private safariViewController: SafariViewController) { }
...
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
}
}
);