PWA png icon 문제 해결 성공, 웹앱 성공기

비전공자 취미 생활, 웹을 앱으로 만들기 성공기

Your app is missing a 512x512 or larger PNG icon

위 메시지 뿜으며 PWA 안 되는 것이다.

분명 드림코딩 엘리님 유튜브 영상을 보면 한방에 순조롭게 문제없이 진행이 되었는데

이건 뭐 준비를 안 해서가 아니다. 홈시 참고하시라고 동영상 링크 남깁니다.

일단 이 동영상 한번 보시고 글을 보셔야 더 이해가 빠르실 겁니다. 

https://youtu.be/FEBkne7Nyu4

이미지를 몇 번을 수정하고 몇 번을 업로드하고 변환되는 시간을 기다렸는데

나중에 파일을 다운로드하니 이미지 파일이 한 개 밖에 없는 것이다.

그것도 점수는 160인데 이미지 521*512 이미지나 더 큰 이미지가 없어서 안된다고 한다.

이 거참...

문제가 되는 팝업 캡처를 안 해뒀네... 이런... 그래도 해결했으니 속 시원하고

이 글을 보는 사람들에게 조금 이남아 도움이 되었으면 한다.

---

*동영상을 보면 아래 코드를 index.html 파일에 헤드부 안 상단에 입력했습니다. 

이 json파일이 아이콘 파일에 정보를 담고 있습니다. 

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

*아래 코드를 index.html 파일에 헤드부 안 하단에 입력했습니다. 

<script type="module">
      import "https://cdn.jsdelivr.net/npm/@pwabuilder/pwaupdate";
      const el = document.createElement("pwa-update");
      document.body.appendChild(el);
    </script>

그런데 그 수많은 여러 사이즈 내가 봐도 한 30개 정도 되는 png 이미지 파일을 어떨게 할 것인가

웹을 앱으로 변환하는 일은 안드로이드 아이콘 만드는 게 일인 것 같다.

반응형

하지만 바로바로 갓 구글 신에 검색을 하니 바로 나온다. ㅜㅏ 역시

***아래 사진 한번 봐주세요. 이상하게 PWA에서는 버튼을 확실하게 표시를 안 해주네요.

512*512픽셀 보다 큰 png 파일로 작업을 해라고 한다. 링크 아래 있습니다.

https://www.pwabuilder.com/imageGenerator

자 여기 이미지를 만들었고 jcon 파일도 받았을 겁니다.

기존 PWA 빌드할 때 받음 manifest.json파일에 icons.json 파일에 "icons"부분을 입력해 주시면 됩니다.

알고 나면 별거 아닌데 한번 해보고 안 해보고 차이인 것 같습니다.

---

부디 성공 하실 빕니다. 도움이 되셨다면 아래 하트 한번 눌러 주세요.🤩

참 제가 작업한 홈페이지도 올려보겠습니다.

잘은 못하지만 취미다 보니 미션을 하나하나 통과할 때마다 기분이 좋습니다. 

https://nlink.kr/

https://nlink.kr

검색창이 많으면 즐겨 사용해주셨으면 하지만 압니다. 잘 사용 안 할 거라는 것을

그래도 조금씩 취미로 발전시켜 보겠습니다. 

아자자자자 미션 클리어