웹 앱 매니페스트 추가

François Beaufort

Pete LePage

Thomas Steiner

Alexey Rodionov

웹 앱 매니페스트는 앱이 매니페스트 파일을 생성하는 방법을 프로그레시브 웹 앱 (PWA)은 사용자의 데스크톱 또는 있습니다. 일반적인 매니페스트 파일에는 최소한 다음 항목이 포함됩니다.

• 앱 이름
• 앱에서 사용해야 하는 아이콘
• 앱이 실행될 때 열어야 하는 URL입니다.

매니페스트 파일 만들기

매니페스트 파일의 이름은 자유롭게 지정할 수 있지만 일반적으로는 manifest.json로 이름이 지정됩니다. 루트 (웹사이트의 최상위 디렉토리)에서 검색됩니다. 사양 확장자가 .webmanifest여야 함을 표시하지만 JSON을 사용하는 것이 좋습니다. 파일을 사용하여 매니페스트를 더 명확하게 읽을 수 있습니다.

일반적인 매니페스트는 다음과 같습니다.

{
  "short_name": "Weather",
  "name": "Weather: Do I need an umbrella?",
  "icons": [
    {
      "src": "/images/icons-vector.svg",
      "type": "image/svg+xml",
      "sizes": "512x512"
    },
    {
      "src": "/images/icons-192.png",
      "type": "image/png",
      "sizes": "192x192"
    },
    {
      "src": "/images/icons-512.png",
      "type": "image/png",
      "sizes": "512x512"
    }
  ],
  "id": "/?source=pwa",
  "start_url": "/?source=pwa",
  "background_color": "#3367D6",
  "display": "standalone",
  "scope": "/",
  "theme_color": "#3367D6",
  "shortcuts": [
    {
      "name": "How's the weather today?",
      "short_name": "Today",
      "description": "View weather information for today",
      "url": "/today?source=pwa",
      "icons": [{ "src": "/images/today.png", "sizes": "192x192" }]
    },
    {
      "name": "How's the weather tomorrow?",
      "short_name": "Tomorrow",
      "description": "View weather information for tomorrow",
      "url": "/tomorrow?source=pwa",
      "icons": [{ "src": "/images/tomorrow.png", "sizes": "192x192" }]
    }
  ],
  "description": "Weather forecast information",
  "screenshots": [
    {
      "src": "/images/screenshot1.png",
      "type": "image/png",
      "sizes": "540x720",
      "form_factor": "narrow"
    },
    {
      "src": "/images/screenshot2.jpg",
      "type": "image/jpg",
      "sizes": "720x540",
      "form_factor": "wide"
    }
  ]
}

주요 매니페스트 속성

short_name 및 name

매니페스트에 short_name 또는 name 중 하나 이상을 제공해야 합니다. 만약 둘 다 제공하면 name는 앱이 설치될 때 사용되고 short_name는 다음과 같습니다. 사용자의 홈 화면, 런처 또는 공간이 있는 다른 장소에 제한됩니다.

icons

사용자가 PWA를 설치할 때 브라우저 아이콘 집합을 정의할 수 있습니다. 홈 화면, 앱 런처, 작업 전환기, 스플래시 화면 다른 곳에서 확인할 수 있습니다.

icons 속성은 이미지 객체의 배열입니다. 각 객체는 src, sizes 속성, 이미지의 type를 포함합니다. 사용 방법 마스크 가능한 아이콘(적응형 배너라고도 함) 아이콘의 경우 icon 속성에 "purpose": "any maskable"를 추가합니다.

Chromium의 경우 최소 192x192픽셀 아이콘 및 512x512픽셀 아이콘입니다. 이 두 가지 아이콘 크기만 제공되는 경우 Chrome은 아이콘을 기기에 맞게 자동으로 조정합니다. 300x250 크기의 정확한 픽셀 품질을 위해 조정하며 점진적인 아이콘 제공 48dp입니다.

id

id 속성을 사용하면 애플리케이션입니다. 매니페스트에 id 속성을 추가하면 start_url 또는 매니페스트의 위치 영향을 줄 수 있습니다 자세한 내용은 웹 앱 매니페스트 ID 속성으로 PWA를 고유하게 식별.

start_url

start_url는 필수 속성입니다. 브라우저에 앱이 시작될 때 시작되어야 하며, 앱이 사용자가 홈 화면에 앱을 추가했을 때 머물렀던 페이지입니다.

start_url은 제품이 아닌 사용자를 앱으로 바로 안내해야 합니다. 방문 페이지 사용자가 방문 직후에 무엇을 하고 싶어 할지 생각해 보세요. 앱을 열어 배치할 수 있습니다

