manifest.json 란? 모바일 크롬 주소창 없애기 유용!

manifest.json파일은 json 포맷 파일로서 웹 브라우저에게 App에 대한 부가적인 정보를 전달하는 역할.

(마치 안드로이드의 manifest.xml과 유사)

- 이름, 버전번호, 라이센 등의 정보 담음

- 영단어의 'manifest'는 명확한 또는 명백하게 만든다는 뜻

- manifest.json 파일이느 웹 서버의 루트디렉토리에 위치시킴

- 구글과 모질라가 밀고있는 기술중 하나인 PWA(Progressive Web App)

 

*PWA(Progressive Web App)는 웹을 데스크톱 및 모바일에서 설치가능하고 앱과 유사한 환경을 제공!

앱과 유사한 경험을 지원하기 위해 PWA는 푸쉬알림(Push notification), 설치(install), 오프라인 지원 등의 기능을 지원하고 있음!

-> 웹이지만 브라우저의 주소창 없앨 수 있으며 앱처럼 유사경험을 할 수있음! 

-> mamifest.json 설정 후, 크롬 브라우저에서 홈 화면 추가하기 하면 끝!

 

manifest는 json포맷이기에 key와 value로 이루어져이스며, key값은 MDN을 참고하여 사용하면 된다.

 

"manifest_version", "version", "name" 키

반드시 작성해야 하는 것 (MDN문서 참고)

"_locales" 경로가 있다면, "default_locale" 은 반드시 있어야 하며, "_locales" 경로가 없다면, "default_locale" 은 없어야 합니다.

"applications"는 구글 크롬에서는 지원되지 않고, 파이어폭스 48 이전 버젼에는 의무적으로 있어야 합니다.

 

manifest_version

// manifest_version은 앱에서 사용하는 manifest.json의 버전
// version 현재 기준으로 2로 설정(필수)
"manifest_version": 2

 

version

// version은 '.'으로 구분된 숫자나 아스키 문자로 표현
// 버전 문자열은 점으로 구분된 1~4개의 숫자로 구성
// ex) 2.01(X) 불허 -> but 0.2(O), 2.0.1(O), 2.10(O) 가능
"version": "0.1"

// javascript로 manifest버전 확인가능
console.log(browser.runtime.getManifest().version);

 

name

// name은 사용자에게 보여지는 애플리케이션의 이름을 지정하는 문자열
// 이름 길이 45자로 제한
"name": "파고또파기 블로그"

 

그 외에 key들..

• short_name : 브라우저가 app name을 표시할 공간이 충분하지 않을 때 사용하는 text이며, homescreen icon의 name으로 사용됩니다.
• start_url : app이 최초 실행 될 때 load되는 file의 경로입니다.
• scope : app 내에서 기능을 적용할 범위를 나타내며, '.' 으로 표시하면 전체에 적용합니다.
• display : homescreen icon을 통해 실행될 때 app 화면이 보여지는 형태를 지정합니다.

        -> standalone : default 설정이며, native app처럼 browser control, url bar 등이 없이 app화면으로만 채워짐,

         -> browser : 일반적인 web page처럼 url bar가 보여집니다.

• background_color : splashscreen의 배경색을 지정합니다.
• theme_color : app 전체적인 테마색을 지정합니다.
• description : browser가 app의 description 정보를 요구할 때 사용됩니다.
• dir : app에 사용되는 언어의 읽기 방향을 나타내며, ltr(left to right)이 default 입니다.
• lang : app의 main language를 지정합니다.
• orientation : device에서 app 실행 시 app이 보여지는 방향을 지정합니다.

        -> portrait-primary : 세로 방향(어느 방향으로 뒤집어도 정 세로 방향 유지)

        -> any : device 방향에 따라 가로/세로 방향이 바뀜

       -> portrait : 세로 방향, device를 180도 회전하면 그에 맞게 바뀜

       -> landscape : 가로방향, device를 180도 회전하면 그에 맞게 바뀜

• icons : homescreen icon의 종류를 정의하는 속성이며, splash screen에서도 사용됩니다. icons set을 정의하면 브라우저가 device 크기와 해상도에 따라 가장 적합한 icon을 사용하게 됩니다. 각 icon은 (src, type, sizes)로 정의해야 합니다.
• relate_applications : 사용자가 관심 있을 수도 있는 web app와 동일한 기능을 하는 native app의 install 정보를 표시합니다.

 

---

manifest.json - Mozilla | MDN

해피쿠 블로그 - [PWA] 3. Manifest.json

 

PWA 적용해보기 - manifest 적용