WebBrowser

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.

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.

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;

​​​

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.

​

​

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

​