Safari View And Custom Chrome Tab

Stable Version 1.0.1 (OutSystems 11)
Published on 13 Feb by 
Created on 12 Feb
An advanced alternative for InAppBrowser with SafariViewController [Native iOS] & CustomChromeTab [Native Android] support.
Read More

Safari View And Custom Chrome Tab Sample:


  • Use the new and powerful iOS9 viewcontroller to show webcontent in your app.
  • Requires XCode 7 / iOS9 SDK to build.
  • Requires iOS9 to use, lower versions need to fall back to InAppBrowser.
  • Chrome custom tabs are Android's parallel to SafariViewController with even more customizable UI.

This Component uses SafariViewController on iOS and CustomeChromeTabs view on Android.

Supported platforms

  • Android
  • iOS


  • isAvailable : isAvailable(callback)
  • Show : It accepts an options object and a success and fail callbacks. show({options}, successCallback, failCallback)
  • iOS Options :
  1. url - String (required)
  2. enterReaderModeIfAvailable - Boolean (default false)
  3. hidden - Boolean (default false), you can use this to load cookies etc in the background.
  4. animated - Boolean (default true), note that 'hide' will reuse this preference (the 'Done' button will always animate though)
  5. transition - String,  (this only works in iOS 9.1/9.2 and lower) unless animated is false you can choose from: curl, flip, fade, slide (default)
  6. tintColor - String, ("#00ffff", default is ios blue)
  7. barColor - String, ("#0000ff", on iOS 10+ you can change the background color as well)
  8. controlTintColor - String, ("#ffffff", on iOS 10+ you can override the default tintColor)
  • Android Options :
  1. url - String (required)
  2. showDefaultShareMenuItem - Boolean (default false)
  3. toolbarColor - String, ("#0000ff", you can change the tool bar color as well)
  4. animated - Boolean (default true)
  5. transition: String, (default: "slide" (it's also the only animation available at the moment) The browser window will slide in from the right.
  • successCallback : Called once when the tab is loaded and once when it is closed. an object with one property: event that describes what happened is supplied (equals to either 'opened' or 'loaded' or 'closed').
  • failCallback : Return boolean status 'false' and message.

Only for Android

  • connectToService - connectToService(successCallback, failCallback) - Connect to the Chrome's custom tabs service. you must call this method before calling any of the other methods listed below.
  • warmUp - warmUp(successCallback, failCallback) - Call this method whenever there's a chance the user will open an external url.
  • mayLaunchUrl - mayLaunchUrl(url, success, fail) - for even better performance optimization, call this method if there's more than a 50% chance the user will open a certain URL.

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.
  • Whereas inappbrowser plugin is affected by ATS, this plugin is not. This means you can even load http URL's without whitelisting them.
  • Since iOS 9.2 or 9.3 you can swipe to go back to your app. Unfortunately, in favor of this Apple dropped the option to provide a custom transition (curl/flip/..) when presenting Safari.

Thanks, @EddyVerbruggen for Cordova Plugin Git Repository

Suggestions are most welcome !!

What’s new (1.0.1)
  • Support for iOS 12.0.
  • So as always, we underwent some deep-cleansing. Bugs were squashed, clutter was removed, and the good stuff is all in order.

We love this squeaky clean feeling.

Reviews (0)
Libraries, Mobile Plugins, Components, Samples & How-tos, Developer Tools
Support Options
This component is not supported by OutSystems. You may use the discussion forums to leave suggestions or obtain best-effort support from the community, including from Viraj Kataria who created this component.
See all 1 dependencies
Component Consumers
See all 1 consumers
Weekly Downloads 
Related Components
Silk UI Web
OutSystems R&D
A fully responsive and beautiful UI framework that works within the OutSystems Platform. Build amazing looking applications, in a fraction of the time, which work perfectly across devices. Learn how to start using Silk UI and see the examples at . Obtain assistance on using Silk UI in our forums .
Architecture Team
A tool to discover and measure your architecture and understand how to improve
OutSystems Now
OutSystems R&D
OutSystems Now brings your OutSystems experience to any device.
More from Viraj Kataria
Rapid Strings
Customize & JS Strings Manipulation Function Other then Outsystems for Easy to implement and makes coding more lowcode
Android iOS Shared User Preferences
An interface to the user’s defaults database, where you store key-value pairs persistently across launches of your app. - Supports both Android [ Shared Preferences ] & iOS [ User Preferences ]
iRoot - Android iOS Jailbreak/Root Detection
Cordova Jailbreak/Root Detection