홈 화면에 설치된 PWA 자동 업데이트 시키기

문제상황

pwa로 개발 중 이미 홈 화면에 추가한 이후 앱을 다시 배포했을 때 업데이트된 내용이 반영되지 않아 삭제 후 다시 설치해야 하는 문제가 있었다.

원인

service-worker에 변경사항이 생겨야 업데이트가 반영될 수 있다.

service-worker

service-worker는 브라우저 밖에 위치하여 네트워크가 없는 상황에서도 사용할 수 있다. (브라우저에 캐시된 리소스 전달 가능)

*활용

• 데이터 캐싱 : 인터넷 연결 없이도 캐시된 정보를 보여줄 수 있다.
• 푸시 알림 : 브라우저 창이 닫힌 상태에서도 동작하기 때문
• 백그라운드 동기화 : 채팅, 사진 전송 등 네트워크 상에서 작업 중 오프라인이 되는 경우, 다시 온라인 상태가 되었을 때 작업을 이어서 진행할 수 있다.

해결방법

• 변수를 선언하고 다시 배포할 때마다 직접 값을 바꿔주는 방식으로 service-worker가 업데이트되도록 했다.
• 임시방편의 느낌이 강해서 더 효과적으로 업데이트를 반영할 방법도 고민해봐야겠다.

참조

https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API
https://fe-developers.kakaoent.com/2022/221208-service-worker/
https://so-so.dev/web/service-worker/