TIL / 20210826

📌오늘한 일

PWA, 서비스워크 공부

지난번에도 pwa와 서비스 워커에 대해 기록한 적이 있지만 구체적인 동작과정은 기록하지 못한것 같아 추가적으로 기록해본다.

ServiceWorker
서비스 워커는 브라우저가 백그라운드에서 실행하는 스크립트이며, 클라이언트에 설치되는 프록시다.그래서 브라우저의 백그라운드에서 네트워크를 가로채는게 가능하다.

이를 이용해서 웹 캐싱 뿐만 아니라 백그라운드 동기화, 웹 푸쉬, 네트워크 불안정한 경우 처리 등의 기능을 할 수 있다.

웹 캐싱은 CacheStorage를 사용한다. Sqlite 같은 클라이언트 데이터베이스인데, Key:value 로 구성된 데이터베이스이다.

이 서비스워커의 동기화 기능을 프로젝트에 적용시켜 버전이 업데이트 됐을때를 처리해주었다.

세팅

public폴더에 index.html파일에 서비스 워커를 불러오는 파트를 추가해줬다.

<script>
// navigator (브라우저)에 serviceWorker 기능이 있는지 확인
if ('serviceWorker' in navigator) {
  // 서비스워커 설치시 DOM 블로킹을 막아준다.
  window.addEventListener('load', function () {
    // 서비스워커를 register 하면 promise를 반환한다.
    navigator.serviceWorker
      .register('/sw.js')
      .then(() => {
        console.log('서비스 워커가 등록되었다.');
      })
      .catch((error) => {
        console.log(error);
      });
  });
}
</script>

그리고 이렇게 이전 캐싱을 지우는 작업을 해줬다.

self.addEventListener('activate', event => {
    let cacheWhitelist = ['ohsool1'];
    event.waitUntil(
        caches.keys().then(cacheNames => {
            return Promise.all(
                cacheNames.map(cacheName => {
                    if (cacheWhitelist.indexOf(cacheName) === -1) {
                        return caches.delete(cacheName);
                    }
                })
            );
        })
    );
});

현재 페이지를 캐싱시 전체 페이지들을 다 캐싱하기 때문에 캐시를 지우거나, 강제 새로고침을 하지 않으면 안되는 이슈가 있었다.

캐시스토리지네임 이름이 바뀔 때마다 이전에 캐싱된 부분이 다 지워지게 돼서 새로 업데이트 된 뿐이 강제 새로고침을 하지 않더라도 되도록 했다.그 결과 업데이트 된 캐시 스토리지만 남아 있고 이전 캐싱 파일들이 삭제되면서 정상적으로 작동했다.

📌참고 자료

PWA 서비스워커 https://gracefullight.dev/2017/12/22/PWA-ServiceWorker-Web-Caching/