[PWA] manifest 예시 / 템플릿(JSON)

JSON 양식으로 작성된 코드입니다.

 

{
    "name" : "웹 이름",
    "short_name" : "웹 이름_축약 버전",
    "description" : "웹에 대한 설명",
    "scope" : ".",
    "start_url" : "./",
    "display" : "fullscreen",
    "orientation" : "portrait",
    "theme-color" : "#ffffff",
    "background-color" : "#ffffff",
    "icons" : [ {
        "src": "아이콘 주소",
        "sizes": "48x48",
        "type": "image/png"
    }]
}

 

적용 방법

자신의 HTML 파일에 아래의 코드 삽입

 

<link rel="manifest" href="파일의 이름">

 

적용 확인

HTML 파일 실행 - [개발자 도구] - [응용 프로그램(Application)] 메뉴

 

주의

로컬 폴더에서 HTML 파일을 더블 클릭 해 확인했을 때는 (주소창의 경로가 "C://파일이름" 처럼 되는 경우), manifest 파일을 정상적으로 읽을 수가 없었다.

 

따라서, 백엔드 프로그램을 이용해 서버를 개설한 후 그 서버에서 HTML 파일을 로드하거나, VS Code의 Live Server를 활용해서 HTML 파일을 실행하는 것을 추천한다.