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

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

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

이것이 왜 유용할까요?

웹 앱 매니페스트 파일은 매니페스트 파일의 설치 방식을 변경하는 기능을 앱이 사용자의 데스크톱이나 모바일 기기에서 작동하는 것처럼 보이게 할 것입니다. 수정 속성을 사용하여 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를 엽니다.
• Application 탭을 클릭합니다.
• Application 패널에서 Manifest 탭을 클릭합니다.

결론

1. 컴퓨터에 설치할 필요가 없다고 생각되는 사이트를 구축하는 경우 기기에서 매니페스트와 <link> 요소를 삭제하면 됩니다. 표시됩니다.
2. 사용자가 기기에 애플리케이션을 설치하도록 하려면 모든 매니페스트 파일을 원하는 속성을 지정할 수 있습니다. 이 MDN 문서 필수 및 선택 속성을 모두 설명합니다.