@react-native-ohos/react-native-webview 13.10.5-rc.1 → 13.10.5-rc.3

package/harmony/rn_webview/oh-package.json5

@@ -6,7 +6,7 @@
   "name": "@react-native-ohos/react-native-webview",
   "description": "main cpai architecture",
   "main": "index.ets",
-  "version": "13.10.5-rc.1",
+  "version": "13.10.5-rc.3",
   "dependencies": {
     "@rnoh/react-native-openharmony": "0.72.59"
   }

package/harmony/rn_webview/src/main/ets/RNCWebView.ets

@@ -28,6 +28,7 @@ import { url as OSUrl } from '@kit.ArkTS';
 import { RNC, TM } from './generated';
 import Logger from './Logger';
 import { BaseOperate } from './WebViewBaseOperate';
+import { deviceInfo } from '@kit.BasicServicesKit';
 import {
   AlertEvent,
   CACHE_MODE,
@@ -309,6 +310,10 @@ export struct RNCWebView {
       })
     }
 
+    if (!this.hasRegisterJavaScriptProxy && this.descriptorWrapper.rawProps.messagingEnabled) {
+      this.registerJavaScriptProxyOnly()
+    }
+
     let baseUrl = this.source.baseUrl
     let uri = this.source.uri
     if (this.source.html != undefined && this.source.html != "") {
@@ -398,7 +403,7 @@ export struct RNCWebView {
     const params = new ShouldStartParams();
     params.lockIdentifier = this.webViewBaseOperate?.getLockIdentifier() || -1
     this.ctx.runOnWorkerThread(new WorkerRunnable(), params);
-    this.webViewBaseOperate?.emitShouldStartLoadWithRequest(event)
+    this.webViewBaseOperate?.emitShouldStartLoadWithRequest(event, this.source.html, this.source.baseUrl)
     const startTime = Date.now();
     // 当lockState没变化并且小于超时时间，阻塞进程
     while (params.lockState === ShouldOverrideCallbackState.UNDECIDED &&
@@ -417,78 +422,152 @@ export struct RNCWebView {
 
   build() {
     Stack() {
-      Web({ src: "", controller: this.controller, renderMode: this.renderMode })
-        .mixedMode(this.mode)
-        .onPermissionRequest((event: OnPermissionRequestEvent) => {
-          if (event && (this.getPermissionDialogMessage(event) != "TYPE_SENSOR")) {
-            AlertDialog.show({
-              title: this.resourceToString($r('app.string.on_confirm')) + event.request.getOrigin(),
-              message: this.getPermissionDialogMessage(event),
-              alignment: DialogAlignment.Center,
-              primaryButton: {
-                value: $r('app.string.deny'),
-                action: () => {
-                  event.request.deny();
-                }
-              },
-              secondaryButton: {
-                value: $r('app.string.on_confirm'),
-                action: () => {
-                  event.request.grant(event.request.getAccessibleResource());
-                }
-              },
-              cancel: () => {
-                event.request.deny();
+        if ( deviceInfo.sdkApiVersion >= 20) {
+          Web({ src: "", controller: this.controller, renderMode: this.renderMode })
+            .mixedMode(this.mode)
+            .onPermissionRequest((event: OnPermissionRequestEvent) => {
+              if (event && (this.getPermissionDialogMessage(event) != "TYPE_SENSOR")) {
+                AlertDialog.show({
+                  title: this.resourceToString($r('app.string.on_confirm')) + event.request.getOrigin(),
+                  message: this.getPermissionDialogMessage(event),
+                  alignment: DialogAlignment.Center,
+                  primaryButton: {
+                    value: $r('app.string.deny'),
+                    action: () => {
+                      event.request.deny();
+                    }
+                  },
+                  secondaryButton: {
+                    value: $r('app.string.on_confirm'),
+                    action: () => {
+                      event.request.grant(event.request.getAccessibleResource());
+                    }
+                  },
+                  cancel: () => {
+                    event.request.deny();
+                  }
+                })
+              }
+            })
+            .width(this.webviewWidth)
+            .height(this.webviewHeight)
+            .fileAccess(this.allowFileAccess)
+            .constraintSize({ minHeight: MINHEIGHT })
+            .overScrollMode(this.overScrollMode)
+            .javaScriptAccess(this.javaScriptEnable)
+            .javaScriptOnDocumentStart(this.injectedJavaScriptBeforeContentLoaded)
+            .horizontalScrollBarAccess(this.descriptorWrapper.rawProps.showsHorizontalScrollIndicator)
+            .verticalScrollBarAccess(this.descriptorWrapper.rawProps.showsVerticalScrollIndicator)
+            .overviewModeAccess(this.descriptorWrapper.rawProps.scalesPageToFit)
+            .textZoomRatio(this.descriptorWrapper.rawProps.textZoom)
+            .backgroundColor(BaseOperate.getColorMode(this.ctx.uiAbilityContext,
+              this.descriptorWrapper.rawProps.forceDarkOn) === WebDarkMode.On ? Color.White : Color.Transparent)
+            .darkMode(BaseOperate.getColorMode(this.ctx.uiAbilityContext, this.descriptorWrapper.rawProps.forceDarkOn))
+            .forceDarkAccess(this.forceDark)
+            .cacheMode(this.cacheMode)
+            .minFontSize(this.minFontSize)
+            .domStorageAccess(this.descriptorWrapper.rawProps.domStorageEnabled)
+            .zoomAccess(this.descriptorWrapper.rawProps.scalesPageToFit)
+            .overScrollMode(this.overScrollMode)
+            .onProgressChange((event: OnProgressChangeEvent) => this.onProgressChange(event))
+            .onScroll((event: OnScrollEvent) => this.webViewBaseOperate?.emitScroll(event))
+            .nestedScroll({
+              scrollForward: this.nestedScroll,
+              scrollBackward: this.nestedScroll,
+            })
+            .onLoadStarted(() => this.onPageBegin())
+            .onLoadFinished(() => this.onPageEnd())
+            .onErrorReceive((event: OnErrorReceiveEvent) => this.webViewBaseOperate?.emitLoadingError(event))
+            .onHttpErrorReceive((event: OnHttpErrorReceiveEvent) => this.webViewBaseOperate?.emitHttpError(event))
+            .onControllerAttached(() => this.controllerAttachedInit())
+            .onAlert((event: AlertEvent) => this.onJavascriptAlert(event))
+            .onConfirm((event: AlertEvent) => this.onJavascriptConfirm(event))
+            .onDownloadStart((event: OnDownloadStartEvent) => this.webViewBaseOperate?.onDownloadStart(event))
+            .geolocationAccess(this.descriptorWrapper.rawProps.geolocationEnabled)
+            .onGeolocationShow((event) => {
+              if (event && (this.descriptorWrapper.rawProps.geolocationEnabled != undefined)) {
+                event.geolocation.invoke(event.origin, this.descriptorWrapper.rawProps.geolocationEnabled, true);
+              }
+            })
+            .mediaPlayGestureAccess(this.descriptorWrapper.rawProps.mediaPlaybackRequiresUserAction)
+            .onRenderExited((event: OnRenderExitedEvent) => this.webViewBaseOperate?.onRenderExited(event))
+            .onLoadIntercept((event: OnLoadInterceptEvent) => this.onLoadIntercept(event))
+            .onTitleReceive((event: OnTitleReceiveEvent) => this.webViewBaseOperate?.onTitleReceive(event))
+        } else {
+          Web({ src: "", controller: this.controller, renderMode: this.renderMode })
+            .mixedMode(this.mode)
+            .onPermissionRequest((event: OnPermissionRequestEvent) => {
+              if (event && (this.getPermissionDialogMessage(event) != "TYPE_SENSOR")) {
+                AlertDialog.show({
+                  title: this.resourceToString($r('app.string.on_confirm')) + event.request.getOrigin(),
+                  message: this.getPermissionDialogMessage(event),
+                  alignment: DialogAlignment.Center,
+                  primaryButton: {
+                    value: $r('app.string.deny'),
+                    action: () => {
+                      event.request.deny();
+                    }
+                  },
+                  secondaryButton: {
+                    value: $r('app.string.on_confirm'),
+                    action: () => {
+                      event.request.grant(event.request.getAccessibleResource());
+                    }
+                  },
+                  cancel: () => {
+                    event.request.deny();
+                  }
+                })
               }
             })
-          }
-        })
 
-        .width(this.webviewWidth)
-        .height(this.webviewHeight)
-        .fileAccess(this.allowFileAccess)
-        .constraintSize({ minHeight: MINHEIGHT })
-        .overScrollMode(this.overScrollMode)
-        .javaScriptAccess(this.javaScriptEnable)
-        .javaScriptOnDocumentStart(this.injectedJavaScriptBeforeContentLoaded)
-        .horizontalScrollBarAccess(this.descriptorWrapper.rawProps.showsHorizontalScrollIndicator)
-        .verticalScrollBarAccess(this.descriptorWrapper.rawProps.showsVerticalScrollIndicator)
-        .overviewModeAccess(this.descriptorWrapper.rawProps.scalesPageToFit)
-        .textZoomRatio(this.descriptorWrapper.rawProps.textZoom)
-        .backgroundColor(BaseOperate.getColorMode(this.ctx.uiAbilityContext,
-          this.descriptorWrapper.rawProps.forceDarkOn) === WebDarkMode.On ? Color.White : Color.Transparent)
-        .darkMode(BaseOperate.getColorMode(this.ctx.uiAbilityContext, this.descriptorWrapper.rawProps.forceDarkOn))
-        .forceDarkAccess(this.forceDark)
-        .cacheMode(this.cacheMode)
-        .minFontSize(this.minFontSize)
-        .domStorageAccess(this.descriptorWrapper.rawProps.domStorageEnabled)
-        .zoomAccess(this.descriptorWrapper.rawProps.scalesPageToFit)
-        .overScrollMode(this.overScrollMode)
-        .onProgressChange((event: OnProgressChangeEvent) => this.onProgressChange(event))
-        .onScroll((event: OnScrollEvent) => this.webViewBaseOperate?.emitScroll(event))
-        .nestedScroll({
-          scrollForward: this.nestedScroll,
-          scrollBackward: this.nestedScroll,
-        })
-        .onLoadStarted(() => this.onPageBegin())
-        .onLoadFinished(() => this.onPageEnd())
-        .onErrorReceive((event: OnErrorReceiveEvent) => this.webViewBaseOperate?.emitLoadingError(event))
-        .onHttpErrorReceive((event: OnHttpErrorReceiveEvent) => this.webViewBaseOperate?.emitHttpError(event))
-        .onControllerAttached(() => this.controllerAttachedInit())
-        .onAlert((event: AlertEvent) => this.onJavascriptAlert(event))
-        .onConfirm((event: AlertEvent) => this.onJavascriptConfirm(event))
-        .onDownloadStart((event: OnDownloadStartEvent) => this.webViewBaseOperate?.onDownloadStart(event))
-        .geolocationAccess(this.descriptorWrapper.rawProps.geolocationEnabled)
-        .onGeolocationShow((event) => {
-          if (event && (this.descriptorWrapper.rawProps.geolocationEnabled != undefined)) {
-            event.geolocation.invoke(event.origin, this.descriptorWrapper.rawProps.geolocationEnabled, true);
+            .width(this.webviewWidth)
+            .height(this.webviewHeight)
+            .fileAccess(this.allowFileAccess)
+            .constraintSize({ minHeight: MINHEIGHT })
+            .overScrollMode(this.overScrollMode)
+            .javaScriptAccess(this.javaScriptEnable)
+            .javaScriptOnDocumentStart(this.injectedJavaScriptBeforeContentLoaded)
+            .horizontalScrollBarAccess(this.descriptorWrapper.rawProps.showsHorizontalScrollIndicator)
+            .verticalScrollBarAccess(this.descriptorWrapper.rawProps.showsVerticalScrollIndicator)
+            .overviewModeAccess(this.descriptorWrapper.rawProps.scalesPageToFit)
+            .textZoomRatio(this.descriptorWrapper.rawProps.textZoom)
+            .backgroundColor(BaseOperate.getColorMode(this.ctx.uiAbilityContext,
+              this.descriptorWrapper.rawProps.forceDarkOn) === WebDarkMode.On ? Color.White : Color.Transparent)
+            .darkMode(BaseOperate.getColorMode(this.ctx.uiAbilityContext, this.descriptorWrapper.rawProps.forceDarkOn))
+            .forceDarkAccess(this.forceDark)
+            .cacheMode(this.cacheMode)
+            .minFontSize(this.minFontSize)
+            .domStorageAccess(this.descriptorWrapper.rawProps.domStorageEnabled)
+            .zoomAccess(this.descriptorWrapper.rawProps.scalesPageToFit)
+            .overScrollMode(this.overScrollMode)
+            .onProgressChange((event: OnProgressChangeEvent) => this.onProgressChange(event))
+            .onScroll((event: OnScrollEvent) => this.webViewBaseOperate?.emitScroll(event))
+            .nestedScroll({
+              scrollForward: this.nestedScroll,
+              scrollBackward: this.nestedScroll,
+            })
+            .onPageBegin(() => this.onPageBegin())
+            .onPageEnd(() => this.onPageEnd())
+            .onErrorReceive((event: OnErrorReceiveEvent) => this.webViewBaseOperate?.emitLoadingError(event))
+            .onHttpErrorReceive((event: OnHttpErrorReceiveEvent) => this.webViewBaseOperate?.emitHttpError(event))
+            .onControllerAttached(() => this.controllerAttachedInit())
+            .onAlert((event: AlertEvent) => this.onJavascriptAlert(event))
+            .onConfirm((event: AlertEvent) => this.onJavascriptConfirm(event))
+            .onDownloadStart((event: OnDownloadStartEvent) => this.webViewBaseOperate?.onDownloadStart(event))
+            .geolocationAccess(this.descriptorWrapper.rawProps.geolocationEnabled)
+            .onGeolocationShow((event) => {
+              if (event && (this.descriptorWrapper.rawProps.geolocationEnabled != undefined)) {
+                event.geolocation.invoke(event.origin, this.descriptorWrapper.rawProps.geolocationEnabled, true);
+              }
+            })
+            .mediaPlayGestureAccess(this.descriptorWrapper.rawProps.mediaPlaybackRequiresUserAction)
+            .onRenderExited((event: OnRenderExitedEvent) => this.webViewBaseOperate?.onRenderExited(event))
+            .onLoadIntercept((event: OnLoadInterceptEvent) => this.onLoadIntercept(event))
+            .onTitleReceive((event: OnTitleReceiveEvent) => this.webViewBaseOperate?.onTitleReceive(event))
+
           }
-        })
-        .mediaPlayGestureAccess(this.descriptorWrapper.rawProps.mediaPlaybackRequiresUserAction)
-        .onRenderExited((event: OnRenderExitedEvent) => this.webViewBaseOperate?.onRenderExited(event))
-        .onLoadIntercept((event: OnLoadInterceptEvent) => this.onLoadIntercept(event))
-        .onTitleReceive((event: OnTitleReceiveEvent) => this.webViewBaseOperate?.onTitleReceive(event))
-    }
+      }
     .width(this.webviewWidth)
     .height(this.webviewHeight)
     .position({
@@ -579,12 +658,41 @@ export struct RNCWebView {
     }
   }
 
+  private registerJavaScriptProxyOnly() {
+    if (this.messagingEnabled == this.descriptorWrapper.rawProps.messagingEnabled && this.hasRegisterJavaScriptProxy) {
+      return;
+    }
+    this.messagingEnabled = this.descriptorWrapper.rawProps.messagingEnabled;
+    if (this.messagingEnabled) {
+      let bridge: RNCWebViewBridge = {
+        postMessage: (data: string) => {
+          Logger.debug(TAG, `[RNOH] bridge postMessage,  ${JSON.stringify(data)}`);
+          if (this.controller != null) {
+            let result: WebViewEventParams = this.createWebViewEvent("onMessage")
+            if (result) {
+              result.data = data.toString()
+              result.lockIdentifier = this.webViewBaseOperate?.getLockIdentifier()
+              this.eventEmitter!.emit("message", result as ResultType);
+            }
+          }
+        }
+      };
+      this.controller.registerJavaScriptProxy(bridge, JAVASCRIPT_INTERFACE, ["postMessage"])
+      this.hasRegisterJavaScriptProxy = true
+      Logger.debug(TAG, "[RNOH] JavaScript Proxy registered without reloading page")
+    }
+  }
+
   private registerPostMessage() {
     if (this.messagingEnabled == this.descriptorWrapper.rawProps.messagingEnabled) {
       return;
     }
     this.messagingEnabled = this.descriptorWrapper.rawProps.messagingEnabled;
     if (this.messagingEnabled) {
+      if (this.hasRegisterJavaScriptProxy) {
+        Logger.debug(TAG, "[RNOH] JavaScript Proxy already registered")
+        return
+      }
       let bridge: RNCWebViewBridge = {
         postMessage: (data: string) => {
           Logger.debug(TAG, `[RNOH] bridge postMessage,  ${JSON.stringify(data)}`);
@@ -599,8 +707,13 @@ export struct RNCWebView {
         }
       };
       this.controller.registerJavaScriptProxy(bridge, JAVASCRIPT_INTERFACE, ["postMessage"])
-      this.source.uri ?
-      this.controller.loadUrl(this.source.uri, this.headers) : this.controller.refresh()
+      if (this.source.uri && !this.source.html) {
+        this.controller.loadUrl(this.source.uri, this.headers)
+      } else if (this.source.html) {
+        Logger.debug(TAG, "[RNOH] JavaScript Proxy registered, HTML content will use it on next load")
+      } else {
+        this.controller.refresh()
+      }
       this.hasRegisterJavaScriptProxy = true
     }
   }

package/harmony/rn_webview/src/main/ets/WebViewBaseOperate.ets

@@ -190,10 +190,24 @@ export class BaseOperate {
     }
   }
 
-  emitShouldStartLoadWithRequest(event: OnLoadInterceptEvent) {
+  verifyURLFormat(url: string, html: string | undefined, baseUrl: string | undefined) {
+    const dataUrlPattern = /^data:text\/html;/;
+    if (dataUrlPattern.test(url)){
+      if (html != undefined && html != "") {
+        if (baseUrl != undefined && baseUrl != "") {
+          url = baseUrl.toLowerCase();
+        } else {
+          url = 'about:blank';
+        }
+      }
+    }
+    return url;
+  }
+
+  emitShouldStartLoadWithRequest(event: OnLoadInterceptEvent, html: string | undefined, baseUrl: string | undefined) {
     try {
       this.eventEmitter!.emit('shouldStartLoadWithRequest', {
-        url: event.data.getRequestUrl(),
+        url: this.verifyURLFormat(event.data.getRequestUrl(), html, baseUrl),
         loading: false,
         title: this.controller.getTitle(),
         canGoBack: this.controller.accessBackward(),

package/package.json

@@ -9,7 +9,7 @@
     "Thibault Malbranche <malbranche.thibault@gmail.com>"
   ],
   "license": "MIT",
-  "version": "13.10.5-rc.1",
+  "version": "13.10.5-rc.3",
   "homepage": "https://github.com/react-native-oh-library/react-native-webview#readme",
   "scripts": {
     "macos": "react-native run-macos --scheme WebviewExample --project-path example/macos",
@@ -37,8 +37,7 @@
   "dependencies": {
     "escape-string-regexp": "2.0.0",
     "invariant": "2.2.4",
-    "react-native-webview": "13.10.2",
-    "yarn": "^1.22.22"
+    "react-native-webview": "13.10.2"
   },
   "devDependencies": {
     "@babel/cli": "^7.20.0",
@@ -54,14 +53,12 @@
     "@semantic-release/git": "7.0.16",
     "@types/invariant": "^2.2.30",
     "@types/jest": "^29.5.12",
-    "@types/minimatch": "^6.0.0",
     "@types/react": "18.2.61",
     "@types/selenium-webdriver": "4.0.9",
     "appium": "1.17.0",
     "eslint": "8.57.0",
     "jest": "^29.6.3",
     "metro-react-native-babel-preset": "0.73.7",
-    "minimatch": "^10.0.3",
     "prettier": "2.8.8",
     "react": "18.2.0",
     "react-native": "0.73.5",
@@ -92,14 +89,14 @@
   ],
   "publishConfig": {
     "registry": "https://registry.npmjs.org/",
-    "access": "public"
+     "access": "public"
   },
   "harmony": {
     "alias": "react-native-webview",
     "autolinking": {
-      "etsPackageClassName": "WebViewPackage",
-      "cppPackageClassName": "WebViewPackage",
-      "cmakeLibraryTargetName": "rnoh_webview",
+      "etsPackageClassName":"WebViewPackage",
+      "cppPackageClassName":"WebViewPackage",
+      "cmakeLibraryTargetName": "rnoh_webview", 
       "ohPackageName": "@react-native-ohos/react-native-webview"
     }
   },