시작하며
안녕하세요, 껌딱지 팀에서 프론트엔드 파트를 담당하고 있는 주민규입니다.
오늘은 PWA 만드는 법에 대해 소개하려고 합니다.
PWA가 무엇인지, 그리고 어떤 장점이 있는지에 대한 자세한 정보는
https://ggumttakji.tistory.com/9에서 확인하실 수 있습니다!
PWA 만들기 전 주의사항
pwa를 만들기 위해서는 ssl 인증을 받은 url이 필요합니다.
https로 시작하는 url을 꼭 준비해 주세요!
manifest 파일을 미리 만들어두어도 좋습니다!
PWA 만들기
1. pwabuilder 페이지에서 url을 입력한 후 start 버튼을 클릭합니다.
클릭하면 잠깐의 로딩 후 어떤 부분을 추가로 채워야 하는지 알려줍니다.
2. manifest 채우기
필수로 채워야 하는 옵션들을 채워 주고, 추가로 설정하고 싶은 옵션들도 추가해 주면 됩니다.
옵션들을 설정한 후에 우측 하단에 'Download Manifest'를 클릭하면 manifest.json 파일이 다운됩니다.
3. manifest 파일 수정하기
manifest.json을 확인해 보면 icons가 설정이 안 되어 있을 수 있습니다.
이 경우 직접 추가해 주면 됩니다.
슬축생의 경우 하나의 사이즈만 사용할 것이기 때문에 하나만 추가해 주었습니다.
"icons": [
{
"src": "/img/logo.png",
"sizes": "512x512",
"type": "image/png",
"purpose": "any"
}
]
4. manifest 연결하기
html의 <head></head> 부분 안에 link 태그로 연결해 줍니다.
// 파일 경로는 맞추어서 설정하면 됩니다.
<link rel="manifest" href="manifest.json"/>
5. 다시 START
위 과정을 모두 했다면 다시 처음으로 돌아가 start 버튼을 클릭해 주세요.
잘못된 부분이 없다면 이렇게 화면이 뜰 텐데
우측에 Package For Stores를 누르고 OS 별로 다운로드하면 됩니다!
참고사항
안드로이드의 경우 다운로드한 파일 안에 실행 파일이 있지만 ios는 없습니다.
ios의 경우 xcode를 이용해서 실행파일을 만들어야 하는 것 같습니다.
안드로이드는 실행파일(apk)을 바로 실행시키면 되고,
ios의 경우에는 pwa를 만들고자 하는 웹페이지에 들어가서
공유하기 버튼 클릭 > 홈 화면에 추가 > 완료를 하면,
홈 화면에 앱 아이콘이 생기게 됩니다.
'우리들의 성장일지' 카테고리의 다른 글
| 고객과의 신뢰도를 높이기 위한 방법. (0) | 2024.08.13 |
|---|---|
| [팀 껌딱지] 우리 팀은 티켓 주도 개발을 이렇게 사용해요! (0) | 2024.08.01 |
| [팀 껌딱지] 서비스 블루프린트(Service Blueprint)란? (0) | 2024.07.09 |
| [팀 껌딱지] 운영 DB에 변경 쿼리 날릴 땐 꼭 트랜잭션을 사용해 줘요 (0) | 2024.04.29 |
| [팀껌딱지] 당신의 고객은 누구인가? (0) | 2024.03.26 |
