[Windows] JS-WebView messaging bridge & multiple WebViews fixes

[tero-paananen]

Summary

This PR contains also important changes from my other PR about support of multiple webviews in same time in the app #1603

Adds JS-WebView messaging bridge C++/WinRT component that overwrites old postMessage messaging api window.ReactNativeWebView = {postMessage: function (data) {window.external.notify(String(data))}};

Now messaging works in any kind of source of webview html. Messaging is handled via WebView.AddWebAllowedObject WinRT component "bridge". Same kind of bridge implementation exists in old legacy C# implementation of webview in react-native 0.59. See ReactWebViewManager.cs and line 390

Bridge is enabled after developer defines WebView.onMessage handler.

Bridge is implemented into new Windows Runtime Component (C++/WinRT) component named WebViewBridgeComponent

This PR closes issuess #1600 and #1572

Test Plan

Module and bridge component tested in C# and C++ application.

You can test postMessaging using modules examples app. Message from JS is received in native side by new bridge:

Setup

ReactNativeWebView and WebViewBridgeComponent have to added into your solution .sln file, for example:

Project("{8BC9CEB8-8B4A-11D0-8D11-00A0C91BC942}") = "WebViewBridgeComponent", "..\node_modules\react-native-webview\windows\WebViewBridgeComponent\WebViewBridgeComponent.vcxproj", "{FCB612AD-FACC-410C-828C-24B5940B2762}"
EndProject
Project("{8BC9CEB8-8B4A-11D0-8D11-00A0C91BC942}") = "ReactNativeWebView", "..\node_modules\react-native-webview\windows\ReactNativeWebView\ReactNativeWebView.vcxproj", "{729D9AF8-CD9E-4427-9F6C-FB757E287729}"
EndProject

Add project reference to ReactNativeWebView into your project file, for example .csproj file:

    <ProjectReference Include="..\..\node_modules\react-native-webview\windows\ReactNativeWebView\ReactNativeWebView.vcxproj">
      <Project>{729d9af8-cd9e-4427-9f6c-fb757e287729}</Project>
      <Name>ReactNativeWebView</Name>
    </ProjectReference>

Compatibility

Windows
React Native Windows 0.62.x

Checklist

• I have tested this on a device and a simulator

[tero-paananen]

This PR closes #1600 and #1572

[react-native-community-bot]

🎉 This PR is included in version 10.10.0 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀

[pkieltyka]

nice work. Is it possible to have one document within a WKWebview, which then calls a window.open(url) via javascript, to then open another WKWebview and have cross-window messaging to work via window.parent.postMessage() ?