demo/index.html

<!DOCTYPE html>
<html>
<head>
  <meta name="format-detection" content="telephone=no">
  <meta name="msapplication-tap-highlight" content="no">
  <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">
  <link rel="stylesheet" type="text/css" href="css/index.css">
  <title>Safari VC</title>
  <script>
    window.onerror = function (err, file, line) {
      alert(err + ", " + line)
    };
  </script>
</head>
<body style="background: none; background-color: #ddd">
<div class="app">
  <h1>Safari VC</h1>

  <div id="deviceready" class="blink">
    <p class="event listening">Connecting to Device</p>

    <p class="event received">Device is Ready</p>
    <br/>
    <button onclick="openUrl('https://en.m.wikipedia.org/wiki/Safari', false)">Open Wikipedia</button><br/><br/>
    <button onclick="openUrl('https://en.m.wikipedia.org/wiki/Safari', true)">Open Wikipedia in reader mode</button><br/><br/>
    <button onclick="openUrl('https://en.m.wikipedia.org/wiki/Safari', false);setTimeout(dismissSafari, 10000)">Open Wikipedia, auto-dismiss after 10s</button>
  </div>
</div>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<script>
  function openUrl(url, readerMode) {
    SafariViewController.isAvailable(function (available) {
      if (available) {
        SafariViewController.show({
              url: url,
              hidden: false, // default false
              animated: true, // default true, note that 'hide' will reuse this preference (the 'Done' button will always animate though)
              transition: 'curl', // unless animated is false you can choose from: curl, flip, fade, slide (default)
              enterReaderModeIfAvailable: readerMode, // default false
              barColor: "#0000ff", // default is white (iOS 10 only)
              tintColor: "#ffffff" // default is ios blue
            },
            function(result) {
              if (result.event === 'opened') {
                console.log('opened');
              } else if (result.event === 'loaded') {
                console.log('loaded');
//                SafariViewController.hide();
              } else if (result.event === 'closed') {
                console.log('closed');
              }
            },
            function(msg) {
              console.log("KO: " + JSON.stringify(msg));
            })
      } else {
        // potentially powered by InAppBrowser because that (currently) clobbers window.open
        window.open(url /*, '_blank', 'location=yes'*/);
      }
    })
  }

  function dismissSafari() {
    SafariViewController.hide()
  }
</script>
</body>
</html>