PWA manifest.json을 시각적으로 빌드. 앱 설치 가능한 웹앱의 메타데이터.
📄 manifest.json
📌 HTML <head> 추가 코드

PWA manifest.json 사용법

  1. 앱 이름·아이콘·테마색 등을 입력합니다.
  2. manifest.json을 사이트 루트에 업로드합니다 (/manifest.json).
  3. HTML <head>에 <link rel="manifest" href="/manifest.json"> 추가.
  4. 192×192·512×512 PNG 아이콘을 준비해 같은 경로에 업로드.
  5. Chrome·Edge에서 "앱 설치" 버튼이 자동으로 표시됩니다.

주요 기능

  • PWA 표준 manifest 모든 필수 필드
  • display 4종 (standalone·fullscreen·minimal-ui·browser)
  • orientation·scope·start_url 자동 처리
  • HTML <head> 추가 코드 동시 생성
  • Lighthouse PWA 점수 만점 가능

활용 예시

  • 웹앱 → 모바일 앱 설치 — 사용자가 홈화면에 추가 가능
  • Lighthouse 점수 — PWA 항목 100점
  • 네이티브 앱 대안 — 앱스토어 없이 배포
  • 오프라인 동작 — Service Worker와 함께
  • iOS 앱 클립 — 가벼운 즉시 실행

PWA가 뭔가요?

Progressive Web App은 웹사이트지만 네이티브 앱처럼 설치·동작하는 기술입니다. manifest.json + Service Worker + HTTPS가 필수 요소입니다. Twitter Lite·Pinterest·Starbucks 등 메이저 서비스가 PWA로 출시했고, 앱스토어 거치지 않고 즉시 배포 가능합니다. 본 도구는 manifest 부분을 다룹니다. Service Worker는 별도 JavaScript 파일이 필요합니다.

자주 묻는 질문

"앱 설치" 버튼이 안 나와요.

(1) HTTPS 필수 (2) manifest.json + 아이콘 + Service Worker 모두 필요 (3) Chrome chrome://flags 확인.

iOS Safari도 지원?

부분 지원. <link rel="apple-touch-icon">·<meta name="apple-mobile-web-app-capable"> 추가 필요.

아이콘은 어디서 만드나요?

favicon 생성기에서 PWA 사이즈도 함께 출력합니다.

무료?

네, 완전 무료입니다.