manifest.json?

CRA로 앱을 하나 생성하면 public 폴더에 manifest.json 파일이 생긴다. 검색하기 전에 파일이 import되는 index.html에 나온 설명을 확인해 볼 수 있었다.

<!-- 
	manifest.json provides metadata used when your web app is installed on a
      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/ 
-->
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />

유저의 데스크탑이나 모바일 디바이스에 웹앱이 설치되었을 때, 메타데이터를 설정할 수 있는 파일이다.

해당 링크를 확인해보면 어떤 이름이든 상관없지만 보통 manifest라고 작성하며, 루트 디렉토리에 위치한다고 한다. .webmanifest 확장자로 제안하지만 개발자들에게 더 친숙한 .json 역시 브라우저는 지원한다고 한다.

매니페스트 파일은 컴퓨팅에서 집합의 일부 또는 논리정연한 단위인 파일들의 그룹을 위한 메타데이터를 포함하는 파일이다. 예를 들어, 컴퓨터 프로그램의 파일들은 이름, 버전 번호, 라이선스, 프로그램의 구성 파일들을 가질 수 있다. 👉 여기

manifest 속성(key)

name or short_name

name이나 short_name 둘 중 하나의 속성은 꼭 필요하다. 둘 다 제공하면 보통은 name이 표시되고, 유저의 home screen, launcher 등 공간이 협소한 곳에는 short_name이 표시된다.

icons

home screen, app launcher, task switcher, splash screen 등에 표시될 아이콘을 지정할 수 있다.
이미지 오브젝트의 배열 형태로 작성할 수 있는데, 각 오브젝트는 이미지의 src, sizes, type을 명시해야 한다.

id

앱을 식별할 수 있는 id를 입력하지 않으면 start_url이 대신 사용된다. 하지만 항상 start_url로 설정되는 것은 아니기 때문에 식별자를 입력하는 것이 좋다고 한다. 웹앱이 설치될 될 때, id가 다르면 다른 앱임을 인식하기 때문에 업데이트되지 않고 다시 설치할 수 있다.

start_url

start_url은 필수로 작성해야 한다. 애플리케이션이 시작될 때 위치를 알려주고, 사용자가 추가한 위치에서 앱이 시작되지 않게 해준다.

background_color

모바일에서 응용프로그램을 처음 시작할 때 시작화면에서 사용된다고 한다. (splash screen)

theme_color

앱의 주요 테마 컬러를 지정한다.

display

앱이 실행될 때 표시되는 UI를 사용자 지정할 수 있다. 전체화면으로 실행하거나 주소표시줄과 브라우저의 인터페이스 요소를 숨길 수 있다. (fullscreen, standalone, minimal-ui, browser)

scope

앱 내에 위치한 것으로 간주하는 url 링크를 정의하고 앱을 벗어난 시점을 결정하는 데 사용한다고 한다. scope 속성을 작성하지 않으면, 기본은 manifest가 속한 디렉토리이다.

description

브라우저가 앱의 정보를 요구할 때 참고하는 정보다.

• shortcuts
• screenshots
• orientation
• display_override
• relate_applications

이 외에도 더 많은 속성을 확인할 수 있다.

모바일에서 manifest

splash-screen | add-manifest

manifest 테스트

chrome에서 application 탭, 사이드 상단에서 Manifest 항목에서 작성된 manifest 속성을 확인할 수 있다.

---

프리 프로젝트를 열어보니 CRA 기본 세팅된 manifest.json로 그대로였다. CRA는 적은 설정으로 쉽게 웹앱을 생성할 수 있는 반면, 신경쓰지 않으면 놓치기 쉬운 부분도 많은 것 같다.

출처

• web-app-manifest
• manifest-properties | add-manifest
• splash-screen | add-manifest
• manifest.json | Mozilla

더 공부해 볼 것

manifest 속성을 보던 중 나온 키워드인데,

• PWA (Progressive Web App) 란? 네이티브 앱과 웹앱과 PWA의 차이?
• fullscreen, standalone, minimal-ui, browser의 display가 실제 어떻게 적용되는지