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?
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#
- Capacitor
- Cordova
- Enterprise
$ npm install cordova-plugin-safariviewcontroller $ npm install @ionic-native/safari-view-controller $ ionic cap sync
$ ionic cordova plugin add cordova-plugin-safariviewcontroller $ npm install @ionic-native/safari-view-controller
Ionic Enterprise comes with fully supported and maintained plugins from the Ionic Team. Learn More or if you're interested in an enterprise version of this plugin Contact Us
#
Supported Platforms- Android
- iOS
#
Usage#
ReactLearn more about using Ionic Native components in React
#
Angularimport { 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 } } );