Implement iframe fallback for webview on OHOS platform

src/web-ui/src/app/scenes/browser/BrowserPanel.tsx

@@ -70,6 +70,17 @@ function isWebviewNotFoundError(error: unknown): boolean {
   return formatUnknownError(error).toLowerCase().includes('webview not found');
 }
 
+function isWebviewApiUnavailable(error: unknown): boolean {
+  const message = formatUnknownError(error);
+  const lowered = message.toLowerCase();
+  return (
+    lowered.includes('webview api not available') ||
+    lowered.includes('webview is not supported') ||
+    lowered.includes('webview unavailable') ||
+    lowered.includes('no webview')
+  );
+}
+
 async function waitForWebviewCreated(handle: BrowserWebviewHandle): Promise<void> {
   await new Promise<void>((resolve, reject) => {
     let settled = false;
@@ -135,6 +146,7 @@ const BrowserPanel: React.FC<BrowserPanelProps> = ({ isActive, initialUrl }) =>
   const [isLoading, setIsLoading] = useState(false);
   const [error, setError] = useState<string | null>(null);
   const [isInspectorActive, setIsInspectorActive] = useState(false);
+  const [webviewUnavailable, setWebviewUnavailable] = useState(false);
 
   const addContext = useContextStore((s) => s.addContext);
 
@@ -239,7 +251,7 @@ const BrowserPanel: React.FC<BrowserPanelProps> = ({ isActive, initialUrl }) =>
     }
     setIsInspectorActive(false);
 
-    if (!isTauri) {
+    if (!isTauri || webviewUnavailable) {
       setIsLoading(false);
       return;
     }
@@ -278,13 +290,18 @@ const BrowserPanel: React.FC<BrowserPanelProps> = ({ isActive, initialUrl }) =>
           .catch(() => {});
       }, 500);
     } catch (loadError) {
-      const message = formatUnknownError(loadError);
-      log.error('Load browser panel url failed', loadError);
-      setError(message);
+      if (isWebviewApiUnavailable(loadError)) {
+        log.warn('Webview API not available, falling back to iframe');
+        setWebviewUnavailable(true);
+      } else {
+        const message = formatUnknownError(loadError);
+        log.error('Load browser panel url failed', loadError);
+        setError(message);
+      }
     } finally {
       setIsLoading(false);
     }
-  }, [isTauri, recreateWebview, shouldShowWebview, syncWebviewBounds]);
+  }, [isTauri, recreateWebview, shouldShowWebview, syncWebviewBounds, webviewUnavailable]);
 
   const queueSync = useCallback(() => {
     if (resizeFrameRef.current !== null) window.cancelAnimationFrame(resizeFrameRef.current);
@@ -296,7 +313,7 @@ const BrowserPanel: React.FC<BrowserPanelProps> = ({ isActive, initialUrl }) =>
 
   // Activate / deactivate webview based on shouldShowWebview
   useEffect(() => {
-    if (!isTauri) return;
+    if (!isTauri || webviewUnavailable) return;
 
     if (shouldShowWebview) {
       if (!webviewRef.current) {
@@ -565,7 +582,7 @@ const BrowserPanel: React.FC<BrowserPanelProps> = ({ isActive, initialUrl }) =>
       ) : null}
 
       <div className="browser-panel__content">
-        {!isTauri ? (
+        {!isTauri || webviewUnavailable ? (
           <iframe
             className="browser-panel__iframe"
             src={currentUrl}

src/web-ui/src/app/scenes/browser/BrowserScene.tsx

@@ -71,6 +71,17 @@ function isWebviewNotFoundError(error: unknown): boolean {
   return message.toLowerCase().includes('webview not found');
 }
 
+function isWebviewApiUnavailable(error: unknown): boolean {
+  const message = formatUnknownError(error);
+  const lowered = message.toLowerCase();
+  return (
+    lowered.includes('webview api not available') ||
+    lowered.includes('webview is not supported') ||
+    lowered.includes('webview unavailable') ||
+    lowered.includes('no webview')
+  );
+}
+
 async function evalWebview(label: string, script: string): Promise<void> {
   const { invoke } = await import('@tauri-apps/api/core');
   await invoke('browser_webview_eval', { request: { label, script } });
@@ -152,6 +163,7 @@ const BrowserScene: React.FC = () => {
   const [currentUrl, setCurrentUrl] = useState(DEFAULT_URL);
   const [isLoading, setIsLoading] = useState(false);
   const [error, setError] = useState<string | null>(null);
+  const [webviewUnavailable, setWebviewUnavailable] = useState(false);
 
   const syncWebviewBounds = useCallback(async (handle?: BrowserWebviewHandle | null) => {
     const target = handle ?? webviewRef.current;
@@ -256,7 +268,7 @@ const BrowserScene: React.FC = () => {
     setError(null);
     setIsLoading(true);
 
-    if (!isTauri) {
+    if (!isTauri || webviewUnavailable) {
       setIsLoading(false);
       return;
     }
@@ -295,13 +307,18 @@ const BrowserScene: React.FC = () => {
           .catch(() => {});
       }, 500);
     } catch (loadError) {
-      const message = formatUnknownError(loadError);
-      log.error('Load browser url failed', loadError);
-      setError(message);
+      if (isWebviewApiUnavailable(loadError)) {
+        log.warn('Webview API not available, falling back to iframe');
+        setWebviewUnavailable(true);
+      } else {
+        const message = formatUnknownError(loadError);
+        log.error('Load browser url failed', loadError);
+        setError(message);
+      }
     } finally {
       setIsLoading(false);
     }
-  }, [isActive, isTauri, recreateWebview, syncWebviewBounds]);
+  }, [isActive, isTauri, recreateWebview, syncWebviewBounds, webviewUnavailable]);
 
   const queueSync = useCallback(() => {
     if (resizeFrameRef.current !== null) {
@@ -316,7 +333,7 @@ const BrowserScene: React.FC = () => {
   }, [syncWebviewBounds]);
 
   useEffect(() => {
-    if (!isTauri) {
+    if (!isTauri || webviewUnavailable) {
       return;
     }
 
@@ -510,7 +527,7 @@ const BrowserScene: React.FC = () => {
       ) : null}
 
       <div className="browser-scene__content">
-        {!isTauri ? (
+        {!isTauri || webviewUnavailable ? (
           <iframe
             className="browser-scene__iframe"
             src={currentUrl}