Giter Club home page Giter Club logo

cordova-plugin-safariviewcontroller's Introduction

SafariViewController Cordova Plugin

by Eddy Verbruggen - @eddyverbruggen

0. Index

  1. Description
  2. Screenshots
  3. Installation
  4. Usage
  5. Advantages over InAppBrowser

1. Description

  • Use in cases where you'd otherwise use InAppBrowser
  • Use the new and powerful iOS9 viewcontroller to show webcontent in your PhoneGap app
  • Requires XCode 7 / iOS9 SDK to build
  • Requires iOS9 to use, lower versions need to fall back to InAppBrowser (example below!)

Note that I didn't decide to clobber window.open to override InAppBrowser when applicable because that would mean you could never use InAppBrowser in case you need its advanced features in one place and are happy with a simple readonly view in other cases.

2. Screenshots

As you can see from these shots: you can preload a page in reader mode or normal mode, and Safari gives you the option to use the share sheet!

Pressing 'Done' returns the user to your app as you'd expect.

       

3. Installation

To install the plugin with the Cordova CLI from npm:

$ cordova plugin add cordova-plugin-safariviewcontroller

Graceful fallback to InAppBrowser

Since SafariViewController is new in iOS9 you need to have a fallback for older versions (and other platforms), so if available returns false (see the snippet below) you want to open the URL in the InAppBrowser probably, so be sure to include that plugin as well:

$ cordova plugin add cordova-plugin-inappbrowser

I'm not including it as a depency as not all folks may have this requirement.

4. Usage

Check the demo code for an easy to drop in example, otherwise copy-paste this:

function openUrl(url, readerMode) {
  SafariViewController.isAvailable(function (available) {
    if (available) {
      SafariViewController.show({
            'url': url,
            'enterReaderModeIfAvailable': readerMode // default false
          },
          function(msg) {
            console.log("OK: " + msg);
          },
          function(msg) {
            alert("KO: " + msg);
          })
    } else {
      // potentially powered by InAppBrowser because that (currently) clobbers window.open
      window.open(url, '_blank', 'location=yes');
    }
  })
}

5. Advantages over InAppBrowser

  • InAppBrowser uses the slow UIWebView (even when you're using a WKWebView plugin!), this plugin uses the ultra fast Safari Webview.
  • This is now Apple's recommended way to use a browser in your app.
  • A nicer / cleaner UI which is consistent with Safari and all other apps using a SFSafariViewController.
  • Since this is the system's main browser, assets like cookies are shared with your app, so the user is still logged on in his favorite websites.
  • Whereas cordova-plugin-inappbrowser is affected by ATS, this plugin is not. This means you can even load http URL's without whitelisting them.

cordova-plugin-safariviewcontroller's People

Contributors

eddyverbruggen avatar marciojcoelho avatar

Watchers

 avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.