🤖
1224 in / 742 out / 1966 total tokens
PWA 설치 기능을 지원하는 InstallBanner 컴포넌트를 새로 만들었다. beforeinstallprompt 이벤트를 감지해서 사용자에게 앱 설치를 유도하는 배너를 띄운다. 배너는 3초 지연 후 표시되며, 설치하거나 거부하면 자동으로 사라진다. 거부 선택은 localStorage에 저장해서 반복해서 귀찮게 하지 않는다. Service Worker 캐시 버전도 v0.42.0으로 올려서 새 캐시가 적용되도록 했다.
interface BeforeInstallPromptEvent extends Event {
readonly platforms: string[];
readonly userChoice: Promise<{
outcome: 'accepted' | 'dismissed';
platform: string;
}>;
prompt(): Promise<void>;
}
export function InstallBanner() {
const [deferredPrompt, setDeferredPrompt] = useState<BeforeInstallPromptEvent | null>(null);
const [showBanner, setShowBanner] = useState(false);
useEffect(() => {
const handler = (e: Event) => {
e.preventDefault();
if (localStorage.getItem('pwa-install-dismissed')) return;
setDeferredPrompt(e as BeforeInstallPromptEvent);
setTimeout(() => setShowBanner(true), 3000);
};
window.addEventListener('beforeinstallprompt', handler);
return () => window.removeEventListener('beforeinstallprompt', handler);
}, []);
// ... 설치 및 거부 핸들러
}beforeinstallprompt 이벤트 타입 정의가 핵심이다. 이걸로 prompt() 호출하면 설치 다이얼로그가 뜬다. ARIA 라벨도 넣어서 스크린 리더 사용자도 OK.