Overview

On all Player supported platforms but Windows, the Web Browser Asset cannot display websites that reject cross-origin resource sharing. Nicknamed CORS, cross-origin resource sharing refers to the embedding of one website domain in another website domain. A website rejecting CORS is saying it refuses to be embedded inside another web domain.

Exclusively for a subset of Player-supported devices, there is an alternative to the Web Browser Asset that enables the display of websites that reject CORS. This approach mirrors how websites referenced by third-party software like Twitter are displayed on tablets.

Supported platforms

• Android (using both current-gen Player and Player Next Gen)
• BrightSign (using both current-gen Player and Player Next Gen)
• iPad (using current gen Player)

This method will not work in Player on Samsung Tizen, Chrome, or Raspberry Pi devices, nor will it work in web-deployed experiences using Player Next Gen. For these platforms, experiences cannot display websites rejecting CORS.

REMINDER: The Web Browser Asset in Player on Windows is already capable of displaying websites rejecting CORS.

How it works: Calling the InAppBrowser function

When a website rejecting CORS needs to be displayed on the iPad or on Android-based devices, rather than using the Web Browser Asset, use the Call URL action to run the "InAppBrowser" function. Call this action using any Intuiface trigger.

The "Call URL" action is an action found in the "Overall Experience" action category for the experience as a whole. In the following image, the experience is named "Project 8".

Set the value of the URL parameter for the "Call URL" action to the following:

• inappbrowser://open(https://[target_website])

  • Replace [target_website] with the URL of the website you would like to display. For example:

    inappbrowser://open(https://www.cnn.com)

When the InAppBrowser function is called, the website will open in a browser window placed in front of the running Intuiface experience.

Using optional parameters with the InAppBrowser function

The InAppBrowser function is derived from the open-source mobile development framework Cordova. A variety of optional parameters can be applied to the InAppBrowser function, detailed on its documentation homepage. These parameters vary somewhat between the iPad and Android-based devices.

The syntax for adding parameters is to separate them using commas placed immediately after the website URL. Make sure there are no blank spaces, and treat parameter names as case-sensitive. For example:

inappbrowser://open(https://www.cnn.com,presentationstyle=pagesheet,location=yes,lefttoright=yes,closebuttoncaption=Close,closebuttoncolor=#0095ff)

If the URL is accompanied by its own parameters, enclose the URL and its parameters in double-quotes. For example:

inappbrowser://open("https://www.cnn.com?param1=toto,tata,titi",presentationstyle=pagesheet,location=yes,lefttoright=yes,closebuttoncaption=Close,closebuttoncolor=#0095ff)

List of optional parameters

These lists can be found on the InAppBrowser documentation homepage. Parameter names are case-sensitive.

All platforms identically support the following options:

• location: Set to 'yes' or 'no' to turn the InAppBrowser's location bar on or off.
• 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.
• beforeload: set to enable the beforeload event to modify which pages are actually loaded in the browser. Accepted values are 'get' to intercept only GET requests, 'post' to intercept on POST requests or 'yes' to intercept both GET & POST requests. Note that POST requests are not currently supported and will be ignored (if you set beforeload=post it will raise an error).
• clearcache: set to 'yes' to have the browser's cookie cache cleared before the new window is opened
• clearsessioncache: set to 'yes' to have the session cookie cache cleared before the new window is opened
• closebuttoncaption: set to a string to use as the close button's caption instead of an X. Note that you need to localize this value yourself
• closebuttoncolor: 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 an effect if the user has location set to 'yes'.
• hidenavigationbuttons: set to 'yes' to hide the navigation buttons on the location toolbar, only has an effect if the user has location set to 'yes'. The default value is 'no'.
• mediaPlaybackRequiresUserAction: Set to 'yes' to prevent HTML5 audio or video from autoplaying (defaults to 'no').

Player on Android supports these additional options:

• 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.
• footercolor: set to a valid hex color string, for example, #00ff00 or #CC00ff00 (#aarrggbb) , and it will change the footer color from default. Only has an effect if the user has footer set to 'yes'.
• hardwareback: set to 'yes' to use the hardware back button to navigate backward 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 close the InAppBrowser.
• hideurlbar: set to 'yes' to hide the url bar on the location toolbar, only has an effect if the user has location set to 'yes'. The default value is 'no'.
• navigationbuttoncolor: set to a valid hex color string, for example: #00ff00, and it will change the color of both navigation buttons from default. Only has an effect if the user has location set to 'yes' and not hidenavigationbuttons set to 'yes'.
• toolbarcolor: set to a valid hex color string, for example: #00ff00, and it will change the color of the toolbar from default. Only has an effect if the user has location set to 'yes'.
• lefttoright: Set to 'yes' to swap positions of the navigation buttons and the close button. Specifically, the navigation buttons go to the right, and the close button to the left. The default value is 'no'.
• zoom: set to 'yes' to show Android browser's zoom controls, set to no to hide them. The default value is 'yes'.
• shouldPauseOnSuspend: Set to 'yes' to make InAppBrowser WebView pause/resume with the app to stop background audio (this may be required to avoid Google Play issues like those described in CB-11013).
• useWideViewPort: 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. A wide viewport will be used if the page does not contain the tag or provide a width. (defaults to 'yes').
• fullscreen: Sets whether the InappBrowser WebView is displayed fullscreen or not. In fullscreen mode, the status bar is hidden. Default value is 'yes'.

