PWA 및 ServiceWorker

• 페이지가 업데이트 될때마다 이전 캐시스토리지를 초기화 해줘야되는 문제들이 발생.

<script>
  if ('serviceWorker' in navigator) { //서비스워커 불러오는 파트
      window.addEventListener('load', function() {
          navigator.serviceWorker.register('./worker.js')
          .then(function(registration) {
            // console.log(registration);
          }, function(err) {
              // console.log('Worker registration failed', err);
          }).catch(function(err) {
              // console.log(err);
          });
      });
  }
</script>

이렇게 index.html파일에서 실행을 시키고 worker.js파일을 구현. 그래서 캐싱할 파일을 지정하고 오프라인일때 나오는 페이지도 캐싱목록에 넣어서 지정했다.

let CACHE_NAME = 'ohsool version-1.4'; 
//Cache Storage에 들어갈 캐시저장소 이름 추후에 .env파일의 버전코드로 맞춰서 빌드마다 업데이터 되게 만들예정
let urlsToCache = [
    '/index.html', //캐싱할 파일들
    '/offline.html' //오프라인일때 보여줄 페이지 (네트워크가 아예 끊어졌을때 새로고침하면 나오는 페이지)
];

// Install a service worker
self.addEventListener('install', event => {
    // Perform install steps
    event.waitUntil(
        caches.open(CACHE_NAME)
        .then(function(cache) {
            return cache.addAll(urlsToCache); //캐싱할파일들 전부 저장소에 저장
        })
    );
});

이렇게 캐시스토리지네임을 지정을 하고

self.addEventListener('activate', event => { //업데이트용
    let cacheWhitelist = [];   //여기에 들어간 캐시파일들이 업데이트 되는파일들
    cacheWhitelist.push(CACHE_NAME);
    event.waitUntil(
        caches.keys().then(cacheNames => {
            return Promise.all(
                cacheNames.map(cacheName => {
                    if (cacheWhitelist.indexOf(cacheName) === -1) {
                        return caches.delete(cacheName); //화이트리스트에 들어가지않은 캐싱된 파일들은 전부 삭제
                    }
                })
            );
        })
    );
});

새로 업데이트를 할때마다 현재 캐시스토리지를 제외한 나머지 캐싱된 파일들을 다 지우도록 구현
그 결과 업데이트 된 캐시 스토리지만 남아 있고 이전 캐싱 파일들이 삭제되면서 정상적으로 작동.

캐시 데이터 문제

ReactJS는 SPA로 index.html 하나의 html파일로 이루어져있는데 index.html파일이 캐싱되어 있으니 새로 배포해도 업데이트가 되지않는 문제였다. 그래서 캐싱을 할때 이전에 캐싱하던 파일과 이름이 달라져야 문제가 생기지 않으므로 index.html을 캐싱하는 것이 아니라 다른 파일들을 캐싱해줘야함