# 22-07-13

# 🤔 `create-react-app`으로 생성된 `manifest.json`은 무엇일까?

create-react-app으로 리액트 프로젝트를 생성하면 아래와 같은 내용의 manifest.json이 생성된다.

{
  "short_name": "React App",
  "name": "Create React App Sample",
  "icons": [
    {
      "src": "favicon.ico",
      "sizes": "64x64 32x32 24x24 16x16",
      "type": "image/x-icon"
    },
    {
      "src": "logo192.png",
      "type": "image/png",
      "sizes": "192x192"
    },
    {
      "src": "logo512.png",
      "type": "image/png",
      "sizes": "512x512"
    }
  ],
  "start_url": ".",
  "display": "standalone",
  "theme_color": "#000000",
  "background_color": "#ffffff"
}

favicon을 적용하기 위해 파일을 살펴보던 중 manifest.json에 대해 궁금해졌다.

<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />

index.html에서 favicon을 이미 적용하고 있는데, manifest.json은 무슨 역할인 걸까?

# 공식 문서로 알아보자

CRA 공식문서 (opens new window)에서는 public/manifest.json경로에 web app manifest를 포함한 기본 설정이 되어있다고 알려주고 있다. 또한 아래 내용도 기재 되어있다.

안드로이드 Firefox나 Chrome을 이용하여 유저가 홈화면에 web app을 추가하면 manifest.json의 메타데이터가 해당 web app이 표시될 icon, names, branding colors를 결정해 준다.

홈화면에 추가된 Progressive Web Apps는 service worker가 동작한다면 더 빠르게 로드 되고, 오프라인에서도 동작한다. web app menifest의 메타데이터는 service worker의 등록 여부와 관계없이 사용된다.

Progressive Web App Metadata 목차만 살펴 보았을때에는 위 내용을 확인 할 수 있었고, 전체 목차(Making a Progressive Web App (opens new window))를 확인해보면, 아래와 같이 create-react-app으로 프로젝트를 생성할때 pwa template을 이용하여 service worker를 포함한 프로젝트를 시작할 수 있다는 점을 알 수 있었다. (src/service-worker.js 생성)

npx create-react-app my-app --template cra-template-pwa

# 그래서, Progressive Web App이 뭔데?

구글이 잘 정리된 문서 (opens new window)를 공개해두어서, 쉽게 알아볼 수 있었다.

웹 애플리케이션은 하나의 코드를 베이스로 모든 장치에서, 모든 사람에게 연결 될 수 있다. 플랫폼별 애플리케이션은 네트워크 연결에 관계없이 작동하고(오프라인 동작), 자체 독립적인 실행 환경에서 실행된다. 홈화면, 독(Dock), 작업표시줄에 존재한다(push알림과 같은 알림을 받을 수 있음). 플랫폼별 애플리케이션은 장치의 일부처럼 동작한다.

PWA는 웹애플리케이션임에도 불구하고 플랫폼별 애플리케이션처럼 느껴지는 경험을 제공해 주어 아래의 앱의 주요 개념을 보여준다.

# 1. 기능성

웹에서 제공할 수 없는 기능을 제공 (파일시스템 애세스, 미디어 제어, 앱 배지, 완전한 클립보드 지원 등)

# 2. 신뢰성

네트워크에 관계없이 빠른 속도와 신뢰성
- 사용자 경험에 긍정적인 영향(속도, 스크롤, 애니메이션 등)
네트워크 연결 여부와 관계없이 안정적인 사용
- 불안정한 네트워크 연결 혹은 오프라인 상태에서 동작

# 3. 설치 가능성

독립 실행형 창에서 실행
- 앱이 설치된 기기의 일부처럼 느껴지도록 함(홈, 독, 작업표시줄 등에서 실행, 앱 간 전환)

Progressive Web App은 웹 애플리케이션이지만, 사용자가 선호하는 웹 경험을 제공할 수 있고, 향상된 기능과 안정성을 제공할 수 있다. 또한 PWA는 앞서 말했듯이 단일 코드베이스로 누구나, 어디서나, 모든 장치에 설치하여 사용할 수 있다. 안정적이고 설치 가능한 Progressive Web App은 새 기능을 사용할 수 없는 경우에도 사용자가 핵심 환경을 계속 사용할 수 있도록 한다.

2022년에 업데이트된 구글의 Progressive Web App training (opens new window)을 따라가면 PWA기술을 적용한 프로젝트를 진행해보고, 쉽게 알아 볼 수 있을 것 같다.(우리말 지원👍)

# manifest.json 분석하기

manifest.json이 어떤 내용을 담고 있는지 확인해보자!(Add a web app manifest (opens new window)을 참고)

web app manifest는 JSON파일로 작성되고, 이 파일은 사용자의 데스크탑이나 모바일 기기에 설치 되었을 때 어떻게 동작하면 될지를 알려주게 된다. 보통 create-react-app처럼 manifest.json이라는 이름으로 생성한다(다른 이름도 가능). 그리고 루트 디렉토리에 위치한다.(top-level directory)

"short_name": "React App",
"name": "Create React App Sample",

short_name이나 name은 반드시 작성되어야 하고, 두 항목 모두가 작성된 경우

short_name은 사용자의 홈화면, 런처 등에서 사용되고, name이 너무 길어서 표시할 수 없는 영역에서 이름을 나타내게 된다. (<title>태그와 같은 이름으로 반복하지 말 것)
name은 앱이 설치되었을 때 사용된다.

"icons": [
    {
      "src": "favicon.ico",
      "sizes": "64x64 32x32 24x24 16x16",
      "type": "image/x-icon"
    },
    {
      "src": "logo192.png",
      "type": "image/png",
      "sizes": "192x192"
    },
    {
      "src": "logo512.png",
      "type": "image/png",
      "sizes": "512x512"
    }
  ],

사용자가 PWA를 설치하면, 사용자의 홈화면, 앱런처 등에서 표시될 아이콘들을 지정할 수 있다. 각 icon object는 src, sizes, type을 포함한다.

"start_url": ".",

start_url은 애플리케이션이 실행되면 시작될 위치이다. 사용자가 app을 열면 무엇을 하고 싶을지 예상하고 그 위치로 지정하여야 한다.

"display": "standalone",

app이 실행되면 보여질 브라우저 UI를 커스터마이징 할 수 있다. (value에 넣을 수 있는 속성들 (opens new window))

"theme_color": "#000000",

task switcher에 반영될 툴 바의 색상을 지정한다. head의 meta theme color와 일치 시켜야 한다.

"background_color": "#ffffff"

모바일에서 앱이 실행될 때의 Splash screens (opens new window)에 사용되는 배경색이다.

# reference

← 22-07-07 22-07-14 →