웹 캐시를 지우고 리로딩하기..

SPA를 개발하다 보면, 앱의 버전을 올려서 서버에 반영을 했는데, 웹은 캐시를 타버려서 업데이트가 되지 않는 경우가 빈번합니다. 웹 서버와 웹 어플리케이션의 버전이 맞지 않아서 이상하게 동작도 하고.. 대략적으로 난감한 경우가 발생해서, 캐시를 지우고 리로드 하는 코드를 간단하게 만들어 봤습니다.

caches  
    .keys()  
    .then(c => {  
    for (const i of c) {  
        caches.delete(i);  
    }  
}).then(() => {  
    location.reload(true);  
});

그리고 아래는 axios를 이용해서 버전을 확인하고 업데이트를 진행하는 코드 입니다.

import * as axios from 'axios' 

console.log('current version :', version);  
// 버전업이 되었으면 버전을 올리도록 처리  
if (process.env.NODE_ENV === 'production') {  
  console.log('version update check...');  
  axios.get(`/version.json?timestamp=${new Date().getTime()}`).then((data: any) => {  
    console.log('server version :', data.data);  
    if (data.data.app > version.app) {  
      // 캐쉬 지우기  
      caches  
        .keys()  
        .then(c => {  
          for (const i of c) {  
            caches.delete(i);  
          }  
        })  
        .then(() => {  
          location.reload(true);  
        });  
      console.log('update app...');  
    }  
  });  
}

​