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

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

@@ -0,0 +1,607 @@
+/**
+ * MIT License
+ *
+ * Copyright (C) 2025 Huawei Device Co., Ltd.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+import { RNComponentContext } from '@rnoh/react-native-openharmony';
+import webview from '@ohos.web.webview';
+import { url as OSUrl } from '@kit.ArkTS';
+import { RNC, TM } from './generated';
+import Logger from './Logger';
+import { BaseOperate } from './WebViewBaseOperate';
+import {
+  AlertEvent,
+  CACHE_MODE,
+  JAVASCRIPT_INTERFACE,
+  ONE_HUNDRED,
+  EIGHT,
+  ResultType,
+  RNCWebViewBridge,
+  WebViewEventParams,
+  WebViewNewSource,
+  WebViewOverScrollMode,
+  ZERO,
+  COMMAND_NAME,
+  WebViewDescriptor,
+  REFRESH_OFFSET,
+  MINHEIGHT,
+} from './Magic';
+
+import { bundleManager } from '@kit.AbilityKit';
+import { WebViewTurboModule, ShouldStartParams, ShouldOverrideCallbackState } from './WebViewTurboModule';
+import { AnyThreadRNInstance, WorkerTaskRunnable } from '@rnoh/react-native-openharmony/src/main/ets/RNOH';
+import buffer from '@ohos.buffer';
+
+export const TAG = "WebView"
+
+export const WEB_VIEW = "RNCWebView"
+
+@Sendable
+class WorkerRunnable implements WorkerTaskRunnable<ShouldStartParams> {
+  run(rnInstance: AnyThreadRNInstance, params: ShouldStartParams): void {
+    rnInstance.getTurboModule<WebViewTurboModule>(TM.RNCWebViewModule.NAME).setShouldStartParams(params)
+  }
+}
+
+@Component
+export struct RNCWebView {
+  public static readonly NAME = RNC.RNCWebView.NAME
+  ctx!: RNComponentContext
+  tag: number = ZERO
+  source: WebViewNewSource = {
+    uri: "",
+    method: "",
+    body: "",
+    html: "",
+    baseUrl: ""
+  }
+  html: string | undefined = "";
+  url: string | Resource = "";
+  body: string | undefined = "";
+  controller: webview.WebviewController = new webview.WebviewController();
+  schemeHandler: webview.WebSchemeHandler = new webview.WebSchemeHandler();
+  javaScriptEnable: boolean = true;
+  allowFileAccess: boolean = true;
+  forceDark: boolean = true;
+  minFontSize: number = EIGHT;
+  overScrollMode: OverScrollMode = OverScrollMode.NEVER;
+  progress: number = ZERO;
+  cacheMode: number = CacheMode.Default;
+  requestUrl: string = "";
+  bundleName: string = "";
+  messagingEnabled: boolean = false;
+  hasRegisterJavaScriptProxy: boolean = false;
+  controllerAttached: boolean = false;
+  renderMode: RenderMode = RenderMode.SYNC_RENDER;
+  scrollEnabled = true;
+  nestedScroll = NestedScrollMode.SELF_FIRST;
+  headers: Array<webview.WebHeader> = []
+  injectedJavaScriptBeforeContentLoaded: Array<ScriptItem> = [
+    { script: '', scriptRules: ["*"] }
+  ];
+  allowPageStartInProgress = true;
+  @State webviewWidth: number = ZERO
+  @State webviewHeight: number = ZERO
+  @State isRefreshing: boolean = false
+  @State mode: MixedMode = MixedMode.All;
+  private unregisterDescriptorChangesListener?: () => void = undefined
+  private cleanupCommandCallback?: () => void = undefined
+  private eventEmitter: RNC.RNCWebView.EventEmitter | undefined = undefined
+  private cleanUpCallbacks: (() => void)[] = []
+  private descriptorWrapper: WebViewDescriptor = Object() as WebViewDescriptor
+  private webViewBaseOperate: BaseOperate | null = null
+  private shouldInterceptLoad: boolean = true
+  private callLoadTimer: number = -1
+  static readonly SHOULD_OVERRIDE_URL_LOADING_TIMEOUT: number = 250
+
+  aboutToAppear() {
+    try {
+      this.initVariable()
+      this.getBundleName()
+      this.url = this.source.uri as string;
+      this.onDescriptorWrapperChange(this.descriptorWrapper)
+      this.unregisterDescriptorChangesListener = this.ctx.descriptorRegistry.subscribeToDescriptorChanges(this.tag,
+        (newDescriptor) => {
+          this.onDescriptorWrapperChange(newDescriptor as WebViewDescriptor)
+        }
+      )
+      BaseOperate.setThirdPartyCookiesEnabled(this.descriptorWrapper.rawProps.thirdPartyCookiesEnabled)
+      webview.WebviewController.setWebDebuggingAccess(this.descriptorWrapper.rawProps.webviewDebuggingEnabled)
+      this.registerCommandCallback()
+      if (this.hasIncognito()) {
+        this.cacheMode = CacheMode.Online;
+      }
+      if (this.source.headers) {
+        this.source.headers.forEach(item => {
+          if (item.name && item.value) {
+            this.headers.push({ headerKey: item.name, headerValue: item.value })
+          }
+        })
+      }
+    } catch (error) {
+      Logger.error(TAG, `[RNOH]Errorcode: ${error.code}, Message: ${error.message}`);
+    }
+
+  }
+
+  hasIncognito(): boolean {
+    return this.descriptorWrapper.rawProps.incognito && this.descriptorWrapper.rawProps.incognito === true
+  }
+
+  createWebViewEvent(type: string): WebViewEventParams {
+    return this.webViewBaseOperate?.createWebViewEvent({ type, progress: this.progress }) as WebViewEventParams;
+  }
+
+  aboutToDisappear() {
+    this.getUIContext().getFocusController().clearFocus()
+    this.cleanupCommandCallback?.()
+    this.unregisterDescriptorChangesListener?.()
+    this.cleanUpCallbacks.forEach(cb => cb())
+    try {
+      if (this.hasIncognito()) {
+        this.webViewBaseOperate?.setIncognito()
+      }
+      this.controller.deleteJavaScriptRegister(JAVASCRIPT_INTERFACE)
+      this.controller.refresh()
+      this.hasRegisterJavaScriptProxy = false
+      this.webViewBaseOperate = null
+    } catch (error) {
+      Logger.error(TAG, `[RNOH]Errorcode: ${error.code}, Message: ${error.message}`);
+    }
+  }
+
+  registerCommandCallback() {
+    this.cleanupCommandCallback = this.ctx.componentCommandReceiver.registerCommandCallback(
+      this.tag,
+      (command: COMMAND_NAME, args: string[]) => this.webViewBaseOperate?.registerCommandCallback(command, args));
+  }
+
+  onLoadingStart() {
+    this.webViewBaseOperate?.emitLoadingStart({ progress: this.progress })
+  }
+
+  onProgressChange(event: OnProgressChangeEvent) {
+    this.progress = event.newProgress
+    // 修复单页面应用切换路由时 onPageBegin 未触发的问题
+    if (this.controller.getUrl() !== this.url && this.progress < ONE_HUNDRED && this.allowPageStartInProgress) {
+      this.allowPageStartInProgress = false;
+      this.onLoadingStart();
+    }
+    this.webViewBaseOperate?.emitProgressChange({ progress: this.progress })
+    if (this.progress === ONE_HUNDRED) {
+      this.allowPageStartInProgress = true;
+    }
+  }
+
+  onLoadingFinish() {
+    this.webViewBaseOperate?.emitLoadingFinish({ progress: this.progress })
+    this.isRefreshing = false
+  }
+
+  runInjectedJavaScript() {
+    let injectedJS = this.descriptorWrapper.rawProps.injectedJavaScript
+    if (this.javaScriptEnable && injectedJS != "" && this.controllerAttached) {
+      try {
+        this.controller.runJavaScript("(function() {\n" + injectedJS + ";\n})();")
+          .then((result) => {
+            Logger.debug(TAG, '[RNOH] result: ' + result);
+          })
+          .catch((error: string | Error) => {
+            Logger.error(TAG, "[RNOH] error: " + error);
+          })
+      } catch (error) {
+        Logger.error(TAG, `[RNOH]Errorcode: ${error.code}, Message: ${error.message}`);
+      }
+    }
+  }
+
+  getJsDialogTitle() {
+    const url = this.controller.getUrl()
+    // 对于 data: URL，只显示 'JavaScript'，类似于 Chrome
+    let title = 'JavaScript';
+    const isDataUrl = (url !== null) && url.startsWith("data:");
+
+
+    if (!isDataUrl) {
+      try {
+        const dialogUrl = OSUrl.URL.parseURL(url);
+        title = `网址为”${dialogUrl.protocol}//${dialogUrl.host}“的网页显示：`;
+      } catch (ex) {
+        title = url;
+      }
+    }
+
+    return title;
+  }
+
+  onJavascriptAlert(event?: AlertEvent) {
+    if (event) {
+      AlertDialog.show({
+        title: this.getJsDialogTitle(),
+        message: event.message,
+        alignment: DialogAlignment.Center,
+        secondaryButton: {
+          value: this.resourceToString($r('app.string.determined')),
+          action: () => event.result.handleConfirm()
+        },
+        cancel: () => event.result.handleCancel(),
+      })
+    }
+    return true
+  }
+
+  onJavascriptConfirm(event?: AlertEvent) {
+    if (event) {
+      AlertDialog.show({
+        title: this.getJsDialogTitle(),
+        message: event.message,
+        alignment: DialogAlignment.Center,
+        secondaryButton: {
+          value: this.resourceToString($r('app.string.determined')),
+          action: () => event.result.handleConfirm()
+        },
+        cancel: () => event.result.handleCancel(),
+        primaryButton: {
+          value: this.resourceToString($r('app.string.cancel')),
+          action: () => event.result.handleCancel()
+        },
+      })
+    }
+    return true
+  }
+
+  ignoreSilentHardwareSwitchMethods(ignoreSilentHardwareSwitch: boolean) {
+    this.webViewBaseOperate?.ignoreSilentHardwareSwitchMethods(ignoreSilentHardwareSwitch)
+  }
+
+  loadHtmlData(html: string = '', url: string = '') {
+    try {
+      this.controller.loadData(
+        html,
+        "text/html",
+        "UTF-8",
+        url,
+        " "
+      );
+    } catch (error) {
+      Logger.error(TAG, "error:" + error)
+    }
+  }
+
+  controllerAttachedInit(): void {
+    this.controllerAttached = true;
+    this.eventEmitter = new RNC.RNCWebView.EventEmitter(this.ctx.rnInstance, this.tag)
+    this.webViewBaseOperate = new BaseOperate(this.eventEmitter, this.controller)
+    this.webViewBaseOperate.setCustomUserAgent(this.descriptorWrapper.rawProps.userAgent,
+      this.descriptorWrapper.rawProps.applicationNameForUserAgent)
+    this.webViewBaseOperate.setFraudulentWebsiteWarningEnabled(this.descriptorWrapper.rawProps.fraudulentWebsiteWarningEnabled)
+
+    let schemeList = this.descriptorWrapper.rawProps.schemeList
+    if(schemeList?.length){
+      schemeList.forEach(scheme=>{
+        this.schemeHandler.onRequestStart((request: webview.WebSchemeHandlerRequest, resourceHandler: webview.WebResourceHandler) => {
+          console.log("[schemeHandler] onRequestStart");
+          return true;
+        })
+        this.schemeHandler.onRequestStop((request: webview.WebSchemeHandlerRequest) => {
+          console.log("[schemeHandler] onRequestStop");
+        });
+        this.controller.setWebSchemeHandler(scheme, this.schemeHandler);
+      })
+    }
+
+    let baseUrl = this.source.baseUrl
+    let uri = this.source.uri
+    if (this.source.html != undefined && this.source.html != "") {
+      this.loadHtmlData(this.source.html, baseUrl)
+    } else if (uri != undefined && uri != "") {
+      if (this.source.method && this.source.method.toUpperCase() === 'POST' && this.source.body) {
+        let postData = buffer.from(this.source.body);
+        let url = uri as string;
+        this.controller.postUrl(url, postData?.buffer);
+      } else {
+        this.controller.loadUrl(uri, this.headers);
+      }
+    } else {
+      this.loadHtmlData()
+    }
+    if (!this.hasRegisterJavaScriptProxy) {
+      this.registerPostMessage()
+    }
+  }
+
+  onPageBegin() {
+    try {
+      if (this.controller.getUrl() === this.url) {
+        this.onLoadingStart();
+      }
+      this.controller.setScrollable(this.scrollEnabled)
+      this.ignoreSilentHardwareSwitchMethods(this.descriptorWrapper.rawProps.ignoreSilentHardwareSwitch)
+    } catch (error) {
+      Logger.debug(TAG,
+        `[RNOH] setignoreSilentHardwareSwitch and setScrollable ErrorCode: ${error.code},  Message: ${error.message}, userAgent: ${this.descriptorWrapper.rawProps.userAgent}`);
+    }
+  }
+
+  getBundleName() {
+    let bundleFlags =
+      bundleManager.BundleFlag.GET_BUNDLE_INFO_WITH_HAP_MODULE | bundleManager.BundleFlag.GET_BUNDLE_INFO_WITH_ABILITY |
+      bundleManager.BundleFlag.GET_BUNDLE_INFO_WITH_REQUESTED_PERMISSION;
+
+    try {
+      bundleManager.getBundleInfoForSelf(bundleFlags, (error, data) => {
+        if (error) {
+          Logger.error(TAG,
+            `[RNOH] getBundleInfoForSelf failed ErrorCode: ${error.code},  Message: ${error.message}`);
+        } else {
+          this.bundleName = JSON.stringify(data.name)
+        }
+      });
+    } catch (error) {
+      Logger.error(TAG,
+        `[RNOH] getBundleInfoForSelf failed ErrorCode: ${error.code},  Message: ${error.message}`);
+    }
+  }
+
+  resourceToString(resource: Resource): string {
+    return getContext(this).resourceManager.getStringSync(resource)
+  }
+
+  onPageEnd() {
+    this.runInjectedJavaScript()
+    this.onLoadingFinish()
+  }
+
+  getPermissionDialogMessage(event: OnPermissionRequestEvent) {
+    let permissionDialogMessage = ''
+    permissionDialogMessage = event.request.getAccessibleResource().toString()
+    switch (permissionDialogMessage) {
+      case ProtectedResourceType.VIDEO_CAPTURE:
+        permissionDialogMessage = this.resourceToString($r('app.string.use_your_camera'))
+        break;
+      case ProtectedResourceType.AUDIO_CAPTURE:
+        permissionDialogMessage = this.resourceToString($r('app.string.use_your_microphone'))
+        break;
+      case ProtectedResourceType.MidiSysex:
+        permissionDialogMessage = this.resourceToString($r('app.string.midi_sysex_resources'))
+        break;
+      case ProtectedResourceType.VIDEO_CAPTURE + "," + ProtectedResourceType.AUDIO_CAPTURE:
+        permissionDialogMessage = this.resourceToString($r('app.string.use_your_camera_and_microphone'))
+        break;
+    }
+    return permissionDialogMessage;
+  }
+
+  onLoadIntercept(event: OnLoadInterceptEvent): boolean {
+    Logger.debug(TAG, `onLoadIntercept start`)
+    this.webViewBaseOperate?.setLockIdentifier(BaseOperate.generateLockIdentifier())
+
+    const params = new ShouldStartParams();
+    params.lockIdentifier = this.webViewBaseOperate?.getLockIdentifier() || -1
+    this.ctx.runOnWorkerThread(new WorkerRunnable(), params);
+    this.webViewBaseOperate?.emitShouldStartLoadWithRequest(event)
+    const startTime = Date.now();
+    // 当lockState没变化并且小于超时时间，阻塞进程
+    while (params.lockState === ShouldOverrideCallbackState.UNDECIDED &&
+      Date.now() - startTime < RNCWebView.SHOULD_OVERRIDE_URL_LOADING_TIMEOUT) {
+      // 空循环等待
+    }
+
+    Logger.debug('params.lockState res:' + params.lockState + `, wait time is ${Date.now() - startTime}`);
+    return params.lockState === ShouldOverrideCallbackState.SHOULD_OVERRIDE;
+  }
+
+  onOverrideUrlLoading(event: WebResourceRequest) {
+    this.webViewBaseOperate?.emitShouldStartLoadWithRequestOverrideUrlLoading(event)
+    return false
+  }
+
+  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();
+              }
+            })
+          }
+        })
+
+        .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))
+    }
+    .width(this.webviewWidth)
+    .height(this.webviewHeight)
+    .position({
+      x: this.descriptorWrapper.layoutMetrics.frame.origin.x,
+      y: this.descriptorWrapper.layoutMetrics.frame.origin.y
+    })
+  }
+
+  private onDescriptorWrapperChange(descriptorWrapper: WebViewDescriptor) {
+    this.initVariable()
+    this.descriptorWrapper = descriptorWrapper
+    if (this.source.html != "" && this.html != this.source.html) {
+      if (this.controllerAttached) {
+        this.loadHtmlData(this.source.html, this.source.baseUrl)
+        Logger.debug(TAG, "[RNOH] html is update")
+        this.html = this.source.html
+      }
+    } else if (this.source.uri && this.source.method && this.source.method.toUpperCase() === 'POST' && this.source.body && (this.source.uri != this.url || this.body != this.source.body)) {
+      if (this.controllerAttached) {
+        let url = this.source.uri as string;
+        this.url = url;
+        this.body = this.source.body;
+        let postData = buffer.from(this.source.body);
+        this.controller.postUrl(url, postData?.buffer);
+      }
+    } else if (this.url != this.source.uri) {
+      if (this.source.uri != "") {
+        Logger.debug(TAG, `[RNOH] newDescriptor props update uri: ` + this.source.uri);
+        if (this.controllerAttached) {
+          this.controller.loadUrl(this.descriptorWrapper.rawProps.newSource.uri, this.headers)
+        }
+      } else {
+        this.loadHtmlData()
+      }
+      this.url = this.source.uri as string;
+    }
+    if (this.controllerAttached) {
+      this.controller?.setScrollable(this.descriptorWrapper.rawProps.scrollEnabled)
+    }
+  }
+
+  private initVariable() {
+    this.descriptorWrapper = this.ctx.descriptorRegistry.getDescriptor<WebViewDescriptor>(this.tag)
+    this.javaScriptEnable = this.descriptorWrapper.rawProps.javaScriptEnabled;
+    this.minFontSize =
+      this.descriptorWrapper.rawProps.minimumFontSize ? this.descriptorWrapper.rawProps.minimumFontSize : EIGHT;
+    this.cacheMode =
+      this.descriptorWrapper.rawProps.cacheEnabled ?
+        this.webViewBaseOperate?.transCacheMode(this.descriptorWrapper.rawProps.cacheMode as CACHE_MODE) as number :
+      CacheMode.Online;
+    this.source = {
+      uri: this.descriptorWrapper.rawProps.newSource.uri ?? "",
+      method: this.descriptorWrapper.rawProps.newSource.method ?? "",
+      body: this.descriptorWrapper.rawProps.newSource.body ?? "",
+      html: this.descriptorWrapper.rawProps.newSource.html ?? "",
+      baseUrl: this.descriptorWrapper.rawProps.newSource.baseUrl ?? "",
+      headers: this.descriptorWrapper.rawProps.newSource.headers ?? []
+    }
+    if (this.source.headers) {
+      this.source.headers.forEach(item => {
+        if (item.name && item.value) {
+          this.headers.push({ headerKey: item.name, headerValue: item.value })
+        }
+      })
+    }
+    // this.html = this.source.html
+    this.webviewWidth = this.descriptorWrapper.layoutMetrics.frame.size.width
+    this.webviewHeight = this.descriptorWrapper.layoutMetrics.frame.size.height
+    this.scrollEnabled = this.descriptorWrapper.rawProps.scrollEnabled;
+    // 当禁止滚动时，使用父组件滚动
+    this.nestedScroll = this.scrollEnabled ? NestedScrollMode.SELF_FIRST : NestedScrollMode.PARENT_FIRST;
+    if (this.source.uri && this.source.uri.toString().startsWith("asset://")) {
+      this.source.uri = $rawfile(this.source.uri.toString().replace("asset://", this.ctx.rnInstance.getAssetsDest()));
+    }
+
+    if (this.descriptorWrapper.rawProps.overScrollMode === WebViewOverScrollMode.ALWAYS) {
+      this.overScrollMode = OverScrollMode.ALWAYS
+    } else if (this.descriptorWrapper.rawProps.overScrollMode === WebViewOverScrollMode.NEVER) {
+      this.overScrollMode = OverScrollMode.NEVER
+    }
+
+    this.overScrollMode = this.descriptorWrapper.rawProps.bounces ? OverScrollMode.ALWAYS : OverScrollMode.NEVER;
+
+    if (this.descriptorWrapper.rawProps.injectedJavaScriptBeforeContentLoaded) {
+      this.injectedJavaScriptBeforeContentLoaded = [
+        { script: this.descriptorWrapper.rawProps.injectedJavaScriptBeforeContentLoaded, scriptRules: ["*"] }
+      ];
+    }
+  }
+
+  private registerPostMessage() {
+    if (this.messagingEnabled == this.descriptorWrapper.rawProps.messagingEnabled) {
+      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.source.uri ?
+      this.controller.loadUrl(this.source.uri, this.headers) : this.controller.refresh()
+      this.hasRegisterJavaScriptProxy = true
+    }
+  }
+}

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

@@ -0,0 +1,66 @@
+/**
+ * MIT License
+ *
+ * Copyright (C) 2025 Huawei Device Co., Ltd.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+import type {
+  DescriptorWrapperFactoryByDescriptorType,
+  DescriptorWrapperFactoryByDescriptorTypeCtx,
+} from '@rnoh/react-native-openharmony/ts';
+import { RNC, TM } from './generated/ts';
+import { AnyThreadTurboModuleFactory, AnyThreadTurboModule } from '@rnoh/react-native-openharmony/ts';
+import { RNOHPackage, ComponentBuilderContext } from '@rnoh/react-native-openharmony';
+import { WebViewTurboModule } from './WebViewTurboModule'
+import { WorkerTurboModuleContext } from '@rnoh/react-native-openharmony/src/main/ets/RNOH/RNOHContext';
+import { RNCWebView } from './RNCWebView';
+@Builder
+function buildWebView(ctx: ComponentBuilderContext) {
+  RNCWebView({ ctx: ctx.rnComponentContext, tag: ctx.tag, })
+}
+export class RNCWebViewPackage extends RNOHPackage  {
+  createDescriptorWrapperFactoryByDescriptorType(ctx: DescriptorWrapperFactoryByDescriptorTypeCtx): DescriptorWrapperFactoryByDescriptorType {
+    return {
+      "RNCWebView": (ctx) => new RNC.RNCWebView.DescriptorWrapper(ctx.descriptor)
+    }
+  }
+
+  createAnyThreadTurboModuleFactory(ctx: WorkerTurboModuleContext): AnyThreadTurboModuleFactory {
+    return new WebViewTurboModulesFactory(ctx);
+  }
+
+  createWrappedCustomRNComponentBuilderByComponentNameMap(): Map<string, WrappedBuilder<[ComponentBuilderContext]>> {
+    return new Map().set(RNCWebView.NAME, wrapBuilder(buildWebView))
+  }
+}
+
+class WebViewTurboModulesFactory extends AnyThreadTurboModuleFactory {
+  createTurboModule(name: string): AnyThreadTurboModule | null {
+    if (name === TM.RNCWebViewModule.NAME) {
+      return new WebViewTurboModule(this.ctx);
+    }
+    return null;
+  }
+
+  hasTurboModule(name: string): boolean {
+    return name === TM.RNCWebViewModule.NAME;
+  }
+}