PWA 매니페스트: 쉬운 방법으로 웹 앱 매니페스트 만들기

적절하게 구성된 웹 앱 매니페스트는 PWA가 없으면 전체 프로세스가 불가능하기 때문에 PWA의 설치 프로세스에 매우 중요합니다. 그리고 놀랍게도 웹 앱 매니페스트를 적절하게 구성하는 것도 그리 어렵지 않습니다.

무엇을 위한 것입니까?

웹 앱 매니페스트는 앱이 시작 화면과 사용자의 홈 화면에서 사용자에게 표시되는 방식을 결정하므로 PWA의 중요한 부분입니다. 이것들은 모두 앱에 대한 사용자의 인상을 형성하는 데 기여하는 중요한 초기 단계이며, 이것이 바로 앱을 만드는 것이 중요한 이유입니다.

manifest.json을 구성하는 방법

처음부터 시작

JSON 데이터 형식에 약간만 익숙해지면 아무런 노력 없이도 웹 앱 매니페스트를 직접 만들 수 있습니다.

일반적인 manifest.json 은 다음과 같아야 합니다.

 {
    "theme_color": "#f69435",
    "background_color": "#ffffff",
    "디스플레이": "전체 화면",
    "범위": "/",
    "start_url": "/",
    "app_name": "SimiCart",
    "short_name": "SimiCart",
    "설명": "Magento를 위한 차세대 전자 상거래 솔루션",
    "아이콘": [
        {
            "src": "/icon-192x192.png",
            "크기": "192x",
            "유형": "이미지/png"
        },
        {
            "src": "/icon-256x256.png",
            "크기": "256x",
            "유형": "이미지/png"
        },
        {
            "src": "/icon-384x384.png",
            "크기": "384x",
            "유형": "이미지/png"
        },
        {
            "src": "/icon-512x512.png",
            "크기": "512x",
            "유형": "이미지/png"
        }
    ]
}

코드의 일부를 생략할 수 있지만 여전히 일부 필수 구성원 이 있으므로 사용자가 PWA를 설치할 수 없습니다.

 이름, 짧은 이름, 아이콘, 표시, start_url

• name : 홈 화면 및 기타 여러 위치에서 앱 아이콘 아래에 표시되는 앱의 이름입니다. 이름 속성의 값을 짧고 단순하게 유지하십시오.

• short-name : name 속성 값이 사용자 화면에 맞지 않을 때 이 속성 값이 사용됩니다. short-name 은 20자 미만으로 하는 것이 좋습니다. 실제로 10명의 캐릭터를 촬영합니다.

• icons : 앱의 아이콘으로, 다양한 OS 및 장치에 대한 여러 이미지로 구성될 수 있습니다. 브라우저가 홈 화면에 추가, 시작 화면 등에 사용할 아이콘 세트를 정의할 수 있습니다.

예를 들어 iOS만 해도 4개의 기기에 대해 4가지 크기가 필요합니다.

• iPhone: 120 x 120픽셀 및 180 x 180픽셀
• 아이패드 프로: 167 x 167 픽셀
• iPad 및 iPad 미니: 152 x 152픽셀

iOS 및 Android에서 완벽하게 사용하려면 Google Chrome에서도 최소 2가지 크기가 필요합니다.

• 512 x 512픽셀
• 192 x 192픽셀

이미지 아이콘을 호출하려면 src , type 및 sizes 라는 속성 집합이 사용됩니다.

• src : 아이콘 이미지 파일의 경로
• types : 이미지 파일 유형
• sizes : 이미지의 너비 x 높이(픽셀 단위)

 "아이콘": [ 
    {
       "src" : "/imgs/icon152.png",
       "유형": "이미지/png",
       "크기": "192x192"
    },
    {
       "src" : "/imgs/icon215.png",
       "유형": "이미지/png",
       "크기": "512x512"
    }
]

