FNCWebBrowser JS Bridge raises error on Windows

FNC TMS FNC UI Pack
1

I am using the JS Bridge to send information from JavaScript to Delphi.
It works fine under iOS, but on Windows, I get a JS error.

In the IDE, the WebBrowser reports "Edge Chromium 102.0.1245.44". Loading and showing HTML, even complex stuff, works fine.

iOS:
window.webkit.messageHandlers.ModelBridge.postMessage(s);
-> message comes in at my Delphi bridge object.

Windows:
let obj = window.chrome.webview.hostObjects.sync.ModelBridge;

-> Uncaught Error: Element not found. (0x80070490)
at RemoteMessenger.postSyncRequestMessage (:1:15258)
at Function.getHostProperty (:1:31668)
at Function._getAmbiguous (:1:18992)
at Object.get (:1:21537)
at app.ExternalInterface.callBridge (Mouth.js:213:66)

2

Hi,

Did you use the correct JavaScript? For Windows, the bridge object linking is done by calling a setter: SetObjectMessage

3

Hi Pieter,
sorry for the late response. I replied via email client, and that apparently did not show up here.

Following is what the call to GetBridgeCommunicationLayer creates for Windows.

The call to window.chrome.webview.hostObjects.sync.ModelBridge raises an "Element not found" at "ModelBridge" - as if "ModelBridge" (the name of my bridge) is not created under Windows (or the AddBridge() call fails silently).

It all works fine on iOS - I am using Windows for debugging only, so it would be nice to get this working ;-)

var sendModelBridgeObjectMessage = function(parameters) {
  var v = parameters;
var obj = window.chrome.webview.hostObjects.sync.ModelBridge;
  if (obj) {
    obj.ObjectMessage = v;
  }
};
4

Hi Pieter,
after looking at Microsoft's docs and their examples, I found the problem:

it should be
window.chrome.webview.hostObjects.ModelBridge
and not
window.chrome.webview.hostObjects.sync.ModelBridge as it is generated here:

unit FMX.TMSFNCWebBrowser;
...
{$IFDEF MSWINDOWS}
    'var obj = window.chrome.webview.hostObjects.sync.' + ABridgeName + ';' + LB +
    '  if (obj) {' + LB +
    '    obj.ObjectMessage = v;' + LB +
    '  }' + LB +
    {$ENDIF}
5

Further in the article is stated:

"Additionally, all host objects are exposed as window.chrome.webview.hostObjects.sync.{name}" so this technique works. We also checked the demo and the demo works as expected. Please check how the demo is adding the bridge.

6

Unfortunately, though, that "sync" proxy is not available here. It seems to work fine through window.chrome.webview.hostObjects.{name}, so I am good for now.

In the docs they say this btw:

"Accordingly this can result in reliability issues and it is recommended that you use the promise based asynchronous window.chrome.webview.hostObjects.{name} API described above."

7

That's strange, because that has been around from the beginning. Changing it without sync could introduce unwanted behaviour because we are also using the browser for bridging in our TMS FNC Maps product. We'll investigate what the effects are when changing it. Thanks for the update!

1 Like