[WEB] manifest.json은 무슨 역할을 할까?

 

 

manifest.json은 웹 애플리케이션에 대한 메타데이터를 제공하여 웹 애플리케이션을 다운로드할 수 있도록 하는 파일입니다. 파일 내에는 아래와 같이 애플리케이션 이름, 버전 번호, 사용될 아이콘 및 애플리케이션에 대한 다른 세부 정보와 같은 정보를 포함합니다.

manifest.json를 통해서 웹 앱도 PWA(Progressive Web App)의 기술 중 하나인 "설치" 기능을 제공하여 웹을 데스크톱 또는 모바일에 설치를 가능하게 하고, 모바일 앱과 유사한 경험을 지원할 수 있습니다.

 

• short_name : 화면에 설치된 아이콘의 이름
• name : 애플리케이션의 이름
• strat_url : 해당 애플리케이션을 실행하면 이동하는 주소
• display : 표시 방법에 관련된 속성입니다. 
  
  • fullscreen : 전체 화면
  • standalone : 상단 URL bar 제거
  • minimal-ui : standalone에서 일부 UI를 추가적으로 표시
  • browser : 일반적인 브라우저 창으로 보임(URL bar 표시)
• orientation : 기기의 방향
  
  • portrait : 세로 모드
  • landscape : 가로 모드
• theme_color : 애플리케이션의 시스템 UI 색을 지정
• background_color : 애플리케이션의 배경색
• icons : 애플리케이션이 사용할 아이콘 배열

{
  "short_name": "Todo List App",
  "name": "Todo List App",
  "start_url": ".",
  "display": "standalone",
  "orientation": "portrait",
  "theme_color": "#ffffff",
  "background_color": "#ffffff",
  "icons": [
    {
      "src": "icons/apple-touch-icon-57x57.png",
      "sizes": "57x57",
      "type": "/image/png"
    },
    {
      "src": "icons/apple-touch-icon-60x60.png",
      "sizes": "60x60",
      "type": "/image/png"
    },
    {
      "src": "icons/apple-touch-icon-72x72.png",
      "sizes": "72x72",
      "type": "/image/png"
    },
    {
      "src": "icons/apple-touch-icon-76x76.png",
      "sizes": "76x76",
      "type": "/image/png"
    },
    {
      "src": "icons/apple-touch-icon-114x114.png",
      "sizes": "114x114",
      "type": "/image/png"
    },
    {
      "src": "icons/apple-touch-icon-120x120.png",
      "sizes": "120x120",
      "type": "/image/png"
    },
    {
      "src": "icons/apple-touch-icon-144x144.png",
      "sizes": "144x144",
      "type": "/image/png"
    },
    {
      "src": "icons/apple-touch-icon-152x152.png",
      "sizes": "152x152",
      "type": "/image/png"
    },
    {
      "src": "icons/favicon-512x512.png",
      "sizes": "512x512",
      "type": "/image/png"
    },
    {
      "src": "icons/favicon.ico",
      "sizes": "64x64",
      "type": "/image/icon",
      "purpose": "any maskable"
    }
  ]
}

 

manifest.json 파일을 추가한 웹 서비스 예시 (안드로이드)

 

아이폰의 경우 사파리 앱 중앙 하단에 공유 버튼을 탭 하여 "홈 화면에 추가"로 아이콘 생성이 가능합니다.