Update app.py

app.py

@@ -443,38 +443,73 @@ def main():
         
         gr.HTML("""
             <meta name="viewport" content="width=device-width, initial-scale=1.0">
-            <meta name="apple-mobile-web-app-capable" content="yes">
-            <meta name="apple-mobile-web-app-status-bar-style" content="black">
-            <meta name="apple-mobile-web-app-title" content="PawMatch AI">
-            <meta name="theme-color" content="#4299e1">
-            
-            <!-- PWA 必要檔案的連結，使用相對路徑 -->
-            <link rel="manifest" href="manifest.json">
-            <link rel="apple-touch-icon" href="assets/icon-192.png">
-            
-            <!-- Service Worker 註冊程序 -->
             <script>
-                // 等待頁面完全載入後再註冊 Service Worker
-                document.addEventListener('DOMContentLoaded', function() {
-                    // 確保我們不是在 iframe 中執行
-                    if (window.self === window.top) {
-                        // 確認瀏覽器支援 Service Worker
+                console.log('基本初始化測試');
+            </script>
+        """)
+
+        gr.HTML("""
+            <script>
+                // 檢查環境
+                console.log('當前 URL:', window.location.href);
+                console.log('是否在 iframe 中:', window !== window.top);
+                
+                // 檢查檔案存取
+                async function checkFiles() {
+                    try {
+                        const swResponse = await fetch('service-worker.js');
+                        console.log('Service Worker 回應:', {
+                            status: swResponse.status,
+                            type: swResponse.headers.get('content-type')
+                        });
+                        
+                        const manifestResponse = await fetch('manifest.json');
+                        console.log('Manifest 回應:', {
+                            status: manifestResponse.status,
+                            type: manifestResponse.headers.get('content-type')
+                        });
+                    } catch (error) {
+                        console.error('檔案檢查錯誤:', error);
+                    }
+                }
+                
+                // 在頁面載入後執行檢查
+                window.addEventListener('load', checkFiles);
+            </script>
+        """)
+
+        gr.HTML("""
+            <script>
+                // 確保在正確的環境中執行
+                if (window.self === window.top) {  // 不在 iframe 中
+                    // 等待 Gradio 完全初始化
+                    const initPWA = () => {
                         if ('serviceWorker' in navigator) {
-                            // 使用相對路徑註冊 Service Worker
-                            navigator.serviceWorker.register('service-worker.js')
-                            .then(function(registration) {
-                                console.log('Service Worker 註冊成功，範圍：', registration.scope);
-                            })
-                            .catch(function(error) {
-                                console.log('Service Worker 註冊失敗：', error);
+                            navigator.serviceWorker.register('service-worker.js', {
+                                scope: './'
+                            }).then(registration => {
+                                console.log('PWA 註冊成功:', registration.scope);
+                            }).catch(error => {
+                                console.error('PWA 註冊失敗:', error);
                             });
-                        } else {
-                            console.log('此瀏覽器不支援 Service Worker');
                         }
-                    } else {
-                        console.log('在 iframe 中執行，跳過 Service Worker 註冊');
-                    }
-                });
+                    };
+        
+                    // 使用 MutationObserver 確保在 Gradio 界面完全載入後才初始化 PWA
+                    const observer = new MutationObserver((mutations, obs) => {
+                        const gradioApp = document.querySelector('.gradio-app');
+                        if (gradioApp) {
+                            console.log('Gradio 界面已載入');
+                            initPWA();
+                            obs.disconnect();
+                        }
+                    });
+        
+                    observer.observe(document, {
+                        childList: true,
+                        subtree: true
+                    });
+                }
             </script>
         """)