Mobile Browser

The Mobile Browser extends the features of the game application to support in-application browser, useful for browser popups, browser redirects, browser previews, webview previews, html + css dom extensions, etc.

The best benefit for this plugin is that it supports all editors and runtimes of Construct. Both, Construct 2 and Construct 3.

It has full control over the in-application browser, with lots of features to choose from for the customization of the browser, even being able to control the game application's webview itself.

The addon gives the developer capabilities to support, control, modify and utilize the game application's mobile browser.

Intstructions

1. The first step is to add the Mobile Browser addon into the project.

Actions, Conditions & Expressions

Actions

Core :

  • Open Link - Opens a URL in a new InAppBrowser instance, the current browser instance, or the system browser.

    • URL Link - Input the URL to show on the webview.

    • Target - "_self", if white-listed it opens on the Cordova Webview, "_blank" opens in the InAppBrowser, while "_system" opens in the system's web browser.

    • Location - Set to yes or no to turn the InAppBrowser's location bar on or off.

    • Add Options - "None" is to not add additional options. Otherwise, choose the Platform to load the additional options from.

  • Close - Closes the InAppBrowser window.

  • Show - Displays an InAppBrowser window that was opened hidden. Calling this has no effect if the InAppBrowser was already visible.

  • Hide - Hides the InAppBrowser window. Calling this has no effect if the InAppBrowser was already hidden.

  • Execute Script - Injects JavaScript code into the InAppBrowser window. (Only available when the target is set to '_blank').

    • Script - The JavaScript code to insert into the InAppBrowser window.

  • Execute External Script - Injects External JavaScript code into the InAppBrowser window. (Only available when the target is set to '_blank').

    • File Name - The External JavaScript Code File to insert into the InAppBrowser window.

  • Insert CSS - Injects CSS into the InAppBrowser window. (Only available when the target is set to '_blank').

    • Style - The CSS Style code to insert into the InAppBrowser window.

  • Insert External CSS - Injects External CSS code into the InAppBrowser window. (Only available when the target is set to '_blank').

    • File Name - The External CSS Code File to insert into the InAppBrowser window.

