Sync from GitHub acfe9adb279da37ccbdfab2b81a069691b8efd2a

.streamlit/config.toml

@@ -3,3 +3,4 @@ gatherUsageStats = false
 
 [server]
 headless = true
+enableStaticServing = true

README.md

@@ -54,7 +54,8 @@ pinned: false
 6. [의사결정 기록](docs/06_decision_log.md)
 7. [트러블슈팅](docs/07_troubleshooting.md)
 8. [GitHub / Hugging Face 배포 자동화](docs/08_publish_automation.md)
-9. [개발일지](docs/devlog/2026-06-07.md)
+9. [모바일 앱처럼 사용하기](docs/09_mobile_pwa.md)
+10. [개발일지](docs/devlog/2026-06-07.md)
 
 ## 실행 방법
 

docs/09_mobile_pwa.md

@@ -0,0 +1,35 @@
+# 09. 모바일 앱처럼 사용하기
+
+이 프로젝트는 Chrome 모바일에서 홈 화면에 추가해 앱처럼 열 수 있도록 PWA 설정을 포함합니다.
+
+## 적용된 설정
+
+- `static/manifest.webmanifest`: 앱 이름, 아이콘, 테마 색상, 표시 방식 설정
+- `static/service-worker.js`: 정적 리소스 캐시용 service worker
+- `static/icons/`: 홈 화면 아이콘
+- `.streamlit/config.toml`: Streamlit 정적 파일 서빙 활성화
+- `streamlit_app.py`: manifest, 아이콘, 모바일 메타태그 주입
+
+## Android Chrome에서 설치하는 방법
+
+1. Chrome에서 배포된 앱 주소로 접속합니다.
+2. 오른쪽 위 메뉴를 누릅니다.
+3. `홈 화면에 추가` 또는 `앱 설치`를 선택합니다.
+4. 홈 화면에 `Cert Study` 아이콘이 생기면 실행합니다.
+
+## 주의사항
+
+- PWA 설치는 보통 HTTPS 환경에서 가장 안정적으로 동작합니다.
+- 로컬 `http://localhost`에서는 테스트가 가능하지만, 실제 모바일 설치 확인은 배포 주소에서 하는 것이 좋습니다.
+- Streamlit 앱 특성상 완전한 오프라인 문제풀이 앱은 아닙니다.
+- 현재 service worker는 앱 전체 데이터를 오프라인 저장하지 않고, manifest와 아이콘 같은 정적 리소스만 캐시합니다.
+
+## 확인할 것
+
+Chrome 개발자도구의 Application 탭에서 아래 항목을 확인할 수 있습니다.
+
+- Manifest
+- Service Workers
+- Cache Storage
+
+Hugging Face Space나 Oracle Cloud 배포 후 모바일 Chrome에서 접속하면 홈 화면 추가를 테스트할 수 있습니다.

static/manifest.webmanifest

@@ -0,0 +1,27 @@
+{
+  "name": "Cert Study App",
+  "short_name": "Cert Study",
+  "description": "자격증 문제 PDF를 구조화하고 모바일에서 문제를 풀 수 있는 학습 앱입니다.",
+  "lang": "ko-KR",
+  "start_url": "/",
+  "scope": "/",
+  "display": "standalone",
+  "orientation": "portrait-primary",
+  "background_color": "#f8fafc",
+  "theme_color": "#2563eb",
+  "categories": ["education", "productivity"],
+  "icons": [
+    {
+      "src": "/app/static/icons/icon.svg",
+      "sizes": "any",
+      "type": "image/svg+xml",
+      "purpose": "any"
+    },
+    {
+      "src": "/app/static/icons/icon-maskable.svg",
+      "sizes": "any",
+      "type": "image/svg+xml",
+      "purpose": "maskable"
+    }
+  ]
+}

static/service-worker.js

@@ -0,0 +1,44 @@
+const CACHE_NAME = "cert-study-static-v1";
+const STATIC_ASSETS = [
+  "/app/static/manifest.webmanifest",
+  "/app/static/icons/icon.svg",
+  "/app/static/icons/icon-maskable.svg"
+];
+
+self.addEventListener("install", (event) => {
+  event.waitUntil(
+    caches.open(CACHE_NAME).then((cache) => cache.addAll(STATIC_ASSETS))
+  );
+  self.skipWaiting();
+});
+
+self.addEventListener("activate", (event) => {
+  event.waitUntil(
+    caches
+      .keys()
+      .then((keys) =>
+        Promise.all(keys.filter((key) => key !== CACHE_NAME).map((key) => caches.delete(key)))
+      )
+  );
+  self.clients.claim();
+});
+
+self.addEventListener("fetch", (event) => {
+  const request = event.request;
+  if (request.method !== "GET" || !request.url.includes("/app/static/")) {
+    return;
+  }
+
+  event.respondWith(
+    caches.match(request).then((cached) => {
+      if (cached) {
+        return cached;
+      }
+      return fetch(request).then((response) => {
+        const copy = response.clone();
+        caches.open(CACHE_NAME).then((cache) => cache.put(request, copy));
+        return response;
+      });
+    })
+  );
+});

streamlit_app.py

@@ -8,6 +8,7 @@ from dotenv import load_dotenv
 load_dotenv()
 
 import streamlit as st
+import streamlit.components.v1 as components
 from sqlalchemy import func
 
 from cert_study_app.config import DEFAULT_USER, ensure_runtime_dirs
@@ -40,6 +41,55 @@ EMBEDDING_MODEL_OPTIONS = [
 ]
 
 
+def inject_pwa_assets():
+    components.html(
+        """
+        <script>
+        (function () {
+          const doc = window.parent.document;
+
+          function ensureLink(rel, href, attrs) {
+            if (doc.querySelector(`link[rel="${rel}"][href="${href}"]`)) {
+              return;
+            }
+            const link = doc.createElement("link");
+            link.rel = rel;
+            link.href = href;
+            Object.entries(attrs || {}).forEach(([key, value]) => link.setAttribute(key, value));
+            doc.head.appendChild(link);
+          }
+
+          function ensureMeta(name, content) {
+            let meta = doc.querySelector(`meta[name="${name}"]`);
+            if (!meta) {
+              meta = doc.createElement("meta");
+              meta.name = name;
+              doc.head.appendChild(meta);
+            }
+            meta.content = content;
+          }
+
+          ensureLink("manifest", "/app/static/manifest.webmanifest");
+          ensureLink("icon", "/app/static/icons/icon.svg", { type: "image/svg+xml" });
+          ensureLink("apple-touch-icon", "/app/static/icons/icon.svg");
+          ensureMeta("theme-color", "#2563eb");
+          ensureMeta("apple-mobile-web-app-capable", "yes");
+          ensureMeta("apple-mobile-web-app-title", "Cert Study");
+          ensureMeta("mobile-web-app-capable", "yes");
+
+          if ("serviceWorker" in window.parent.navigator) {
+            window.parent.navigator.serviceWorker
+              .register("/app/static/service-worker.js")
+              .catch(function () {});
+          }
+        })();
+        </script>
+        """,
+        height=0,
+        width=0,
+    )
+
+
 def get_service():
     db = SessionLocal()
     return db, QuizService(db)
@@ -1889,6 +1939,7 @@ def main():
     ensure_runtime_dirs()
     init_db(verbose=False)
     init_state()
+    inject_pwa_assets()
     apply_mobile_styles()
 
     st.title("Cert Study")