API Reference: WebBrowser

WebBrowser is a component to show external Web Pages/Sites for browsing feature within the app. This component is quite similar to WebView, but it is different in usage. Basically,

  • WebView is used to embed a single page(s) within the app, they look like a part of the app or page. The developer has control over the page, injecting JS or cookie or navigation.

  • WebBrowser is to start navigation from a single page. The developer cannot inject JS or cookie. The user has full control over navigation.

Color of the URL cannot be changed on WebBrowser, it is set by the operating system.

WebBrowser is shown as an overlay to an existing page, like a full-screen dialog. When the user closes the dialog, the underlying page is shown.

TypeScript code blocks include examples of how to implement, override and components within the theme. You can create page with the UI Editor to make your page compatible with theming and then you can implement themable components programmatically. Once the page is created with the UI Editor, it generates a class under scripts/generated/pages. You can then extend that class with the following TypeScript classes.

Web Browser
import PageSampleDesign from 'generated/pages/pageSample';
import FlexLayout = require('sf-core/ui/flexlayout');
import Application = require('sf-core/application');
import Color = require('sf-core/ui/color');
import WebBrowser = require('sf-core/ui/webbrowser');
//You should create new Page from UI-Editor and extend with it.
export default class Sample extends PageSampleDesign {
webOptions: WebBrowser;
constructor() {
// Overrides super.onShow method
this.onShow = onShow.bind(this, this.onShow.bind(this));
// Overrides super.onLoad method
this.onLoad = onLoad.bind(this, this.onLoad.bind(this));
this.layout.flexDirection = FlexLayout.FlexDirection.ROW;
this.layout.justifyContent = FlexLayout.JustifyContent.CENTER;
this.layout.alignItems = FlexLayout.AlignItems.CENTER;
* @event onShow
* This event is called when a page appears on the screen (everytime).
* @param {function} superOnShow super onShow function
* @param {Object} parameters passed from Router.go function
function onShow(superOnShow: () => void) {
const { headerBar } = this;
Application.statusBar.visible = false;
headerBar.visible = false;
WebBrowser.show(this, this.webOptions);
* @event onLoad
* This event is called once when page is created.
* @param {function} superOnLoad super onLoad function
function onLoad(superOnLoad: () => void) {
this.webOptions = new WebBrowser.Options();
this.webOptions.url = "https://smartface.io";
this.webOptions.barColor = Color.create("#00A1F1");
this.webOptions.ios.itemColor = Color.WHITE;
this.webOptions.ios.statusBarVisible = true;
Web Browser
const Page = require("sf-core/ui/page");
const extend = require("js-base/core/extend");
const Color = require('sf-core/ui/color');
const WebBrowser = require('sf-core/ui/webbrowser');
var Page1 = extend(Page)(
function(_super) {
_super(this, {
onShow: function(params) {
const page = this;
var webOptions = new WebBrowser.Options();
webOptions.url = "https://smartface.io";
webOptions.barColor = Color.create("#00A1F1");
webOptions.ios.itemColor = Color.WHITE;
webOptions.ios.statusBarVisible = true;
WebBrowser.show(page, webOptions);
module.exports = Page1;

When to show the WebBrowser

In order to show the WebBrowser a page instance is required. The show method of the WebBrowser should be called within or after the page load event is fired; it should not be called within the constructor.

WebBrowser is shown with a set of option properties. List of those options is listed in WebBrowser.Options reference documentation.

WebView or WebBrowser?

In core logic, WebBrowser and WebView are quite similar. Based on the requirement the developer should pick the suitable one.




Injecting JavaScript


Not Supported

Capturing events from Web Page


Not Supported

Cookie injection


Not Supported

Prevent user to navigate


Not Supported

Give user navigation control (Back, forward)

Requires custom UI development

Buit-in supported

UI layout implementation

Within a page


Performance of the Web Page



Local WebPages (Content from assets)


Not Supported

Web Page loading status

Custom loading indicator (not the progress) can be developed

Loading progress is built-in

Web Page address

Custom UI development is required

Not supported

The user can close/dismiss the Web Component

As the developer implements

Built-in. Cannot be prevented



Not supported

UI Editor


Not Supported

Usage notes

  • iOS version is using a Safari Browser inside

  • Android version is using a Chrome Browser inside

  • Both of them can relay the page to the corresponding browser (Safari | Chrome)

  • iOS is adding navigation controls to the bottom of the screen. It is the same color as the bar color

  • Android navigation controls are hidden within the top right menu

  • Android back button closes the WebBrowser if it cannot go back from browsing history

  • Android system is setting the item colors by itself, this cannot be modified

  • After closing the WebBrowser, underlying page.onShow event is fired only on iOS

  • If the StatusBar is shown on iOS, it has the same background color as the bar color. The status bar style color (Light | Dark) is automatically selected by the system

  • The closing of the WebBrowser cannot be captured