Player on iPad supports these additional options:

• cleardata: set to 'yes' to have the browser's entire local storage cleared (cookies, HTML5 local storage, IndexedDB, etc.) before the new window is opened
• disallowoverscroll: Set to 'yes' or 'no' (default is 'no'). Turns on/off the bounce of the WKWebView's UIScrollView.
• navigationbuttoncolor: set as a valid hex color string, for example: #00ff00, to change from the default color. Only applicable if navigation buttons are visible.
• toolbar: set to 'yes' or 'no' to turn the toolbar on or off for the InAppBrowser (defaults to 'yes')
• toolbarcolor: 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.
• toolbartranslucent: set to 'yes' or 'no' to make the toolbar translucent(semi-transparent) (defaults to 'yes'). Only applicable if the toolbar is not disabled.
• lefttoright: Set to 'yes' to swap positions of the navigation buttons and the close button. Specifically, the close button goes to the right, and the navigation buttons go to the left.
• enableViewportScale: Set to 'yes' or 'no' to prevent viewport scaling through a meta tag (defaults to 'no').
• allowInlineMediaPlayback: 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').
• presentationstyle: Set to 'pagesheet', 'formsheet', or 'fullscreen' to set the presentation style (defaults to fullscreen).
• transitionstyle: Set to 'fliphorizontal', 'crossdissolve', or 'coververtical' to set the transition style (defaults to coververtical).
• toolbarposition: Set to 'top' or 'bottom' (default is 'bottom'). This causes the toolbar to be at the top or bottom of the window.
• hidespinner: Set to 'yes' or 'no 'to change the visibility of the loading indicator (defaults to 'no').

Commonly used optional parameters

Certain capabilities will be commonly used in conjunction with calls to the InAppBrowser function. These examples are extracted from the parameter lists above.

• clearcache (yes/no)
  Clearing the browser's cache before opening a new webpage
  inappbrowser://open(https://www.cnn.com,clearcache=yes)
• clearsessioncache (yes/no)
  Clearing the session's cookie cache before opening a new webpage
  inappbrowser://open(https://www.cnn.com,clearsessioncache=yes)
• cleardata (yes/no)
  (iPad only) Clearing the browser's entire local storage
  inappbrowser://open(https://www.cnn.com,cleardata=yes)
• location (yes/no)
  Hide the location bar to prevent manual entry of new URLs
  inappbrowser://open(https://www.cnn.com,location=no)
• presentationstyle (pagesheet/formsheet/fullscreen)
  (iPad only) Control the size of the browser window. The default is fullscreen.
  inappbrowser://open(https://www.cnn.com,presentationstyle=no)

Remember, multiple parameter values can be specified in a single call. For example:

inappbrowser://open(https://www.cnn.com,cleardata=yes,location=no,presentationstyle=pagesheet)

Closing the browser window

The browser window has a Close button that can be tapped by the user.

In addition, you can use the "Call URL" action to call the InAppBrowser Close function. This can be called, for example, when an inactivity timer expires.

• inappbrowser://close
  

OR

• inappbrowser://close()

Additional details

Activity and inactivity timers are aware of user actions within the browser window. These interactions are associated with the overall scene.

Each call to the InAppBrowser function will replace the previously loaded webpage with the newly referenced URL. In other words, the same window is used.

Limitations

• Android
  • PDF files cannot be displayed
  • HTML webcam doesn't work
  • Geolocation is not supported
  • Clearsessioncache, clearcache and cleardata parameters are stored even after restarting the experience.
• Both iPad and Android
  • "Link is clicked" and "Page loaded" triggers are not supported.
  • For you code jockeys out there, rummaging through the InAppBrowser code, Intuiface doesn't support the Target parameter.
  • HTML notification is not supported
  • Browser Web Cam is not supported

Video Explanation - InApp Browser

You will find in the Quarterly Q&A Fall Edition 2023 video more information regarding the InApp Browser.