menifest를 사용하는 이유 :
App Store 도래 후, 웹 개발자들은 Web Application 을 Mobile Application 의 느낌으로 보이게 할지 연구했는데,
Wep App에 Native 느낌을 더하기 위해 meta~ link~ 태그들을 여러개 추가했는데,
최종적으로는 Web App Manifest File 추가.
//index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta
name="description"
content="Web site created using create-react-app"
/>
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo.png" />
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
[...]**개념정의
- name : icon 에 표시되는 이름
- short_name : Web Application 이름의 짧은 버전. 공간이 충분하지 않아 full name 이 나올 수 없을 때 사용된다.
- start_url : 실행시에 시작되는 URL 주소
- display : 앱이 어떤식으로 실행될지 정하는 속성 (fullscreen, minimul-ui, standalone, browser)
- orientation : 웹 어플리케이션의 화면 방향을 정의 (any, landscape, portrait, …)
**index.html에 public 폴더에 있는 menifest 첨부
public/ 디렉토리에있는 파일을 HTML에 포함 시키려면 React Create App에 %PUBLIC_URL% 접두사가 있어야한다.
{
"short_name": "React App",
"name": "Create React App Sample",
"icons": [
{
"src": "favicon.ico",
"sizes": "64x64 32x32 24x24 16x16",
//x-icon editor, high resolution icons(favicon) 으로 추측
"type": "image/x-icon"
},
{
"src": "logo192.png",
"type": "image/png",
"sizes": "192x192"
},
{
"src": "logo.png",
"type": "image/png",
"sizes": "512x512"
}
],
"start_url": ".",
// display standalone : default값으로 추측
"display": "standalone",
"theme_color": "#000000",
"background_color": "#ffffff"
}