피드로 돌아가기
Dev.toFrontend
원문 읽기
Flutter Web의 PWA 전환을 통한 App Store 없는 네이티브 사용자 경험 구현
Making Your Flutter Web App a PWA — manifest.json, Service Worker, Install Prompt
AI 요약
Context
기존 Flutter Web 앱의 브라우저 의존적 실행 환경으로 인한 낮은 사용자 접근성 및 오프라인 동작 불가 문제. 특히 iOS Safari의 manifest.json 무시 특성으로 인한 플랫폼별 일관되지 않은 설치 경험 발생.
Technical Solution
- manifest.json 설정을 통한 Standalone 모드 구현 및 Android 환경의 아이콘 왜곡 방지를 위한 maskable purpose 지정
- iOS Safari의 특수성을 고려한 apple-mobile-web-app-capable 등 전용 Meta Tag 추가를 통한 브라우저 크롬 제거
- Flutter build-time에 자동 생성되는 flutter_service_worker.js 기반의 Asset Caching 구조 활용으로 오프라인 가용성 확보
- dart:js_interop를 이용한 beforeinstallprompt 이벤트 제어로 사용자 맞춤형 In-App Install Banner 트리거 로직 설계
- HTTPS 보안 프로토콜 강제를 위한 Firebase Hosting 인프라 활용으로 PWA 필수 보안 요구사항 충족
실천 포인트
- Android 환경을 위한 maskable 아이콘 변체 확보 및 manifest.json 명시 - iOS 전용 Meta Tag 및 apple-touch-icon 설정 여부 확인 - flutter_service_worker.js의 정상 등록 및 Asset 캐싱 동작 검증 - Lighthouse PWA Audit을 통한 manifest, SW, HTTPS 삼박자 충족 여부 점검 - 사용자 경험 저해 방지를 위한 Install Banner 노출 시점(세션 횟수 기반) 최적화