Edge webview hostObjects 2 way async communication

37 viewsangularjavascriptwebview2
0

I’m trying to establish connection between my Angular and .NET applications using window.chrome.webview.hostObjects. The following are my JS codes for calling the external methods set by .NET.

In the util file:

static get externalMethods() {
  return window.chrome.webview.hostObjects.myObject;
}

Then this gets used elsewhere in JS:

const value = util.externalMethods.myMethod().toString();

Although this correctly triggers the method set by .NET, it doesn’t wait for the method to finish running, and ends up with an "element not found" error. This is probably because myMethod doesn’t return the correct value. Here are the 3 things I’ve done to resolve the issue:

  1. Adding "sync" to the externalMethods command (chrome.webview.hostObjects.sync.myObject) – this doesn’t force a wait. In fact, it seems like this is for synchronous proxies.

  2. Forcing an await in externalMethods (return await window.chrome.webview.hostObjects.myObject) – not only does this not work, but I’m also not sure how I can put async on a static get method

  3. Defining a "set" method in JS which will be invoked by .NET when the .NET method finishes running – This is possible, but I don’t know how to force a stop on my Angular application until the set method is called. This also means that I need to refactor quite a bit of my code (because I can’t just do const value = util.externalMethods.myMethod() and would need a variable on the component level), so I’d like to avoid this if there are alternatives.

It seems like a lot of people have also struggled with expecting a value from an async webview method (e.g. https://github.com/MicrosoftEdge/WebView2Feedback/issues/822). But I don’t see any resolution from any of them. Any help would be much appreciated!