[React] 사파리 '홈 화면에 추가' 시 앱 이름 변경하기

개발한 웹페이지를 모바일에서 사용하기 위해 여러가지 설정들을 해주어야 한다.

 

그 여러가지 설정 중에 하나를 오늘 기록하려 한다.

 

바로 '홈 화면에 추가' 기능이다.

 

PC라고 생각했을 때 바로가기 기능과 같다.

 

다만 모바일에서 '홈 화면에 추가'를 해두면, 웹이 앱처럼 동작하게 만들어 준다.

 

---

 

우선 아무 설정을 하지 않았을 때는 React App이라는 Default 설정 값으로 바로가기 이름이 생성된다.

 

 

나는 이 React App을 서비스 이름으로 변경하고 싶었다.

---

 

홈화면에 추가 (바로가기 기능)에서 참조하는 파일이 바로 

 

manifest.json 파일이다.

 

최초 리액트 세팅시 create-react-app 명령어를 통해서 public 폴더에 manifest.json 파일이 생성된다.

 

manifest.json 

웹앱 매니패스트 파일은 앱에 대한 정보를 담고 있는 json 파일이다. 

 

{
  "short_name": "TrackDay",
  "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"
}

 

[Key 별 설정 내용]

• short_name : 사용자 홈 화면에서 아이콘 이름으로 사용
• name : 웹앱 설치 배너에 사용
• icons : 홈 화면에 추가할때 사용할 이미지
• start_url : 웹앱 실행시 시작되는 URL 주소
• display : 디스플레이 유형(fullscreen, standalone, browser 중 설정)
• theme_color : 상단 툴바의 색상
• background_color : 스플래시 화면 배경 색상
• orientation : 특정 방향을 강제로 지정(landscape, portrait 중 설정)

 

-> 결론적으로 맨 첫번째 줄의 short_name 값을 원하는 서비스 명으로 변경해주면 바로 완성이다.

 

다음과 같이 서비스명이 자동으로 변경 되었다