Skip to main content
Version: 7.3.0

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.
info

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.

import PageSampleDesign from "generated/pages/page3";
import { Route, Router } from "@smartface/router";
import Application from "@smartface/native/application";
import WebBrowser from "@smartface/native/ui/webbrowser";
import Color from "@smartface/native/ui/color";


//You should create new Page from UI-Editor and extend with it.
export default class Sample extends PageSampleDesign {
webOptions: WebBrowser.Options;
constructor(private router?: Router, private route?: Route) {
super({});
}

// The page design has been made from the code for better
// showcase purposes. As a best practice, remove this and
// use WYSIWYG editor to style your pages.
centerizeTheChildrenLayout() {
this.dispatch({
type: "updateUserStyle",
userStyle: {
flexProps: {
flexDirection: 'ROW',
justifyContent: 'CENTER',
alignItems: 'CENTER'
}
}
})
}

onShow() {
super.onShow();
const { headerBar } = this;
Application.statusBar.visible = false;
headerBar.visible = false;

WebBrowser.show(this, this.webOptions);
}

onLoad() {
super.onLoad();
this.centerizeTheChildrenLayout();

//@ts-ignore
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;
}
}
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.

FeatureWebViewWebBrowser
Injecting JavaScriptSupportedNot Supported
Capturing events from Web PageSupportedNot Supported
Cookie injectionSupportedNot Supported
Prevent user to navigateSupportedNot Supported
Give user navigation control (Back, forward)Requires custom UI developmentBuit-in supported
UI layout implementationWithin a pageFull-screen
Performance of the Web PageNormalFaster
Local WebPages (Content from assets)SupportedNot Supported
Web Page loading statusCustom loading indicator (not the progress) can be developedLoading progress is built-in
Web Page addressCustom UI development is requiredNot supported
The user can close/dismiss the Web ComponentAs the developer implementsBuilt-in. Cannot be prevented
ThemeSupportedNot supported
UI EditorSupportedNot 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