React manifest.json는 뭘까

 

React manifest.json 파일의 정체

{
  "short_name": "React App",
  "name": "Create React App Sample",
  "icons": [
    {
      "src": "favicon.ico",
      "sizes": "64x64 32x32 24x24 16x16",
      "type": "image/x-icon"
    },
    {
      "src": "logo192.png",
      "type": "image/png",
      "sizes": "192x192"
    },
    {
      "src": "logo512.png",
      "type": "image/png",
      "sizes": "512x512"
    }
  ],
  "start_url": ".",
  "display": "standalone",
  "theme_color": "#000000",
  "background_color": "#ffffff"
}

이렇게 불러오는걸 보니 favicon 적용하는 파일인가? 라는 추측을 했었다. 정확히는 모르지만 우선 이러한 파일이 있다는 것을 알고 favicon을 적용해야했기에 파일의 정체를 알아보기로 했다.

간단히 말하면 어플리케이션의 정보를 담은 JSON 파일이다.
기기의 홈 화면에 설치하여 사용자에게 빠른 액세스와 풍부한 경험을 제공하기 위해 사용한다. 모든 웹 익스텐션이 포함하고 있어야 하는 파일이라고 한다.

 

short_name

사용자 홈 화면에서 아이콘 이름으로 사용
이름 필드가 너무 긴 컨텍스트에서 사용하면 된다. 해당 키를 사용하는 경우 12자를 초과하지 않는 것이 좋다. manifest.json에 포함되지 않으면 name이 대신 사용되며 잘릴 수 있다.

name

웹앱 설치 배너에 사용
UI에 표시할 수 있을 정도로 이름을 짧게 유지하는 것이 좋다. Chrome과 Microsoft Edge는 이름 길이를 45자로 제한한다.

icons

홈 화면에 추가할때 사용할 이미지 (favicon)
이미지와(상대 경로) px의 이미지 크기가 키-값 쌍으로 구성된다. 아이콘이 제공되지 않은 경우 기본적으로 표준 확장 아이콘이 사용된다.

start_url

웹앱 실행시 시작되는 URL 주소

 

MDN에서 manifest.json에서 사용할 수 있는 다양한 키들이 있다고 알려준다.

manifest.json - Mozilla | MDN