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.
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.
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');('sf-core/ui/view');​​//You should create new Page from UI-Editor and extend with it.export default class Sample extends PageSampleDesign {​webOptions: WebBrowser;​constructor() {super();// Overrides super.onShow methodthis.onShow = onShow.bind(this, this.onShow.bind(this));// Overrides super.onLoad methodthis.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;superOnShow();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) {superOnLoad();​//@ts-ignorethis.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;}​
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;
​
​
​
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.
In core logic, WebBrowser and WebView are quite similar. Based on the requirement the developer should pick the suitable one.
​
Feature | WebView | WebBrowser |
Injecting JavaScript | Supported | Not Supported |
Capturing events from Web Page | Supported | Not Supported |
Cookie injection | Supported | Not Supported |
Prevent user to navigate | Supported | Not Supported |
Give user navigation control (Back, forward) | Requires custom UI development | Buit-in supported |
UI layout implementation | Within a page | Full-screen |
Performance of the Web Page | Normal | Faster |
Local WebPages (Content from assets) | Supported | 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 |
Theme | Supported | Not supported |
UI Editor | Supported | Not Supported |
​
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
​