Skip to main content
Version: v5

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 @awesome-cordova-plugins/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 '@awesome-cordova-plugins/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
}
}
);