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

ionic cordova plugin add cordova-plugin-safariviewcontroller

npm install @ionic-native/safari-view-controller

npm install cordova-plugin-safariviewcontroller

npm install @ionic-native/safari-view-controller

ionic cap sync

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

React

See here.

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: 'https://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
      }
    }
  );