PWA를 사용한 웹앱 만들기 manifest편

PWA를 위한 index.html셋팅

index.html의 <head> 영역에 아래의 한줄을 추가해주고 manifest.json을 루트 위치에 놓게 되면 PWA셋팅이 끝난다.

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

manifest의 설정은 다음과 같습니다.

Manifest.json 설정

name 설정 (필수)

name은 웹앱의 이름에 해당되며 title의 역할을 한다고 생각하면 좋습니다. 또한 필수 값으로 반드시 설정해야 합니다.

short_name 설정 (필수)

short_name은 아이콘의 이름에 해당합니다. 또한 필수 값으로 반드시 설정해야 합니다.

scope 설정

scope는 PWA에 포함될 페이지를 설정하는 것으로 "."을 사용하여 모든 페이지를 포함할 수 있습니다.

"scope": ".",

description 설정

description은 해당 웹앱의 설명을 적는 곳입니다. meta description과 같이 설정하면 됩니다.

start_url 설정

start_url은 웹앱이 실행될때 나오는 화면의 주소를 설정합니다.

icon 설정

icon은 배열이며 여러개로 설정이 가능합니다. 따라서 사이즈 별로 추가가 가능합니다.

공식 문서에 따르면 아이콘은 최소 512px *512px을 권장합니다.

또한 아이콘의 이미지 타입은 png로 설정해야 합니다.

{
  "icons": [
    {
      "src": "/src/images/icons/app-icon-48x48.png",
      "type": "image/png",
      "sizes": "48x48"
    },
    {
      "src": "/src/images/icons/app-icon-96x96.png",
      "type": "image/png",
      "sizes": "96x96"
    },
    {
      "src": "/src/images/icons/app-icon-128x128.png",
      "type": "image/png",
      "sizes": "128x128"
    },
    {
      "src": "/src/images/icons/app-icon-512x512.png",
      "type": "image/png",
      "sizes": "512x512"
    }
  ]
}

ios에서는 index.html에 아래의 메타테그를 <head>영역에 추가해야 합니다.

안드로이드에서는 문제가 없지만 ios에서는 스플래시 이미지가 안뜨는 경우가 종종 있습니다.

따라서 아래의 이미지들을 셋팅하는 것을 권장합니다. 설정시 이미지의 주소를 작확인해야 합니다.

<link rel="apple-touch-startup-image" href="images/splash/launch-640x1136.png" media="(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)">
<link rel="apple-touch-startup-image" href="images/splash/launch-750x1294.png" media="(device-width: 375px) and (device-height: 667px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)">
<link rel="apple-touch-startup-image" href="images/splash/launch-1242x2148.png" media="(device-width: 414px) and (device-height: 736px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)">
<link rel="apple-touch-startup-image" href="images/splash/launch-1125x2436.png" media="(device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)">
<link rel="apple-touch-startup-image" href="images/splash/launch-1536x2048.png" media="(min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait)">
<link rel="apple-touch-startup-image" href="images/splash/launch-1668x2224.png" media="(min-device-width: 834px) and (max-device-width: 834px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait)">
<link rel="apple-touch-startup-image" href="images/splash/launch-2048x2732.png" media="(min-device-width: 1024px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait)">

background_color 설정

background_color는 스플래쉬 이미지가 나올때의 배경색을 설정합니다.

theme_color 설정

theme_color는 URL입력바와 시스템바의 색상을 설정하는 역할을 합니다.

색상은 핵사 코드로 #000000 ~ #FFFFFF 사이로 선택가능합니다.

display 설정

display는 웹앱이 어떤 모양으로 보여질지 설정하는 값으로 3가지 설정이 가능합니다.

왼쪽 부터 browser, standalone, fullscreen

browser(기본값) - 상단 URL바를 포함한 기본 웹으로 실행
standalone - 상단의 URL바를 없앤 상태로 네이티브앱처럼 보임
fullscreen - 화면전체를 사용함. 기본 하단 바까지 사라짐

ios에서 standalone을 사용하려면 index.html에 아래의 메타태그를 <head>영역에 추가해야 합니다.

<meta name="apple-mobile-web-app-capable" content="yes">

orientation 설정

orientation은 기기의 방향을 설정하는 값으로 가로와 세로를 주로 사용하며 대부분 세로를 사용합니다.

portrait - 세로
landscape - 가로

manifest_version 설정 (필수)

manifest_version은 현재 사용중인 Manifest.json의 버전을 설정합니다. 또한 필수 값입니다. 버전은 숫자를 사용하여 표현합니다.

"manifest_version": 3,

version 설정 (필수)

version은 현재의 앱 버전을 의미합니다. 숫자로 구성되어야 하며 숫자 앞에는 0이 포함되어서는 안됩니다.

2.01 (안됨) 2.0.1 (가능), 또한 필수 값입니다.

"version": "0.1"

주의사항

PWA가 사파리브라우저에서 인식이 안되는 경우가 종종 있음 그럴때는 index.html에 아래의 메타테그를 <head>영역에 추가하면 도움이 됩니다. 이미지의 경우 주소값을 잘 확인해야 합니다.

<link rel="apple-touch-icon" href="iphone.png"> 
<link rel="apple-touch-icon" sizes="152x152" href="ipad.png"> 
<link rel="apple-touch-icon" sizes="167x167" href="ipad-retina.png"> 
<link rel="apple-touch-icon" sizes="180x180" href="iphone-retina.png">

Manifest.json 샘플

{
    "manifest_version": 2,
    "version": "0.1",
    "name": "구름이의 클라우드",           
    "short_name":"구름이의 클라우드",
    "start_url":"/",
    "display": "standalone",
    "orientation": "portrait-primary",
    "background_color": "#ffffff",
    "theme_color": "#ffffff",
    "description": "기록하는 개발자",
    "icons":[{
        "src" :"/512_512.png",
        "type":"image/png",
        "sizes":"512X512"
        },{
        "src" :"/128_128.png",
        "type":"image/png",
        "sizes":"128X128"
        }
    ]
  }

저작자표시 비영리 변경금지

'웹언어' 카테고리의 다른 글

네이버 블로그 방문자수 확인하는 방법 (0)	2024.07.02