PWA의 얼굴, 웹 앱 매니페스트 정복하기

PWA의 얼굴, 웹 앱 매니페스트 정복하기
Part 1: PWA와 웹 앱 매니페스트의 만남
Chapter 1: 왜 웹 앱 매니페스트가 필요한가?
웹과 네이티브 앱의 경계 허물기
'설치'가 사용자에게 주는 의미
서비스 워커, HTTPS와 함께하는 PWA의 3대 필수 요소
Chapter 2: 웹 앱 매니페스트 첫걸음
manifest.json 파일의 정체
가장 기본적인 매니페스트 파일 만들어보기
HTML에 매니페스트 연결하기 ()
Part 2: 핵심 속성 파헤치기: 앱의 정체성 정의
Chapter 3: 앱의 이름과 설명
사용자에게 보여질 이름: name vs short_name
앱의 목적을 알려주는 description
Chapter 4: 사용자를 사로잡는 아이콘
icons 속성의 구조와 역할
다양한 디바이스 해상도에 대응하기
목적에 따른 아이콘 타입: purpose: "any", "maskable"
실습: 멋진 PWA 아이콘 제작 및 적용하기
Chapter 5: 앱의 첫인상, 표시 방식 제어하기
앱이 실행될 시작 URL: start_url
네이티브 앱처럼 보이게 하는 마법: display (standalone, fullscreen 등)
앱의 활동 영역 제한하기: scope
Chapter 6: 브랜드 색상으로 통일감 주기
앱의 테마 색상 지정: theme_color
로딩 화면의 배경색: background_color
Part 3: 실전! 매니페스트 적용과 디버깅
Chapter 7: 개발자 도구로 매니페스트 100% 활용하기
브라우저 개발자 도구(Application 패널) 분석
설치 가능성(Installability) 요구사항 확인 및 해결
다양한 기기에서 아이콘 미리보기
Chapter 8: '홈 화면에 추가' 프롬프트 직접 제어하기
beforeinstallprompt 이벤트란?
설치 유도 버튼 직접 만들기
사용자 경험을 고려한 설치 프롬프트 노출 전략
Part 4: 고급 기능으로 네이티브 앱 뛰어넘기
Chapter 9: 앱 바로가기(Shortcuts)로 빠른 기능 제공하기
자주 사용하는 기능으로 바로 이동시키는 shortcuts
실습: 글쓰기, 검색 등 주요 기능 바로가기 추가
Chapter 10: PWA로 콘텐츠 공유받기 (Web Share Target)
share_target 속성으로 다른 앱의 공유 메뉴에 내 PWA 등록하기
공유된 데이터(텍스트, 파일) 처리 방법
Chapter 11: PWA를 파일 탐색기의 기본 앱으로 (File Handling)
특정 파일 확장자를 내 PWA와 연결하기 (file_handlers)
실습: 텍스트 편집기, 이미지 뷰어 PWA 만들기
Chapter 12: OS와의 통합을 위한 기타 속성들
관련 네이티브 앱 정보 제공: related_applications
앱 정보 페이지 링크: iarc_rating_id, categories
Part 5: 완벽한 사용자 경험을 위한 전략
Chapter 13: 스플래시 스크린(Splash Screen) 커스터마이징
브라우저가 스플래시 스크린을 생성하는 원리
매니페스트 속성으로 스플래시 스크린 최적화하기
Chapter 14: 플랫폼별(iOS, Android, Desktop) 적용 전략
iOS Safari를 위한 추가 메타 태그 (apple-touch-icon 등)
데스크톱 PWA의 특징과 고려사항
Chapter 15: 종합 실습: 블로그 PWA에 정체성 부여하기
서비스 워커와 IndexedDB로 만들어진 앱에 매니페스트 적용
설치부터 아이콘, 바로가기, 공유 기능까지 완전한 PWA 경험 구현