React 앱 만들기로 웹 앱 매니페스트 추가

웹 앱 매니페스트는 기본적으로 Create React App에 포함되어 있으며 누구나 기기에 React 애플리케이션을 설치할 수 있습니다.

Create React App(CRA)에는 기본적으로 웹 앱 매니페스트가 포함되어 있습니다. 이 파일을 수정하면 사용자 기기에 애플리케이션이 설치되었을 때 애플리케이션이 표시되는 방식을 변경할 수 있습니다.

휴대전화의 홈 화면에 있는 프로그레시브 웹 앱 아이콘

이것이 왜 유용할까요?

웹 앱 매니페스트 파일은 설치된 애플리케이션이 사용자의 데스크톱 또는 휴대기기에서 어떻게 표시되는지 변경하는 기능을 제공합니다. JSON 파일의 속성을 수정하여 애플리케이션의 여러 세부정보를 수정할 수 있습니다. 예를 들면 다음과 같습니다.

  • 이름
  • 설명
  • 앱 아이콘
  • 테마 색상

MDN 문서에서는 변경할 수 있는 모든 속성을 자세히 다룹니다.

기본 매니페스트 수정

CRA에서는 새 앱이 생성될 때 기본 매니페스트 파일인 /public/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"
}

이렇게 하면 누구나 기기에 애플리케이션을 설치하고 애플리케이션의 일부 기본 세부정보를 볼 수 있습니다. HTML 파일 public/index.html에는 매니페스트를 로드하는 <link> 요소도 포함되어 있습니다.

<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />

다음은 수정된 매니페스트 파일이 있는 CRA로 빌드된 애플리케이션의 예입니다.

이 예에서 모든 속성이 올바르게 작동하는지 확인하려면 다음 단계를 따르세요.

  • 사이트를 미리 보려면 앱 보기를 누른 다음 전체 화면전체 화면을 누릅니다.
  • `Control+Shift+J`(Mac의 경우 `Command+Option+J`)를 눌러 DevTools를 엽니다.
  • 애플리케이션 탭을 클릭합니다.
  • 애플리케이션 패널에서 매니페스트 탭을 클릭합니다.

DevTool의 매니페스트 탭에는 앱 매니페스트 파일의 속성이 표시됩니다.

결론

  1. 기기에 설치할 필요가 없다고 생각되는 사이트를 빌드하는 경우 매니페스트와 이를 가리키는 HTML 파일의 <link> 요소를 삭제합니다.
  2. 사용자가 기기에 애플리케이션을 설치하도록 하려면 원하는 속성을 사용하여 매니페스트 파일을 수정하거나 CRA를 사용하지 않는 경우 매니페스트 파일을 만듭니다. MDN 문서에서는 모든 필수 속성과 선택적 속성을 설명합니다.