feat: support embedded webview

crates/ability/src/app.rs

@@ -541,7 +541,7 @@ impl OpenHarmonyApp {
 
         Ok(requested_permissions
             .into_iter()
-            .zip(codes.into_iter())
+            .zip(codes)
             .map(|(permission, code)| PermissionRequestCode { permission, code })
             .collect())
     }

crates/ability/src/helper/webview.rs

@@ -261,6 +261,19 @@ impl Webview {
         }
     }
 
+    pub fn dispose(&self) -> Result<()> {
+        if let Some(env) = get_main_thread_env().borrow().as_ref() {
+            let dispose_js_function = self
+                .inner
+                .get_value(env)?
+                .get_named_property::<Function<'_, (), ()>>("dispose")?;
+            dispose_js_function.call(())?;
+            Ok(())
+        } else {
+            Err(Error::from_reason("Failed to get main thread env"))
+        }
+    }
+
     pub fn clear_all_browsing_data(&self) -> Result<()> {
         if let Some(env) = get_main_thread_env().borrow().as_ref() {
             let clear_all_browsing_data_js_function = self

native_ability/src/main/ets/ability/type.ets

@@ -60,6 +60,8 @@ export interface WebViewInitData {
 export interface WebViewStyle {
   x?: number | string;
   y?: number | string;
+  visible?: boolean;
+  backgroundColor?: string | Color;
 }
 
 export interface AbilityInitContext {
@@ -79,6 +81,7 @@ export interface Module {
 export interface ArkHelper {
   exit: (code: number) => void;
   createWebview: (data: WebViewInitData) => Object;
+  createEmbeddedWebview: (data: WebViewInitData) => Object;
   requestPermission: (permission: string | string[]) => Promise<number | number[]>;
   getWindowAvoidArea: (type: number) => WindowAvoidAreaInfo | undefined;
 }

native_ability/src/main/ets/components/DefaultXComponent.ets

@@ -4,12 +4,13 @@ import {
   WebViewInitData as NativeWebViewInitData,
   WindowAvoidAreaInfo,
 } from "../ability/type";
-import { exit } from "../helper";
+import { exit, objectAssign } from "../helper";
 import { Loadable } from "../helper/loadable";
 import { requestPermission } from "../helper/permission";
 import common from "@ohos.app.ability.common";
 import window from "@ohos.window";
 import {
+  EmbeddedWebviewManager,
   RustWebviewNodeController,
   WebviewStyle,
   WebviewInitData,
@@ -21,6 +22,7 @@ export struct DefaultXComponent {
   moduleName: string = "";
   private rootSlot = new NodeContent();
   private webviewController = new RustWebviewNodeController(this.getUIContext());
+  private embeddedWebviewManager = new EmbeddedWebviewManager(this.getUIContext());
   private nativeModule: ESObject;
   private helper: ArkHelper = {
     exit,
@@ -66,25 +68,82 @@ export struct DefaultXComponent {
         onTitleChange: data?.onTitleChange,
       } as WebviewInitData;
 
-      if (data?.transparent && !init.style?.backgroundColor) {
-        init.style!.backgroundColor = Color.Transparent;
+      init.style = init.style || {};
+
+      if (data?.transparent && !init.style.backgroundColor) {
+        init.style.backgroundColor = Color.Transparent;
       }
       const ret = this.webviewController.addWebview(init);
+      const applyStyle = (style: WebviewStyle) => {
+        objectAssign(init.style as Record<string, ESObject>, style);
+        this.webviewController.updateWebviewStyle(ret.webTag, init.style as WebviewStyle);
+      };
 
       ret.controller.setBackgroundColor = (color: string) => {
-        init.style!.backgroundColor = color;
-        const node = this.webviewController.getWebviewNode(ret.webTag);
-        node?.update(init);
+        applyStyle({ backgroundColor: color });
       };
 
       ret.controller.setVisible = (visible: boolean) => {
-        init.style!.visible = visible ? "visible" : "hidden";
-        const node = this.webviewController.getWebviewNode(ret.webTag);
-        node?.update(init);
+        applyStyle({ visible });
+      };
+
+      ret.controller.dispose = () => {
+        this.webviewController.removeWebview(ret.webTag);
       };
 
       return ret.controller;
     },
+    createEmbeddedWebview: (data: NativeWebViewInitData) => {
+      const initScripts: ScriptItem[] = (data?.initializationScripts || []).map((i) => {
+        return {
+          script: i,
+          scriptRules: ["*"],
+        } as ScriptItem;
+      });
+      const init: WebviewInitData = {
+        webTag: data?.id,
+        url: data?.url,
+        html: data?.html,
+        headers: data?.headers,
+        style: (data.style || {}) as WebviewStyle,
+        javascriptEnable: data?.javascriptEnable ?? true,
+        userAgent: data?.userAgent,
+        devtools: data?.devtools,
+        autoplay: data?.autoplay,
+        initializationScripts: initScripts,
+        onDragAndDrop: data?.onDragAndDrop,
+        onDownloadStart: data?.onDownloadStart,
+        onDownloadEnd: data?.onDownloadEnd,
+        onNavigationRequest: data?.onNavigationRequest,
+        onTitleChange: data?.onTitleChange,
+      } as WebviewInitData;
+
+      init.style = init.style || {};
+
+      if (data?.transparent && !init.style.backgroundColor) {
+        init.style.backgroundColor = Color.Transparent;
+      }
+
+      const ret = this.embeddedWebviewManager.createWebview(init);
+      const applyStyle = (style: WebviewStyle) => {
+        objectAssign(init.style as Record<string, ESObject>, style);
+        this.embeddedWebviewManager.updateWebviewStyle(ret.webTag, init.style as WebviewStyle);
+      };
+
+      ret.controller.setBackgroundColor = (color: string) => {
+        applyStyle({ backgroundColor: color });
+      };
+
+      ret.controller.setVisible = (visible: boolean) => {
+        applyStyle({ visible });
+      };
+
+      ret.controller.dispose = () => {
+        this.embeddedWebviewManager.removeWebview(ret.webTag);
+      };
+
+      return ret;
+    },
   };
   @StorageProp("loadMode") loadMode: "async" | "sync" = "async";