Vue PWA index.html 서비스 워커 캐시에서 제외하기

PWA 에서는 서비스 워커가 캐시를 해줘서 서비스 디자인 업데이트를 해도 반영하기가 힘들다. 사용자가 직접 캐시를 날리진 않기 때문이다. 그래서 어떻게든 해야하는데 방법을 찾기가 힘들었다.

여러 가지 방법을 모색하던 중 이 글을 발견했다. 글 내용에 따르면 PWA에서는 일반적으로 새로운 버전이 있을때 아래 이미지처럼 알림을 보여주고 사용자가 버튼을 누르면 캐시를 날리는 방법으로 업데이트 버전을 반영한다고 한다.

How to display a "new version available" for a Progressive Web App 글을 보면 위에서 말한 방식을 적용하는 친절한 예제가 있다.

그런데 내가 만들고 있는 토이프로젝트에 적용하기엔 맘에 안 들었다. 사용자를 귀찮게 하는 것을 최대한 하고 싶지 않았기 때문이다. 그래서 선택한 방법은 index.html을 서비스 워커 캐시 항목에서 제외해 버리는 것이다.

비효율적이긴 하지만 프로젝트 크기가 크지 않아서 체감상 초기 로딩 속도가 느리지 않으니 index.html을 캐싱하지 않는다고 해서 사용자 경험에서는 별 차이가 없을 것으로 판단했다.

아래와 같은 방법으로 index.html을 서비스 워커 캐싱 대상에서 제외시켰다.

module.exports = {
  pwa: {
    workboxOptions: {
      exclude: [
        /\.html$/,
        '/statics/ionicons-cheatsheet/',
      ],
    }
  },
}

vue.config.js에서 PWA 설정을 추가해주면 된다.

PWA에서 서비스 업데이트를 재방문한 사용자에게 반영하는 더 좋은 방법이 있을까? 궁금하다..