background_color

background_color 속성은 애플리케이션이 실행되는 것을 볼 수 있습니다.

display

앱이 실행될 때 표시되는 브라우저 UI를 맞춤설정할 수 있습니다. 대상 예를 들어 주소 표시줄과 브라우저 사용자 인터페이스 요소를 숨길 수 있습니다. 게임 전체 화면으로 실행하도록 설정할 수도 있습니다. display 속성은 다음 값:

속성	동작
fullscreen	브라우저 UI 없이 웹 앱을 열고 표시됩니다.
standalone	웹 앱을 열어 독립형 앱처럼 보입니다. 앱이 실행됩니다. 브라우저와 분리되어 별도의 자체 창에 표시되며 브라우저 UI 요소(예: 주소 표시줄) <ph type="x-smartling-placeholder"> </ph>
minimal-ui	이 모드는 standalone와 유사하지만 탐색을 제어하는 최소한의 UI 요소 집합을 사용하는 사용자 다시 로드 버튼과 같은 기능을 사용할 수 있습니다 <ph type="x-smartling-placeholder"> </ph>
browser	표준 브라우저 환경

display_override

웹 앱이 표시되는 방식을 선택하려면 매니페스트에서 display 모드를 다음과 같이 설정합니다. 이전 설명에서 확인하세요. 브라우저가 모든 디스플레이를 지원할 필요는 없습니다. 지원하기 위해필요합니다. 사양 정의 대체 체인 ("fullscreen" → "standalone" → "minimal-ui" → "browser"). 연결되지 않는 경우 체인의 다음 표시 모드로 돌아갑니다. 포함 드물지만 이러한 대체로 인해 문제가 발생할 수 있습니다. 예를 들어 개발자는 "browser" 디스플레이로 강제로 돌아가지 않고 "minimal-ui" 요청 "minimal-ui"가 지원되지 않는 경우 모드 또한 현재의 동작을 이전 버전과 호환되는 방식으로 새로운 디스플레이 모드를 도입하는 것이 불가능하지만 대체 체인에 배치되지 않기 때문입니다.

display_override 속성을 사용하여 자체 대체 시퀀스를 설정할 수 있습니다. 이는 브라우저에서 display 속성 전에 고려합니다. 그 값은 나열된 순서대로 고려되는 문자열 시퀀스이고 첫 번째 지원되는 디스플레이 모드가 적용됩니다. 지원되지 않는 경우 브라우저가 대체됩니다. display 필드를 평가합니다. display 필드가 없으면 브라우저에서 display_override는 무시합니다.

다음은 display_override를 사용하는 방법을 보여주는 예입니다. 자세한 내용은 "window-control-overlay"은(는) 지원 범위에 해당하지 않습니다. 정의합니다.

{
  "display_override": ["window-control-overlay", "minimal-ui"],
  "display": "standalone",
}

이 앱을 로드할 때 브라우저에서 "window-control-overlay"을(를) 사용하려고 시도합니다. 있습니다. 사용할 수 없는 경우 "minimal-ui"로 대체됩니다. 그런 다음 display 속성에서 "standalone"를 가져옵니다. 사용할 수 있는 방법이 없는 경우 브라우저가 표준 대체 체인으로 돌아갑니다.

scope

앱의 scope는 브라우저가 일부로 간주하는 URL의 집합입니다. 있습니다. scope는 모든 진입 및 이탈을 포함하는 URL 구조를 제어합니다. 앱을 가리키고 브라우저는 이를 사용하여 사용자가 언제 나갔는지를 판단합니다. 앱

scope에 관한 기타 참고사항:

• 매니페스트에 scope를 포함하지 않으면 묵시적으로 기본값이 scope은 시작 URL이지만 파일 이름, 쿼리, 프래그먼트가 삭제되었습니다.
• scope 속성은 상대 경로 (../) 또는 그보다 높은 수준일 수 있습니다. 탐색 범위를 늘릴 수 있는 경로 (/) 확인할 수 있습니다.
• start_url이 범위 내에 있어야 합니다.
• start_url는 scope 속성에 정의된 경로를 기준으로 합니다.
• /로 시작하는 start_url는 항상 출처의 루트가 됩니다.

theme_color

theme_color는 툴바의 색상을 설정하며, 작업 전환기에서 앱의 미리보기를 확인할 수 있습니다. theme_color는 문서 헤드에 지정된 meta 테마 색상이 있습니다.

</ph> <ph type="x-smartling-placeholder">

