PWA manifest

manifest.json

{
	"name": "Hello! PWA by JS",
	"short_name": "PWA by JS",
	"description": "PWA start program",
	"scope": ".",
	"start_url": "./",
	"display": "fullscreen",
	"orientation": "portrait",
	"theme_color": "#ffffff",
	"background_color": "#ffffff",
	"icons": [
		{
			"src": "images/icons/android-chrome-512x512.png",
			"sizes": "512x512",
			"type": "image/png"
		}
	]
}

name: 바로가기 아이콘 설치를 권장하는 팝업 배너와 스플래시 스크린에 표시되는 제목

short_name: 바탕화면 바로가기 아이콘 아래 표시되는 제목

description: 애플리케이션의 간단한 자기소개 문장. 웹 크롤러가 수집하는 정보

scope: 매니페스트에 정의된 내용이 적용될 수 있는 파일들의 범위를 지정. "./"는 현재 위치를 기준으로 시작하는 하위 디렉토리를 의미

start_url: 프로그램을 실행하면 시작될 URL

display: PWA 를 실행하면 나타나는 화면의 형태. browser 가 아닌 값을 선택하면 앱으로, browser를 선택하면 웹으로 인식

옵션	의미
fullscreen	기기의 최대 화면으로 보여 준다. 만약 기기의 운영체제가 fullscreen을 지원하지 않으면 standalone으로 자동 설정된다.
standalone	웹 브라우저의 주소, 상태 표시줄 등을 모두 제거한 화면을 보여 준다. 즉, 웹브라우저처럼 보이지 않도록 실행할 수 있다. 일반적으로 가장 많이 사용한다.
minimal-ui	상단에 주소 표시줄만 추가한다. 만약 기기의 운영체제가 minimal-ui를 지원하지 않으면 standalone으로 자동 설정된다.
browser	웹 브라우저와 똑같은 모습으로 실행된다.

orientation: 화면의 방향을 결정

옵션	의미
portrait	초상화처럼 세로로 실행
landscape	풍경화처럼 가로로 실행

theme_color: 상태 표시줄의 색상

background_color: 스플래시 스크린의 배경색

icons: 스플래시 스크린에 사용할 아이콘 이미지 중에서 128dpi에 가장 가까운 이미지를 찾아 화면에 표시