Update app.py

app.py

@@ -400,9 +400,13 @@ def create_pwa_files():
             "description": "현대 도시 속 디지털 의례 공간",
             "start_url": "/",
             "display": "standalone",
-            "background_color": "#ffffff",
-            "theme_color": "#000000",
+            "background_color": "#0b0f19",
+            "theme_color": "#0b0f19",
             "orientation": "portrait",
+            "categories": ["art", "entertainment"],
+            "lang": "ko",
+            "dir": "ltr",
+            "prefer_related_applications": false,
             "icons": [
                 {
                     "src": "/static/icons/icon-72x72.png",
@@ -452,6 +456,14 @@ def create_pwa_files():
                     "type": "image/png",
                     "purpose": "any maskable"
                 }
+            ],
+            "screenshots": [
+                {
+                    "src": "/static/screenshots/screenshot1.png",
+                    "sizes": "1280x720",
+                    "type": "image/png",
+                    "label": "홈 화면"
+                }
             ]
         }
         with open(manifest_path, 'w', encoding='utf-8') as f:
@@ -532,7 +544,21 @@ self.addEventListener('fetch', event => {
     <meta name="apple-mobile-web-app-capable" content="yes">
     <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
     <meta name="apple-mobile-web-app-title" content="디지털 굿판">
-    <link rel="apple-touch-icon" href="/static/icons/icon-152x152.png">
+    <meta name="description" content="현대 도시 속 디지털 의례 공간">
+    
+    <!-- iOS에서의 앱 아이콘 -->
+    <link rel="apple-touch-icon" href="/static/icons/icon-192x192.png">
+    <link rel="apple-touch-icon" sizes="152x152" href="/static/icons/icon-152x152.png">
+    <link rel="apple-touch-icon" sizes="180x180" href="/static/icons/icon-180x180.png">
+    <link rel="apple-touch-icon" sizes="167x167" href="/static/icons/icon-167x167.png">
+
+    <!-- iOS 스플래시 스크린 -->
+    <link rel="apple-touch-startup-image" href="/static/splash/apple-splash-2048-2732.png" media="(device-width: 1024px) and (device-height: 1366px) and (-webkit-device-pixel-ratio: 2)">
+    <link rel="apple-touch-startup-image" href="/static/splash/apple-splash-1668-2388.png" media="(device-width: 834px) and (device-height: 1194px) and (-webkit-device-pixel-ratio: 2)">
+    <link rel="apple-touch-startup-image" href="/static/splash/apple-splash-1536-2048.png" media="(device-width: 768px) and (device-height: 1024px) and (-webkit-device-pixel-ratio: 2)">
+    <link rel="apple-touch-startup-image" href="/static/splash/apple-splash-1125-2436.png" media="(device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3)">
+    <link rel="apple-touch-startup-image" href="/static/splash/apple-splash-828-1792.png" media="(device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 2)">
+    
     <style>
         /* iOS 상태바 영역 보호 */
         body {
@@ -552,15 +578,142 @@ self.addEventListener('fetch', event => {
         #gradio-app {
             background: #0b0f19 !important;
         }
+         .install-prompt {
+            position: fixed;
+            bottom: 20px;
+            left: 50%;
+            transform: translateX(-50%);
+            background: #2a2f3e;
+            color: white;
+            padding: 15px 20px;
+            border-radius: 12px;
+            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+            display: none;
+            z-index: 1000;
+            width: 90%;
+            max-width: 400px;
+            text-align: center;
+        }
+
+        .install-button {
+            background: #4a90e2;
+            color: white;
+            border: none;
+            padding: 10px 20px;
+            border-radius: 6px;
+            margin-top: 10px;
+            cursor: pointer;
+            font-weight: bold;
+        }
+
+        .close-prompt {
+            position: absolute;
+            top: 5px;
+            right: 10px;
+            background: none;
+            border: none;
+            color: white;
+            font-size: 20px;
+            cursor: pointer;
+        }
     </style>
     <script>
+        let deferredPrompt;
+
+        window.addEventListener('beforeinstallprompt', (e) => {
+            e.preventDefault();
+            deferredPrompt = e;
+            showInstallPrompt();
+        });
+
+        function showInstallPrompt() {
+            const prompt = document.createElement('div');
+            prompt.className = 'install-prompt';
+            prompt.innerHTML = `
+                <button class="close-prompt">&times;</button>
+                <p>디지털 굿판을 앱으로 설치하여 더 나은 경험을 누려보세요!</p>
+                <button class="install-button">앱 설치하기</button>
+            `;
+            document.body.appendChild(prompt);
+
+            // 설치 프롬프트 표시
+            setTimeout(() => {
+                prompt.style.display = 'block';
+            }, 2000);
+
+            // 닫기 버튼
+            prompt.querySelector('.close-prompt').addEventListener('click', () => {
+                prompt.remove();
+            });
+
+            // 설치 버튼
+            prompt.querySelector('.install-button').addEventListener('click', async () => {
+                if (deferredPrompt) {
+                    deferredPrompt.prompt();
+                    const { outcome } = await deferredPrompt.userChoice;
+                    if (outcome === 'accepted') {
+                        console.log('사용자가 앱 설치를 수락했습니다');
+                    }
+                    deferredPrompt = null;
+                    prompt.remove();
+                }
+            });
+        }
+
+        // iOS Safari에서 설치 안내
+        if (navigator.standalone === false && navigator.userAgent.match(/Safari/i)) {
+            setTimeout(() => {
+                const iosPrompt = document.createElement('div');
+                iosPrompt.className = 'install-prompt';
+                iosPrompt.innerHTML = `
+                    <button class="close-prompt">&times;</button>
+                    <p>iOS에서 설치하기:<br>
+                    1. 공유 버튼을 탭하세요 📤<br>
+                    2. "홈 화면에 추가"를 선택하세요 ➕</p>
+                `;
+                document.body.appendChild(iosPrompt);
+                iosPrompt.style.display = 'block';
+
+                iosPrompt.querySelector('.close-prompt').addEventListener('click', () => {
+                    iosPrompt.remove();
+                });
+            }, 2000);
+        }
         // 페이지 로드 시 상단으로 스크롤
         window.addEventListener('load', function() {
             setTimeout(() => {
                 window.scrollTo(0, 0);
             }, 100);
         });
+        async function preventSleep() {
+            try {
+                if ('wakeLock' in navigator) {
+                    const wakeLock = await navigator.wakeLock.request('screen');
+                    console.log('화면 켜짐 유지 활성화');
+                    
+                    document.addEventListener('visibilitychange', async () => {
+                        if (document.visibilityState === 'visible') {
+                            await preventSleep();
+                        }
+                    });
+                }
+            } catch (err) {
+                console.log('화면 켜짐 유지 실패:', err);
+            }
+        }
 
+        if ('serviceWorker' in navigator) {
+            window.addEventListener('load', async () => {
+                try {
+                    const registration = await navigator.serviceWorker.register('/static/service-worker.js');
+                    console.log('ServiceWorker 등록 성공:', registration.scope);
+                    await preventSleep();
+                } catch (err) {
+                    console.log('ServiceWorker 등록 실패:', err);
+                }
+            });
+        }
+        
         // 화면 꺼짐 방지
         async function preventSleep() {
             try {