인프런 커뮤니티 질문&답변

작성한 질문수

PWA 시작하기 - 웹 기술로 앱을 만들자

서비스워커의 코드가 바뀌지 않은 상태에서 업데이트는 불가능한가요?

해결된 질문

작성

·

738

1

안녕하세요. 오프라인에서도 볼 수 있는 대학교 학식 앱을 만들고 있습니다.

학식 API의 정보가 주마다 업데이트되어 주마다 캐시 이름을 API_0, API_1 형식으로 버전관리를 설계했습니다.

workbox 도구에서 정해진 날짜마다 캐시를 갱신하는 기능이 없어 직접 만들었습니다.

const getCacheVersion = () =>
  `api_${(() => {
    const DATE = new Date()
    const weekday = Math.floor(DATE.getDate() / 7)
    return weekday === 1 && DATE.getHours() < 10 ? weekday - 1 : weekday
  })()}`

const API_URL = 'https://meals-data.muhun.kim';

self.addEventListener('install', evt => {
  evt.waitUntil(
    caches
      .open(getCacheVersion())
      .then(cache => cache.add(API_URL))
      .catch(evt => console.log(evt))
  )
})

많이 생략되어 있습니다. 서비스 워커 전문 첨부합니다.

그러나 서비스워커를 수동으로 업데이트하지 않으면 새로운 버전이 주입되지 않고 있습니다. (영상 참조)

서비스 워커는 브라우저에 이미 있는 것과 바이트 하나만 달라도 업데이트된 것으로 간주됩니다. (이를 확장하여 가져온 스크립트/모듈도 포함할 것입니다)

서비스워커 수명 주기 - 업데이트 | Google Developers

위 문서를 참조해보니 서비스 워커의 스크립트가 그대로여서 새로운 서비스워커가 생기지 않은 걸로 해석이 되었습니다.

위의 해석이 문제의 원인이 맞을까요?
서비스 워커로 외부 데이터 정보를 버전 관리하기에는 무리이고, 애플리케이션 로직에서 캐싱을 설계해야 될까요?

vuejs 웹앱 pwa

답변 4

1

질문자

안녕하세요! 오랜만입니다.

로컬 빌드 환경(localhost)에서 임의로 시간을 바꾸었을 때 캐시 버전이 잘 바뀌고 있는데, 원격 환경에서(bob.muhun.kim) 캐시가 바뀌지 않은 문제를 발견했습니다.

혹시나 비슷한 오류를 겪으신 적이 있으셨는지 선생님의 의견이 필요해서 오랜만에 여쭤봅니다.

문제에 대한 시행착오는 제가 질문 드린 내용과 스스로 답변한 내용을 참고 부탁드립니다.🙇

1

질문자

조금 늦어도 답글 달아주셔서 감사해요! 애플리케이션은 이미 공개해둔 상태입니다. :D

프로젝트 초반에 Workbox 도입을 고민했으나, 상대적인 텀을 두고 업데이트 하는 기능이 요구 사항과 맞지 않아 직접 만들었습니다.

그 대신에 나머지 정적 에셋을 맡길까도 고민해봤는데, 이건 규모가 더 커지면 고려해보겠습니다.

1

질문자

install 이벤트에서 초기 버전을 설정하고, fetch에서 버전을 갱신하는 걸로 해결했습니다.

고친 부분을 링크로 첨부합니다.

0

장기효(캡틴판교)

지식공유자

안녕하세요 무훈님, 제가 답변이 조금 늦었네요 ㅜㅜ 잘 해결하신 것 같아 다행입니다. 그리고 직접 서비스워커를 생성하시는 것으로 보이는데 아래 라이브러리도 써보시면 좀 더 서비스워커 갱신이나 캐싱 관리하시기 편할 것 같습니다 :)

Workbox 라이브러리

수강해 주셔서 감사하고 좋은 애플리케이션 기대됩니다. 혹시 만드시면 저도 한번 공유 부탁드릴게요 :)

작성한 질문수