1. 프로젝트 폴더로 가져오기

패키지를 다운로드하면 your_pwa.zip 파일이 다운로드된 것을 확인할 수 있는데 그 파일의 압축을 풀어줍니다. 압축을 풀면 아래와 같이 아이콘 이미지 파일이 담겨있는 폴더와 manifest.json 등의 파일들을 확인할 수 있습니다.

스크린샷 2021-08-25 오후 2.22.00.png

images 폴더와 manifest.json, pwabuilder-sw.js 파일을 프로젝트 폴더로 가져옵니다.

파일이 추가된 프로젝트 폴더

2. HTML에 manifest 추가하기

2.1 manifest 파일 확인하기

생성된 manifest.json 파일을 확인해 보니 name 이 null로 설정되어 있고, manifest options에서 작성했던 start_url 과 Orientation 이 없는 것을 확인할 수 있습니다.

{
  "dir": "auto",
  "display": "standalone",
  "name": "null",
  "short_name": "시간의 법칙",
  "lang": "ko",
  "theme_color": "none",
  "background_color": "none",
  "icons": [
    ...생략...
   ]
}

아래와 같이 수정하고 저장합니다.

{
  "dir": "auto",
  "display": "standalone",
  "name": "1만 시간의 법칙",
  "short_name": "시간의 법칙",
  "lang": "ko",
  "theme_color": "none",
  "background_color": "none",
  "start_url": "자신의 URL 또는 /index.html",
  "orientation": "portrait",
  "icons": [
    {
      ...생략...
    }
  ]
}

2.2 index.html에 manifest 추가하기

이제 html 페이지에서 manifest를 로드할 수 있도록 link 태그를 추가해 봅시다. 아래 코드를 <head></head> 안에 추가해 주세요.

<link rel="manifest" href="manifest.json" />