M9: PWA — 홈 화면에 추가, 오프라인 안내
- 매니페스트·아이콘(192/512/maskable/apple-touch, scripts/pwa-icons.ts로 다시 만들기) - 손으로 쓴 서비스 워커(apps/web/sw.js): 빌드 때 Vite 플러그인이 빌드 ID를 넣음. 페이지는 네트워크만(오프라인이면 offline.html), /assets/*만 캐시 먼저(200개까지), /api·/ws·/healthz·/internal은 손대지 않음 - 오프라인 안내 페이지, 방 밖에서도 "인터넷 연결이 없어요" 띠 - 홈 아래 "홈 화면에 추가" 카드(설치 버튼, iOS는 공유 메뉴 안내, 닫으면 기억) - 테스트: apps/web/src/sw.test.ts, e2e/pwa.e2e.ts(E2E_PORT), a11y.e2e.ts도 E2E_PORT 읽기 - 문서: 07 §11, 11 배포(no-cache 대상), README 확인 목록 Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
28
apps/web/src/components/InstallCard.tsx
Normal file
28
apps/web/src/components/InstallCard.tsx
Normal file
@@ -0,0 +1,28 @@
|
||||
/** "홈 화면에 추가" offer (docs/07 §11). Hidden when already installed, dismissed, or not installable. */
|
||||
import { dismissInstall, promptInstall, useInstallMode } from '../lib/pwa';
|
||||
|
||||
export function InstallCard() {
|
||||
const mode = useInstallMode();
|
||||
if (!mode) return null;
|
||||
return (
|
||||
<section className="card row" aria-label="홈 화면에 추가" style={{ gap: 12 }}>
|
||||
<span style={{ fontSize: '1.8rem' }} aria-hidden>
|
||||
📲
|
||||
</span>
|
||||
<div style={{ flex: '1 1 220px' }}>
|
||||
<strong>홈 화면에 추가해 보세요</strong>
|
||||
<div className="muted small">
|
||||
{mode === 'ios' ? 'Safari 공유 버튼(네모에 화살표)을 누르고 [홈 화면에 추가]를 골라 주세요.' : '앱처럼 아이콘을 눌러 바로 열 수 있어요.'}
|
||||
</div>
|
||||
</div>
|
||||
{mode === 'prompt' && (
|
||||
<button className="btn btn-primary btn-sm" onClick={() => void promptInstall()}>
|
||||
추가하기
|
||||
</button>
|
||||
)}
|
||||
<button className="btn btn-secondary btn-sm" onClick={dismissInstall}>
|
||||
닫기
|
||||
</button>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user