Safari View And Custom Chrome Tab

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

Safari View And Custom Chrome Tab Sample: 
https://www.outsystems.com/forge/Component_Overview.aspx?ProjectId=5318


Description

  • 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

Highlights

  • 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
https://github.com/EddyVerbruggen/cordova-plugin-safariviewcontroller

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)
Category
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.
Dependencies
See all 1 dependencies
Requirements
Platform
11.0.0.200
Database
All
Stack
.NET
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 silkui.outsystems.com . Obtain assistance on using Silk UI in our forums .
28593
Discovery
Architecture Team
A tool to discover and measure your architecture and understand how to improve
3476
OutSystems Now
OutSystems R&D
OutSystems Now brings your OutSystems experience to any device.
9235
More from Viraj Kataria
Rapid Strings
assif_tiger
Customize & JS Strings Manipulation Function Other then Outsystems for Easy to implement and makes coding more lowcode
7
Android iOS Shared User Preferences
assif_tiger
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 ]
24
iRoot - Android iOS Jailbreak/Root Detection
assif_tiger
Cordova Jailbreak/Root Detection 
6