Webview +

From within a Quick Brick mobile app (this is not available for TV apps) a Webview Screen can be launched as a screen type.

Common Usage scenarios

• Articles.
• Terms & conditions screen.

The Applicaster Webview Screen (QB) plugin allows web screens to be launched and navigated within the app, with a dedicated web nav bar to provide navigation through viewing history.

Webview is only utilized on links prefixed with https. Any other link types like; tel, mailto, app are opened by React Native openURL method, which opens them using the native OS.

Add the plugin Webview Screen (QB) to your app before building the app in Zapp.

Add a screen to your app of type = Webview Screen (QB) and name it in the Studio as you wish.

The following styling parameters are available

Data Source and General

Normal data source types such as manual, JSON etc. can be used to provide the URL but in most cases simply enter a URL directly in the General: URL field.

Use a data source when the URL should be admin-driven or depend on app context, such as a profile-specific URL or a URL containing an authentication token or key.

To configure a data-source URL:

1. Leave the URL field under General empty.
2. Enable Use pipes endpoint under General. This setting is required for the remote feed and its context configuration to work correctly.
3. Select the data source that will provide the URL.
4. Make sure the data source returns a link entry with the target URL in entry.link.href.

Use pipes endpoint is also how context keys are passed for this flow. Configure the required context keys through the Endpoints mechanism. The app resolves the endpoint configuration and includes those values in the request as configured, such as query parameters or headers.

The backend must use the received context values when constructing the web page request. Depending on the use case, it can append them to the URL returned in entry.link.href or use them to establish cookies that the web page requires.

For example:

{
	"id": "generic-url-feed-1",
	"type": {
		"value": "link"
	},
	"comment": "The Applicaster webview-component usually just needs to have its URL field configured with the direct URL of some webpage, however there are times we want to serve an Admin-driven URL. When that happens, we need to leave the webview's URL field blank, and select a data source instead. That data source is expected to return JSON (like every other data source), so that has its entry.link.href field set to the URL that will render the HTML.",
	"title": "",
	"entry": [
		{
			"type": {
				"value": "link"
			},
			"id": "generic-url-feed-1",
			"link": {
				"type": "link",
				"href": "https://page.com?profile=12345"
			}
		}
	]
}

Select the desired orientation for the Webscreen view from

• Portrait
• Landscape left, right, or using sensor
• All but upside down
• Portrait upside down
• All orientations
• Play Media within the web page fullscreen when selected
• Prevent inline videos from going fullscreen
• Auto play media within the webpage

Styles and labels

Configure the color of the webscreen background

Navbars

Style the webscreen Nav Bar

Loading bar and assets

This displays under the web Nav Bar whilst a web page is loading.

Style the loading text and loading bar color and the color of the buttons in the navbar.

Page title and Drop down menu

Style the text in the webpage title (URL) and the optional drop down menu for reload and share.

Regarding orientation, the setting here will determine how the screen view launches. Be careful with landscape view on iOS as unlike Android there is no native back control to get back to your app from the webview screen. Use landscape on iOS only if you are launching the web view as a linked screen from another screen. Then the nav-bar back button will display.