Java/KBO Weather

React + Spring Boot 배포하기(3) - PWA(Progressive Web App)

기록해연 2025. 6. 2. 16:32

또 시간이 남아돌아서 웹앱으로도 한번 만들어볼까 싶어서 PWA(Progressive Web App) 먼저해봐야겠다.

 

PWA를 위해 확인할 파일은 아래 네가지이다.

index.html

index.js

manifest.json

public/icons/ 폴더 내 PWA용 아이콘 파일

index.js 에  serviceWorkerRegistration 의 register() 추가,

index.html 에 manifest.json link확인.

 

{
  "short_name": "KBO날씨",
  "name": "KBO Ballpark Weather",
  "icons": [
    {
      "src": "icons/BallparkWeather.png",
      "type": "image/png",
      "sizes": "192x192"
    },
    {
      "src": "icons/BallparkWeather.png",
      "type": "image/png",
      "sizes": "512x512"
    }
  ],
  "start_url": ".",
  "display": "standalone",
  "theme_color": "#000000",
  "background_color": "#ffffff"
}

manifest.json 파일 수정

 

 

 

ㅋㅋㅋㅋㅋ.... 아무리 캐시를 지우고 해봐도

폰에서는 갑자기 기본 아이콘이 나오고, 피씨에서는 내가 설정했던 이모지가 나옴.... ㅎㅎㅎ.....

 

다시 manifest 설정

{
  "short_name": "KBO날씨",
  "name": "KBO Ballpark Weather",
  "icons": [
    {
      "src": "stadium-192x192.png",
      "type": "image/png",
      "sizes": "192x192"
    },
    {
      "src": "stadium-512x512.png",
      "type": "image/png",
      "sizes": "512x512"
    }
  ],
  "start_url": ".",
  "display": "standalone",
  "theme_color": "#000000",
  "background_color": "#ffffff"
}

크키맞춰 이미지 가져와 풀고 설정 ㅎㅎ

 

그래 ... 어디까지 가나 함 보자이

누가 이기나.....

 

무한 빌딩.....

 

는 아이콘이 오락가락하는데 왜 이러는지 알 수가 없어서 일단 귀찮아서 포기... 다음기회에 ^^....

오늘치 정성은 다 소진되셨어요 ^^..........

 

일단 포기하고 다음에 수정 ^^