Add Option : Android :

  • Hidden - Set to "Yes" to create the browser and load the page, but not show it. The loadstop event fires when loading is complete. Omit or set to "No" (default) to have the browser open and load normally.

    • Set Toggle - Set "Yes" or "No".

  • Clear Cache - Set to "Yes" to have the browser's cookie cache cleared before the new window is opened.

    • Set Toggle - Set "Yes" or "No".

  • Clear Session Cache - Set to "Yes" to have the session cookie cache cleared before the new window is opened.

    • Set Toggle - Set "Yes" or "No".

  • Close Button Caption - Set to a string to use as the close button's caption instead of a X. Note that you need to localize this value yourself.

    • Caption - Set the Caption string.

  • Close Button Color - Set to a valid hex color string, for example: #00ff00, and it will change the close button color from default, regardless of being a text or default X. Only has effect if user has Location set to "Yes".

    • Hex Color - Set the Hex Color string.

  • Footer - Set to "Yes" to show a close button in the footer similar to the iOS Done button. The close button will appear the same as for the header hence use "CloseButtonCaption" and "CloseButtonColor" to set its properties.

    • Set Toggle - Set "Yes" or "No".

  •  

  • Footer Color - Set to a valid hex color string, for example "#00ff00" or "#CC00ff00" (#aarrggbb) , and it will change the footer color from default. Only has effect if user has footer set to "Yes".

  • Hex Color - Set the Hex Color string.

  • Hardware Back - Set to "Yes" to use the hardware back button to navigate backwards through the InAppBrowser's history. If there is no previous page, the InAppBrowser will close. The default value is "Yes", so you must set it to "No" if you want the back button to simply close the InAppBrowser.

    • Set Toggle - Set "Yes" or "No".

  • Hide Navigation Buttons - Set to "Yes" to hide the navigation buttons on the location toolbar, only has effect if user has location set to "Yes". The default value is "No."

    • Set Toggle - Set "Yes" or "No".

  • Hide URL Bar - Set to "Yes" to hide the url bar on the location toolbar, only has effect if user has location set to "Yes". The default value is "No".

    • Set Toggle - Set "Yes" or "No".

  • Navigation Button Color - Set to a valid hex color string, for example: "#00ff00", and it will change the color of both navigation buttons from default. Only has effect if user has location set to "Yes" and not HideNavigationButtons set to "Yes".

    • Hex Color - Set the Hex Color string.

  • Toolbar Color - Set to a valid hex color string, for example: "#00ff00", and it will change the color the toolbar from default. Only has effect if user has location set to "Yes".

    • Hex Color - Set the Hex Color string.

  • Zoom - Set to "Yes" to show Android browser's zoom controls, set to "No" to hide them. Default value is "Yes".

    • Set Toggle - Set "Yes" or "No".

  • Media Playback Requires User Action - Set to "Yes" to prevent HTML5 audio or video from autoplaying (defaults to "No").

    • Set Toggle - Set "Yes" or "No".

  • Should Pause On Suspend - Set to "Yes" to make InAppBrowser WebView to pause/resume with the app to stop background audio (this may be required to avoid Google Play issues like described in CB-11013).

    • Set Toggle - Set "Yes" or "No".

  • Use Wide ViewPort - Sets whether the WebView should enable support for the "viewport" HTML meta tag or should use a wide viewport. When the value of the setting is "No", the layout width is always set to the width of the WebView control in device-independent (CSS) pixels. When the value is "Yes" and the page contains the viewport meta tag, the value of the width specified in the tag is used. If the page does not contain the tag or does not provide a width, then a wide viewport will be used. (defaults to "Yes").

    • Set Toggle - Set "Yes" or "No".

Add Option : IOS :

  • Hidden - Set to "Yes" to create the browser and load the page, but not show it. The loadstop event fires when loading is complete. Omit or set to "No" (default) to have the browser open and load normally.

    • Set Toggle - Set "Yes" or "No".

  • Clear Cache - Set to "Yes" to have the browser's cookie cache cleared before the new window is opened.

    • Set Toggle - Set "Yes" or "No".

  • Clear Session Cache - Set to "Yes" to have the session cookie cache cleared before the new window is opened.

    • Set Toggle - Set "Yes" or "No".

  • Close Button Color - Set as a valid hex color string, for example: "#00ff00", to change from the default "Done" button's color. Only applicable if toolbar is not disabled.

    • Hex Color - Set the Hex Color string.

  • Close Button Caption - Set to a string to use as the "Done" button's caption. Note that you need to localize this value yourself.

    • Caption - Set the Caption string.

  • Disallow Overscroll - Set to "Yes" or "No" (default is "No"). Turns on/off the UIWebViewBounce property.

    • Set Toggle - Set "Yes" or "No".

  • Hide Navigation Buttons - Set to "Yes" or "No" to turn the toolbar navigation buttons on or off (defaults to no). Only applicable if toolbar is not disabled.

    • Set Toggle - Set "Yes" or "No".

  • Navigation Button Color - Set as a valid hex color string, for example: "#00ff00", to change from the default color. Only applicable if navigation buttons are visible.

    • Hex Color - Set the Hex Color string.

  • Toolbar - Set to "Yes" or "No" to turn the toolbar on or off for the InAppBrowser (defaults to "Yes").

    • Set Toggle - Set "Yes" or "No".

  • Toolbar Color - Set as a valid hex color string, for example: "#00ff00", to change from the default color of the toolbar. Only applicable if toolbar is not disabled.

    • Hex Color - Set the Hex Color string.

  • Toolbar Translucent - Set to "Yes" or "No" to make the toolbar translucent(semi-transparent) (defaults to "Yes"). Only applicable if toolbar is not disabled.

    • Set Toggle - Set "Yes" or "No".

  • Enable Viewport Scale - Set to "Yes" or "No" to prevent viewport scaling through a meta tag (defaults to "No").

    • Set Toggle - Set "Yes" or "No".

  • Media Playback Requires User Action - Set to "Yes" to prevent HTML5 audio or video from autoplaying (defaults to "No").

    • Set Toggle - Set "Yes" or "No".

  • Allow Inline Media Playback - Set to "Yes" or "No" to allow in-line HTML5 media playback, displaying within the browser window rather than a device-specific playback interface. The HTML's "video" element must also include the "webkit-playsinline" attribute (defaults to "No").

    • Set Toggle - Set "Yes" or "No".

  • Keyboard Display Requires User Action - Set to "Yes" or "No" to open the keyboard when form elements receive focus via JavaScript's "focus()" call (defaults to "Yes").

    • Set Toggle: - Set "Yes" or "No".

  • Suppresses Incremental Rendering - Set to "Yes" or "No" to wait until all new view content is received before being rendered (defaults to "No").

    • Set Toggle: - Set "Yes" or "No".

  • Presentation Style - Set to "Pagesheet", "Formsheet" or "Fullscreen" to set the presentation style (defaults to "Fullscreen").

    • Set Toggle - Set "Pagesheet", "Formsheet" or "Fullscreen".

  • Transition Style - Set to "FlipHorizontal", "CrossDissolve" or "CoverVertical" to set the transition style (defaults to "CoverVertical").

    • Set Toggle - Set "FlipHorizontal", "CrossDissolve" or "CoverVertical".

  • Toolbar Position - Set to "Top" or "Bottom" (default is "Bottom"). Causes the toolbar to be at the top or bottom of the window.

    • Set Toggle - Set "Top" or "Bottom".

  • Hide Spinner - Set to "Yes" or "No" to change the visibility of the loading indicator (defaults to "No").

    • Set Toggle - Set "Yes" or "No".

Add Option : Windows :

  • Hidden - Set to "Yes" to create the browser and load the page, but not show it. The loadstop event fires when loading is complete. Omit or set to "No" (default) to have the browser open and load normally.

    • Set Toggle - Set "Yes" or "No".

  • Hardware Back - Set to "Yes" to use the hardware back button to navigate backwards through the InAppBrowser's history. If there is no previous page, the InAppBrowser will close. The default value is "Yes", so you must set it to "No" if you want the back button to simply close the InAppBrowser.

    • Set Toggle - Set "Yes" or "No".

  • Fullscreen - Set to "Yes" to create the browser control without a border around it. Please note that if "Location=No" is also specified, there will be no control presented to user to close IAB window.

    • Set Toggle - Set "Yes" or "No".

Conditions

Core :
On Error
- Triggers when the plugin encountered an error.

Conditions.png

Event Triggers :

  • On Load Start - Event fires when the InAppBrowser starts to load a URL.

  • On Load Stop - Event fires when the InAppBrowser finishes loading a URL.

  • On Load Error - Event fires when the InAppBrowser encounters an error when loading a URL.

  • On Exit - Event fires when the InAppBrowser window is closed.


Execute Script :

  • On Loaded Script - Triggers when the script has been fully loaded.

  • On Loaded Script File - Triggers when the script file has been fully loaded.


Insert CSS :

  • On Loaded CSS - Triggers when the CSS has been fully loaded.

  • On Loaded CSS File - Triggers when the CSS file has been fully loaded.

Expressions

Core :

  • recentURL - Return the recent URL used to open a link.


Event Triggers :

  • loadErrorMessage - Return the recent error message when "On Load Error" is triggered. This is a production error message.


Debugging :

  • errorMessage - Return the recent error message when "On Error" is triggered. This is a debugging error message.

Features

The Mobile Browser is an addon that extends the game application's feature to create, utilize, modify and control the mobile browser on android, ios, macos and windows. It's from the Mobile Master Collection under the Construct Master Collection and supports both Construct 2 and Construct 3 with also supporting both the c2runtime and c3runtime.

Features :

  • In-application browser full-control.

  • Android, iOS, Windows & MacOS.

  • External Scripts and CSS.

  • GoTo on webview, external or inappbrowser.

  • Easy to use and no programming required.

  • Well-supported and fully tested.

  • Customization of the in-application browser.

  • Customization of the webview.

  • Android custom settings.

  • iOS & MacOS custom settings.

  • Windows custom settings.

  • Construct 2 editor support.

  • Construct 3 editor support.

  • Construct 2 runtime.

  • Construct 3 runtime.

  • C3 Build Service, PhoneGap.

  • Cordova CLI & Android Studio.

Feature Showcase

The Mobile Browser is an addon that controls the app webview or integrate an in-application browser to the webview. This lets you browse the web from your game application without opening an external browser, or manipulate or control the internal webview where the game application is ran.

Game Project

Sample Setup Project

Specifications

  • Instructions - The sample project has comments and instructions on how to use the addon and its features.

  • A.C.E. Coverage - It covers the implementation of each action, condition and expression.

  • Tips and Tricks - It provides some tips and tricks to a better use of the addon and of the event-sheet system alongside it.

Supporters

Only

 
 
 
 
 

Get the tools

for your pro games!

Constuct Master Collection - Itch.io
Constuct Master Collection - Discord
Constuct Master Collection - Construct 3

© Construct Master Collection 2020 • All rights reserved

Contact Information: