Pwa Web App Manifest / manifest error of react

Manifest Error

React CRA 프로젝트 초기 세팅 후 Manifest Error가 발생하게 되었다.

Manifest: Line: 1, column: 1, Syntax error.

해결방법

 

CRA 생성 후 manifest.json 파일을 지웠다면 index.html 내에 해당 link rel~~ 이 부분을 주석처리해주면 에러가 사라진다.

manifest.json

하지만 manifest.json 파일이 뭔지 궁금해서 검색해보았다.

CRA로 React 프로젝트를 생성하면 public 폴더에 다음과 같이 파일들이 생성된다.

\

그 중에 manifest.json도 생성되는데 manifest.json는 브라우저에 프로그레시브 웹 앱(PWA) 및 사용자의 데스크톱 또는 모바일 장치에 설치될 때 작동해야 하는 방식에 대해 알려주는 JSON 파일이다. 앱 이름, 앱에서 사용해야 하는 아이콘, 앱이 시작될 때 열어야 하는 URL이 포함된다.

 

- manifest.json 파일

{
  "name": "HackerWeb",
  "short_name": "HackerWeb",
  "start_url": ".",
  "display": "standalone",
  "background_color": "#fff",
  "description": "A simply readable Hacker News app.",
  "icons": [{
    "src": "images/touch/homescreen48.png",
    "sizes": "48x48",
    "type": "image/png"
  }, {
    "src": "images/touch/homescreen72.png",
    "sizes": "72x72",
    "type": "image/png"
  }, {
    "src": "images/touch/homescreen96.png",
    "sizes": "96x96",
    "type": "image/png"
  }, {
    "src": "images/touch/homescreen144.png",
    "sizes": "144x144",
    "type": "image/png"
  }, {
    "src": "images/touch/homescreen168.png",
    "sizes": "168x168",
    "type": "image/png"
  }, {
    "src": "images/touch/homescreen192.png",
    "sizes": "192x192",
    "type": "image/png"
  }],
  "related_applications": [{
    "platform": "play",
    "url": "https://play.google.com/store/apps/details?id=cheeaun.hackerweb"
  }]
}

• short_name: 사용자 홈 화면에서 아이콘 이름으로 사용
• name: 웹앱 설치 배너에 사용
• icons: PWA를 설치할 때 브라우저가 홈 화면, 앱 실행기, 작업 전환기, 시작 화면 등에서 사용할 아이콘 세트를 정의할 수 있다.
• start_url: 웹앱 실행시 시작되어야 하는 위치를 브라우저에 알리고 사용자가 홈 화면에 앱을 추가할 때 있었던 페이지에서 앱이 시작되지 않도록 한다.
• display: 디스플레이 유형(fullscreen, standalone, browser 중 설정)
  • fullscreen 
    • 브라우저 UI 없이 웹 애플리케이션을 열고 사용 가능한 표시 영역 전체를 차지합니다.
  • standalone
    • 독립 실행형 앱처럼 보이고 느껴지도록 웹 앱을 엽니다. 앱은 브라우저와 별도의 자체 창에서 실행되며 URL 표시줄과 같은 표준 브라우저 UI 요소를 숨깁니다.
  • minimal-ui
    • 이 모드는 와 유사 standalone하지만 탐색을 제어하기 위한 최소한의 UI 요소 집합을 사용자에게 제공합니다(예: 뒤로 및 다시 로드).

      

  •  browser
    • 표준 브라우저 경험
• theme_color: 상단 툴바의 색상
• background_color: 스플래시 화면 배경 색상
• orientation: 특정 방향을 강제로 지정(landscape, portrait 중 설정)

 

리뷰

평소 pwa에 대하여 관심이 있었는데 에러가 발생 한 부분이 pwa에 필수적인 요소였다는게 신기하다. 추후에 리액트로 만든 프로젝트를 pwa 웹앱으로 배포한다면 service worker에 대해서도 공부 해야봐야겠다.

 

 

참고:

https://developer.mozilla.org/ko/docs/Web/Manifest

Web app manifests | MDN

https://web.dev/add-manifest/

Add a web app manifest

https://altenull.github.io/2018/03/09/%EC%9B%B9%EC%95%B1-%EB%A7%A4%EB%8B%88%ED%8E%98%EC%8A%A4%ED%8A%B8-%EC%84%9C%EB%B9%84%EC%8A%A4%EC%9B%8C%EC%BB%A4-Web-App-Manifest-Service-Worker/

웹앱 매니페스트 & 서비스워커(Web App Manifest & Service Worker)