Support message passing to native webview without react tag #6

donaldchen · 2022-05-26T00:28:03Z

Description

Prior to this PR, there was an issue where if I navigated away from the WebView, message passing between the WebView (via onMessage and injectJavaScript) and the react native app stopped working. When I navigated away from the WebView, the WKWebView stayed alive, but the RNCWebView got destroyed. Without the RNCWebView and without the react tag from the react component that had unmounted, we didn't have a way to send messages to the WebView because injectJavascript required both the RNCWebView and the react tag. Additionally, the onMessage callback went through a script handler delegate that depended on the RNCWebView. That also stopped working when the RNCWebView got destroyed. Technically, we could fix the message passing when navigating back to the WebView by re-adding the script handlers. However, this still has a problem where when the WKWebView is alive with no RNCWebView, we're dropping messages, and the react-native app is not handling messages posted to the WebView window.

This PR creates a solution for passing messages from the WebView to the react native app and vice versa without the react component being mounted and without the RNCWebView instance. For sending messages from the WebView to the react native app, we send the messages via an RCTEventEmitter (https://reactnative.dev/docs/native-modules-ios#sending-events-to-javascript) that includes the web view key along with the message data. The react native app can check the web view key to determine which WebView the message came from.

For sending messages to the WebView, this PR adds a new bridge API called injectJavaScriptWithWebViewKey. This method does not require a react tag, so it can be called even if there is no JS WebView component mounted. The react-native-webview objective-C code can look up the WKWebView instance with just the webViewKey and without the react tag.

Test Plan

This PR updates the sample app to test the new functionality in this PR.

Handling Messages From the WebView
In the Portals page, the WebView loads a script that posts a message to the window every second. The react native app listens for the message for the web view key and increments a counter in the UI. When we navigate away from the WebView and back to the WebView, the counter continues to increment even whether there is no JS WebView component mounted.

Filmage.2022-05-25_173226.mp4

Sending Messages to the WebView
The Portals page has a button that can inject javascript to the WKWebView even when the JS WebView component is unmounted. As a simple test, we can inject javascript that console-logs some text. Then we can use the Safari WebView inspector to verify that the log happened in the WebView.

Filmage.2022-05-26_172153.mp4

donaldchen · 2022-05-26T00:40:44Z

apple/RNCWKWebViewMapManager.h

@@ -1,5 +1,3 @@
-#import <WebKit/WebKit.h>


This seemed like an unnecessary import. I don't think any of the types in this file needed Webkit.

donaldchen · 2022-05-27T20:33:09Z

apple/RNCWebViewManager.m

-  sharedWKWebViewDictionary[webViewKey] = nil;
-
-  RNCWebView *rncWebView = sharedRNCWebViewDictionary[webViewKey];
+  dispatch_async(dispatch_get_main_queue(), ^{


I updated this to always run on the main thread because I was running into this error.

The error makes sense because cleanUpWebView removes WKWebView from its super view which probably affects the layout.

If you look at the other methods, I wonder if it might be better (just for consistency sakes) to use addUIBlock instead of doing a dispatch_async

It also queues the work on a different queue, and seems to be the natural fit here.

Makes sense! At first, I was concerned about addUIBlock providing parameters that this didn't need like the view registry. However, I realized I can just mark those parameters as unused

nealmanaktola · 2022-05-30T17:34:08Z

apple/RNCWebView.m

+- (void) addScriptHandlerForMessages: (WKUserContentController *)userContentController {
+  if ([self shouldReuseWebView]) {
+    [[RNCScriptMessageManager sharedManager] addScriptMessageHandlerWithName:MessageHandlerName withUserContentController:userContentController withWebViewKey: _webViewKey];
+


nit random new line

nealmanaktola · 2022-05-30T17:34:22Z

apple/RNCWebView.m

+- (void) removeScriptHandlerForMessages: (WKUserContentController *)userContentController {
+  if ([self shouldReuseWebView]) {
+    [[RNCScriptMessageManager sharedManager] removeScriptMessageHandlerWithUserContentController:userContentController withWebViewKey:_webViewKey];
+


nit new line

nealmanaktola · 2022-05-30T17:36:24Z

apple/RNCWebViewManager.m

@@ -199,6 +200,18 @@ - (RCTUIView *)view
  }];
 }

+RCT_EXPORT_METHOD(injectJavaScriptWithWebViewKey:(nonnull NSString *)webViewKey script:(NSString *)script)
+{
+  dispatch_async(dispatch_get_main_queue(), ^{


use addUIBlock here too

apple/RNCWebViewManager.m

nealmanaktola · 2022-05-30T17:52:26Z

apple/ScriptMessageEventEmitter.m

+  if (_hasListeners && [[notification name] isEqualToString:kScriptMessageNotificationName]) {
+    NSDictionary* userInfo = notification.userInfo;
+    [self sendEventWithName:@"onMessage" body:userInfo];
+//    [self sendEventWithName:@"onMessage" body:@{ @"webViewKey": userInfo[@"webViewKey"], @"message": userInfo[@"message"]}];


Will do! Good catch

This PR adds messaging passing. This was much simpler to do than the iOS counter part. This is the analogue to the following PR: #6. I've followed the same test plan. The sample app was really nice to use when testing. In the previous PR #11, I broke all native->react-native communication since events were being passed by the `InternalWebView` viewId not the `RNCWebView` viewId. This is now fixed.

…w in view hierarchy make sure release function is defined for Android WebView react component (#3) [iOS] support releasing native WebView without a ref to the React WebView (#4) fix EXC_BAD_ACCESS error by removing WKWebView reference to RNCWebView Support message passing to native webview without react tag (#6) fix EXC_BAD_ACCESS during remount situations (#7) There are some specific edge cases where a crash currently happens 1) Let's say RNCWebview A is mounted on the screen. 2) RNCWebview B starts to mount (while A is still mounted) with the same webview key 3) RNCWebview B removes the WKWebview from A and attaches it to itself 4) RNCWebview A starts to unmount, and upon unmounting tries to remove WKWebview A from itself. Since RNCWebview B already did this step from (3), this causes a crash. Here we only remove the view if the currently "set" RNCWebview inside the shared dict (where we keep track of the active view for a key) is self fix segfault with webview remount (#8) * fix another segfault * address comments

…bView in view hierarchy * add support to reuse instance with webViewKey * change up * address comments related to layout params * add nullability checks * fix * get full stack trace * add secondary map * rename to ifHasInternalWebView * additional fixes * fix * fix boolean [android] add messaging passing without a react tag (#12) This PR adds messaging passing. This was much simpler to do than the iOS counter part. This is the analogue to the following PR: #6. I've followed the same test plan. The sample app was really nice to use when testing. In the previous PR #11, I broke all native->react-native communication since events were being passed by the `InternalWebView` viewId not the `RNCWebView` viewId. This is now fixed. [android] check source prop if changed (#14) * [android] check source prop if changed * detect if new source is null too

…w in view hierarchy make sure release function is defined for Android WebView react component (#3) [iOS] support releasing native WebView without a ref to the React WebView (#4) fix EXC_BAD_ACCESS error by removing WKWebView reference to RNCWebView Support message passing to native webview without react tag (#6) fix EXC_BAD_ACCESS during remount situations (#7) There are some specific edge cases where a crash currently happens 1) Let's say RNCWebview A is mounted on the screen. 2) RNCWebview B starts to mount (while A is still mounted) with the same webview key 3) RNCWebview B removes the WKWebview from A and attaches it to itself 4) RNCWebview A starts to unmount, and upon unmounting tries to remove WKWebview A from itself. Since RNCWebview B already did this step from (3), this causes a crash. Here we only remove the view if the currently "set" RNCWebview inside the shared dict (where we keep track of the active view for a key) is self fix segfault with webview remount (#8) * fix another segfault * address comments

…bView in view hierarchy * add support to reuse instance with webViewKey * change up * address comments related to layout params * add nullability checks * fix * get full stack trace * add secondary map * rename to ifHasInternalWebView * additional fixes * fix * fix boolean [android] add messaging passing without a react tag (#12) This PR adds messaging passing. This was much simpler to do than the iOS counter part. This is the analogue to the following PR: #6. I've followed the same test plan. The sample app was really nice to use when testing. In the previous PR #11, I broke all native->react-native communication since events were being passed by the `InternalWebView` viewId not the `RNCWebView` viewId. This is now fixed. [android] check source prop if changed (#14) * [android] check source prop if changed * detect if new source is null too

…w in view hierarchy make sure release function is defined for Android WebView react component (#3) [iOS] support releasing native WebView without a ref to the React WebView (#4) fix EXC_BAD_ACCESS error by removing WKWebView reference to RNCWebView Support message passing to native webview without react tag (#6) fix EXC_BAD_ACCESS during remount situations (#7) There are some specific edge cases where a crash currently happens 1) Let's say RNCWebview A is mounted on the screen. 2) RNCWebview B starts to mount (while A is still mounted) with the same webview key 3) RNCWebview B removes the WKWebview from A and attaches it to itself 4) RNCWebview A starts to unmount, and upon unmounting tries to remove WKWebview A from itself. Since RNCWebview B already did this step from (3), this causes a crash. Here we only remove the view if the currently "set" RNCWebview inside the shared dict (where we keep track of the active view for a key) is self fix segfault with webview remount (#8) * fix another segfault * address comments

…bView in view hierarchy * add support to reuse instance with webViewKey * change up * address comments related to layout params * add nullability checks * fix * get full stack trace * add secondary map * rename to ifHasInternalWebView * additional fixes * fix * fix boolean [android] add messaging passing without a react tag (#12) This PR adds messaging passing. This was much simpler to do than the iOS counter part. This is the analogue to the following PR: #6. I've followed the same test plan. The sample app was really nice to use when testing. In the previous PR #11, I broke all native->react-native communication since events were being passed by the `InternalWebView` viewId not the `RNCWebView` viewId. This is now fixed. [android] check source prop if changed (#14) * [android] check source prop if changed * detect if new source is null too

donaldchen added 6 commits May 25, 2022 09:37

wip. message passing without react tag

5feace2

wip

8525dea

some progress

b21e120

make sure releaseWebView code runs on main thread

ff8c704

wip

af6f5a0

wip

758b7cb

donaldchen commented May 26, 2022

View reviewed changes

donaldchen added 6 commits May 25, 2022 17:45

some cleanup

6670eef

fixes and boilerplate

1100954

fix event passing for webview to react native

96f341e

injecting javascript without react tag works

0e6e6df

cleanup

e7fff4a

also check webviewKey in onMessage

98d25d7

donaldchen marked this pull request as ready for review May 27, 2022 19:53

donaldchen requested review from lsdimagine, nealchandra, nealmanaktola and apkumar May 27, 2022 19:54

donaldchen commented May 27, 2022

View reviewed changes

donaldchen added 4 commits May 27, 2022 14:34

yarn tsc

3032a6b

fix export

e6aab4c

fix method name

4eb0155

yarn tsc

f64ce5b

nealmanaktola reviewed May 30, 2022

View reviewed changes

apple/RNCWebViewManager.m Show resolved Hide resolved

nealmanaktola reviewed May 30, 2022

View reviewed changes

nealmanaktola approved these changes May 30, 2022

View reviewed changes

address PR comments

aad9b74

remove more unnecessary newlines

5ea56d8

donaldchen merged commit 1f2679a into 11.18.1-discord-1 May 31, 2022

nealmanaktola mentioned this pull request Sep 2, 2022

[android] add messaging passing without a react tag #12

Merged

donaldchen mentioned this pull request Sep 13, 2022

support message passing and keeping native WebView in memory when react component is unmounted react-native-webview/react-native-webview#2469

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Support message passing to native webview without react tag #6

Support message passing to native webview without react tag #6

donaldchen commented May 26, 2022 •

edited

donaldchen May 26, 2022

donaldchen May 27, 2022

nealmanaktola May 30, 2022

nealmanaktola May 30, 2022

donaldchen May 31, 2022

nealmanaktola May 30, 2022

nealmanaktola May 30, 2022

nealmanaktola May 30, 2022

nealmanaktola May 30, 2022

donaldchen May 31, 2022

Support message passing to native webview without react tag #6

Support message passing to native webview without react tag #6

Conversation

donaldchen commented May 26, 2022 • edited

Description

Test Plan

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

donaldchen commented May 26, 2022 •

edited