미디어 쿼리의 theme_color

다음과 같이 media 속성을 사용하여 미디어 쿼리에서 theme_color를 조정할 수 있습니다. meta 테마 색상 요소 예를 들어 밝은 모드에는 한 가지 색상을 정의할 수 있습니다. 또 다른 하나는 어두운 모드를 위한 것입니다 하지만 이러한 포드를 환경설정을 지정할 수 있습니다 자세한 내용은 w3c/manifest#975 GitHub 문제를 참고하세요.

<meta name="theme-color" media="(prefers-color-scheme: light)" content="white">
<meta name="theme-color" media="(prefers-color-scheme: dark)"  content="black">

shortcuts

shortcuts 속성은 앱 바로가기의 배열입니다. 객체를 사용하면 앱 내의 주요 작업에 빠르게 액세스할 수 있습니다. 각 구성원 최소 name 및 url가 포함된 사전입니다.

description

description 속성은 앱의 목적을 설명합니다.

Chrome의 모든 플랫폼에서 설명의 최대 길이는 300자(영문 기준)입니다. 설명이 이보다 길 경우 브라우저에서 생략할 수 있습니다. Android의 경우 설명에 최대 7줄의 텍스트를 입력할 수 있습니다.

screenshots

screenshots 속성은 앱을 나타내는 이미지 객체의 배열입니다. 살펴보겠습니다 각 객체에는 src, sizes가 포함되어야 합니다. 속성 및 이미지의 type가 포함됩니다. form_factor 속성은 선택사항입니다. 넓은 화면에 적용할 수 있는 스크린샷의 경우 "wide"로 설정할 수 있습니다. 단, 좁은 스크린샷에는 "narrow"만 사용합니다.

Chrome에서 이미지는 다음 기준을 충족해야 합니다.

• 너비와 높이는 최소 320픽셀 이상, 3840픽셀 이하여야 합니다.
• 최대 크기는 최소 길이의 2.3배를 초과할 수 없습니다. 측정기준을 선택할 수 있습니다.
• 적절한 폼 팩터와 일치하는 모든 스크린샷이 동일해야 합니다. 가로세로 비율
  • Chrome 109부터 form_factor가 "wide"로 설정된 스크린샷만 데스크톱에 표시됩니다.
• Chrome 109부터 form_factor가 "wide"로 설정된 스크린샷은 다음과 같습니다. 무시됩니다. form_factor가 없는 스크린샷이 계속 표시됨 이전 버전과의 호환성 문제를 해결하는 데 도움이 됩니다.

데스크톱의 Chrome은 요구사항을 충족하는 하나 이상의 스크린샷을 확인할 수 있습니다 나머지는 무시됩니다.

Android의 Chrome은 확인할 수 있습니다 나머지는 무시됩니다.

</ph> <ph type="x-smartling-placeholder">

페이지에 웹 앱 매니페스트 추가

매니페스트를 생성한 후 매니페스트의 모든 페이지에 <link> 태그를 추가합니다. 프로그레시브 웹 앱 예를 들면 다음과 같습니다.

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

매니페스트 테스트

매니페스트가 올바르게 설정되었는지 확인하려면 매니페스트 창을 사용합니다. Application 패널로 이동합니다.

</ph> <ph type="x-smartling-placeholder">

이 창은 많은 매니페스트의 사람이 읽을 수 있는 버전을 제공합니다. 속성을 사용하여 모든 이미지가 로드되고 있는지 있습니다.

휴대기기의 스플래시 화면

앱이 모바일에서 처음 실행될 때 브라우저에서 초기 콘텐츠가 렌더링을 시작합니다 kubectl 명령어 사용자에게 앱이 작동하지 않는다고 생각할 수 있는 흰색 화면이 표시되면 첫 번째 페인트까지 스플래시 화면을 표시합니다.

Chrome은 name에서 스플래시 화면을 자동으로 생성합니다. 매니페스트에 지정된 background_color 및 icons입니다. 매끄러운 스플래시 화면에서 앱으로 전환할 때 background_color 페이지 색상과 동일합니다.

Chrome은 기기의 기기 해상도에 가장 근접하게 일치하는 아이콘을 스플래시 화면 대부분의 경우 192px 및 512px 아이콘을 제공하는 것으로 충분합니다. 더 잘 일치하도록 추가 아이콘을 제공할 수 있습니다.

추가 자료

웹 앱 매니페스트에 추가할 수 있는 다른 속성에 관해 알아보려면 다음을 참조하세요. MDN 웹 앱 매니페스트 문서를 참조하세요.