Need help upgrading to Ionic Framework 4.0? Get assistance with our Enterprise Migration Services EXPLORE NOW

Safari View Controller

Improve this doc

For displaying read-only web content.

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

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

Installation

  1. Install the Cordova and Ionic Native plugins:
    $ ionic cordova plugin add cordova-plugin-safariviewcontroller
    $ npm install --save @ionic-native/safari-view-controller@4
    
  2. Add this plugin to your app's module

Supported platforms

Usage

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

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
      }
    }
  );

Instance Members

isAvailable()

Checks if SafariViewController is available

Returns: Promise<boolean>

show(options)

Shows Safari View Controller

Param Type Details
options SafariViewControllerOptions

optional

Returns: Observable<any>

hide()

Hides Safari View Controller

connectToService()

Tries to connect to the Chrome’s custom tabs service. you must call this method before calling any of the other methods listed below.

Returns: Promise<any>

warmUp()

Call this method whenever there’s a chance the user will open an external url.

Returns: Promise<any>

mayLaunchUrl(url)

For even better performance optimization, call this methods if there’s more than a 50% chance the user will open a certain URL.

Param Type Details
url string

Returns: Promise<any>

SafariViewControllerOptions

Param Type Details
animated boolean (optional)
barColor string (optional)
controlTintColor string (optional)
enterReaderModeIfAvailable boolean (optional)
hidden boolean (optional)
showDefaultShareMenuItem boolean (optional)
tintColor string (optional)
toolbarColor string (optional)
transition string (optional)
url string (optional)

API

Native

General