[App] Web App Manifest

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

발단

App Store가 생긴 이후 Web Application을 더 Mobile Application처럼 보이게 하기 위해 Mobile icon과 Launch Screen(Splash Screen) 등을 Mobile에 등록, 점차 Web App manifest 파일을 도입하기 시작하였다.

구현

apple

<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="apple-touch-icon" sizes="72x72" href="/apple-touch-icon-72x72.png">
<link rel="apple-touch-icon" sizes="114x114" href="/apple-touch-icon-114x114.png">
<link rel="apple-touch-icon" href="/apple-touch-icon-57x57.png">
<link rel="apple-touch-startup-image" href="/splash-startup.png">

google

<meta name="mobile-web-app-capable" content="yes">
<link rel="icon" sizes="72x72"href="/icon72.png">
<link rel="icon" sizes="114x114"href="/icon114.png">
<link rel="icon" sizes="192x192"href="/icon.png">
<link rel="icon" sizes="57x57"href="/icon57.png">

WebApp Manifest File

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

// flutter - manifest.json
{
    "name": "flutter_230417",
    "short_name": "flutter_230417",
    "start_url": ".",
    "display": "standalone",
    "background_color": "#0175C2",
    "theme_color": "#0175C2",
    "description": "A new Flutter project.",
    "orientation": "portrait-primary",
    "prefer_related_applications": false,
    "icons": [
        {
            "src": "icons/Icon-192.png",
            "sizes": "192x192",
            "type": "image/png"
        },
        {
            "src": "icons/Icon-512.png",
            "sizes": "512x512",
            "type": "image/png"
        },
        {
            "src": "icons/Icon-maskable-192.png",
            "sizes": "192x192",
            "type": "image/png",
            "purpose": "maskable"
        },
        {
            "src": "icons/Icon-maskable-512.png",
            "sizes": "512x512",
            "type": "image/png",
            "purpose": "maskable"
        }
    ],
		"scope": "/racer/",
}

• name : icon 에 표시되는 이름
• short_name : Web Application 이름의 짧은 버전. 공간이 충분하지 않아 full name 이 나올 수 없을 때 사용된다.
• start_url : 실행시에 시작되는 URL 주소
• display : 앱이 어떤식으로 실행될지 정하는 속성 (enum : fullscreen, minimul-ui, standalone, browser)
• orientation : 웹 어플리케이션의 화면 방향을 정의 (enum : any, landscape, portrait, …)
• icon :
  • src : 이미지 위치
  • type : 아이콘 파일 유
  • sizes : 이미지 크기
  • density : 기기의 pixel density 에 맞춰 어떤 아이콘이 사용될지 정한다. (default : 1.0)
• Scope & Navigation Scope
  • Navigate outside the app : 앱 유효범위의 밖으로 이동하려고 하면 (a 태그 클릭시) 새로운 브라우저를 실행한다.
  • Navigate into the app : deep linking 이라고 불린다. 매니페스트 파일 내의 유효범위에 있는 URL로 이동하면, 앱 밖으로 벗어나지 않는다. 웹 페이지 뿐만 아니라 네이티브 앱에서도 웹 앱을 여는 것이 가능하다.

참조
https://joshua1988.github.io/web-development/pwa/webapp-manifest/
https://w3c.github.io/manifest/