fix: use webview replace iframe

src/main/window.ts

@@ -34,7 +34,8 @@ export function createMainWindow() {
     webPreferences: {
       preload: join(__dirname, '../preload/index.js'),
       sandbox: false,
-      webSecurity: false
+      webSecurity: false,
+      webviewTag: true
       // devTools: !app.isPackaged,
     }
   })

src/renderer/src/components/MinApp/index.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable react/no-unknown-property */
 import { CloseOutlined, ExportOutlined, ReloadOutlined } from '@ant-design/icons'
 import { isMac, isWindows } from '@renderer/config/constant'
 import { useBridge } from '@renderer/hooks/useBridge'
@@ -5,7 +6,8 @@ import store from '@renderer/store'
 import { setMinappShow } from '@renderer/store/runtime'
 import { MinAppType } from '@renderer/types'
 import { Drawer } from 'antd'
-import { useRef, useState } from 'react'
+import { WebviewTag } from 'electron'
+import { useEffect, useRef, useState } from 'react'
 import styled from 'styled-components'
 
 import { TopView } from '../TopView'
@@ -17,7 +19,7 @@ interface Props {
 
 const PopupContainer: React.FC<Props> = ({ app, resolve }) => {
   const [open, setOpen] = useState(true)
-  const iframeRef = useRef<HTMLIFrameElement>(null)
+  const webviewRef = useRef<WebviewTag | null>(null)
 
   useBridge()
 
@@ -29,8 +31,8 @@ const PopupContainer: React.FC<Props> = ({ app, resolve }) => {
   }
 
   const onReload = () => {
-    if (iframeRef.current) {
+    if (webviewRef.current) {
-      iframeRef.current.src = app.url
+      webviewRef.current.src = app.url
     }
   }
 
@@ -59,6 +61,27 @@ const PopupContainer: React.FC<Props> = ({ app, resolve }) => {
     )
   }
 
+  useEffect(() => {
+    const webview = webviewRef.current
+
+    if (webview) {
+      const handleNewWindow = (event: any) => {
+        event.preventDefault()
+        if (webview.loadURL) {
+          webview.loadURL(event.url)
+        }
+      }
+
+      webview.addEventListener('new-window', handleNewWindow)
+
+      return () => {
+        webview.removeEventListener('new-window', handleNewWindow)
+      }
+    }
+
+    return () => {}
+  }, [])
+
   return (
     <Drawer
       title={<Title />}
@@ -72,17 +95,17 @@ const PopupContainer: React.FC<Props> = ({ app, resolve }) => {
       maskClosable={false}
       closeIcon={null}
       style={{ marginLeft: 'var(--sidebar-width)' }}>
-      <Frame src={app.url} ref={iframeRef} />
+      <webview src={app.url} ref={webviewRef} style={WebviewStyle} allowpopups={true} />
     </Drawer>
   )
 }
 
-const Frame = styled.iframe`
+const WebviewStyle: React.CSSProperties = {
-  width: calc(100vw - var(--sidebar-width));
+  width: 'calc(100vw - var(--sidebar-width))',
-  height: calc(100vh - var(--navbar-height));
+  height: 'calc(100vh - var(--navbar-height))',
-  border: none;
+  backgroundColor: 'white',
-  background-color: white;
+  display: 'inline-flex'
-`
+}
 
 const TitleContainer = styled.div`
   display: flex;

src/renderer/src/pages/apps/App.tsx

@@ -12,13 +12,6 @@ const App: FC<Props> = ({ app }) => {
   const { theme } = useTheme()
 
   const onClick = () => {
-    const websiteReg = /claude|chatgpt|groq/i
-
-    if (websiteReg.test(app.url)) {
-      window.api.minApp({ url: app.url, windowOptions: { title: app.name } })
-      return
-    }
-
     MinApp.start(app)
   }
 

src/renderer/src/pages/apps/AppsPage.tsx

@@ -64,7 +64,7 @@ const _apps: MinAppType[] = [
   {
     name: 'DEVV_',
     logo: DevvAppLogo,
-    url: 'https://devv.ai/referral?code=dvl5am34asqo'
+    url: 'https://devv.ai/'
   }
 ]