• display : 앱이 표시되는 방식을 나타냅니다. 몰입감 있고 앱과 같은 경험을 위해서는 fullscreen (UI 없음)으로 설정하는 것이 좋습니다. 그러나 성능 면에서 비용이 덜 드는 standalone , minimal-ui 와 같은 옵션도 사용할 수 있지만 몰입형 경험을 잃게 되는 대가를 치르게 됩니다(상태 표시줄이 계속 표시될 수 있음).

• start_url : 애플리케이션이 시작되는 경로를 나타냅니다. 애플리케이션이 manifest.json 이 저장된 동일한 .root 디렉토리에서 시작되는 경우 start_url 값은 단순할 / 있습니다.

선택적 멤버

책을 읽는 것은 한 가지 일이지만 항상 더 나아지기 위해 노력할 여지가 있습니다. 다음은 더 우수하고 자세한 웹 앱 매니페스트를 위한 권장 키입니다.

• scope : 사용자가 갈 수 있는 범위를 제한합니다. 사용자가 범위 외부를 탐색하면 브라우저 탭 또는 창 내부의 일반 웹 페이지로 되돌아갑니다. 웹사이트의 범위를 지정하려면 / 를 넣거나 웹사이트의 전체 URL을 입력하면 됩니다.

참고 :
– scope 의 기본 동작은 manifest.json 이 제공되는 디렉토리입니다.
– 웹 앱에서 열린 모든 링크는 기존 PWA 창 내에서 렌더링됩니다. 브라우저 탭에서 링크를 열려면 <a> 태그에 target="_blank" 를 추가해야 합니다.
– start_url 은 범위에 있어야 합니다.

• background_color : 특정 앱 컨텍스트의 배경색을 나타냅니다. 보다 구체적으로, 이 필드는 시작 화면의 배경색을 설정하는 데 사용할 수 있습니다.

• theme_color : 주소 표시줄과 같은 웹 앱 UI 요소의 테마 색상을 나타냅니다. 변경 사항은 사이트 전체에 적용되며 사이트가 홈 화면에서 시작된 경우에만 유효합니다.

참고 : 페이지 수준 구성(예: theme-color 메타 태그: <meta name="theme-color" content="#3367D6"> )은 웹 앱 매니페스트에서 theme_color 값을 재정의합니다.

• description : 이것은 자명해야 합니다.

• shortcuts : 웹 앱 내 페이지에 대한 바로 가기를 정의합니다. 앱 바로 가기는 Android에서 앱 실행기 아이콘을 길게 누르거나 작업 표시줄(Windows)/도크(macOS)에서 앱 아이콘을 마우스 오른쪽 버튼으로 클릭하여 액세스할 수 있습니다.

 "바로 가기": [
  {
    "이름": "알림",
    "url": "/사용자/알림/",
    "description": "당신이 놓친 뉴스"
  },
  {
    "이름": "새 주문 생성",
    "url": "/생성/주문"
  },
  {
    "이름": "내 위시리스트",
    "url": "/사용자/위시리스트"
  }
]

웹 앱 매니페스트 생성기 사용

이를 수행하는 더 쉽고 간편한 방법은 웹 앱 매니페스트 생성기를 사용하는 것입니다. 생성기는 입력을 받아 그대로 사용할 수 있는 완전한 기능의 웹 앱 매니페스트를 생성합니다.

manifest.json 연결

모든 것이 올바르게 구성되면 다음 단계는 HTML 헤더에서 웹 앱 매니페스트를 참조하는 것입니다.

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

웹 앱 매니페스트를 참조한 후 지원되는 모든 브라우저는 이제 manifest.json 을 올바르게 인식해야 합니다. 현재 지원되는 브라우저의 전체 목록을 보려면 CanIUse를 확인하십시오.

결론

그리고 이것이 간단한 웹 앱 매니페스트에 대한 것입니다. 완전히 작동하는 manifest.json 을 만드는 데 시간이 전혀 걸리지 않아야 합니다. 그리고 몇 가지만 추가하면 웹 앱을 다른 PWA처럼 설치할 수 있습니다.