JavaScript로 PWA 만들기 - 캐시 업데이트 반영하기

개요

함께 제공되는 CLI 도구를 통해 간편히 Progressive Web App(이하 PWA)를 만들 수 있는 Angular와 달리 별도의 라이브러리 및 프레임워크를 사용하지 않은 채 구글의 개발자 가이드에 따라 JavaScript를 이용하여 PWA를 개발하였습니다.

PWA의 핵심 기능 중 하나인 캐시(Cache)를 적용한 후, 서버에서 수정한 내용이 Angular에서와 달리 브라우저의 새로고침 버튼을 아무리 눌러도 새로운 내용으로 반영되지 않아 이를 해결하기 위하여 관련 내용을 학습하였으며 이를 정리하였습니다.

서비스워커와 캐시

PWA에 서비스워커가 구성되어 있는 경우, 서비스 워커는 레이지 로딩(lazy loading)이나 프리패치(prefetching) 같은 방식을 이용하여 정적 파일을 캐싱합니다. 이렇게 되면 네트워크에 캐싱된 정적 파일을 요청할 필요가 없으므로 성능상 이점을 갖게 됩니다.

const cacheName = 'v1';

self.addEventListener('install', function(event) {
  event.waitUntil(
    caches.open(cacheName).then(function(cache) {
      return cache.addAll(
        [
          '/css/bootstrap.css',
          '/css/main.css',
          '/js/bootstrap.min.js',
          '/js/jquery.min.js',
          '/offline.html'
        ]
      );
    })
  );
});

설치(install) 이벤트에서 정적파일 초기캐싱

서비스워커를 등록하면 설치(install) 이벤트가 발생하며 위에 작성한 것과 같이 초기캐싱을 진행한 후, 개발자가 구현한 캐싱기법에 따라 앱의 네트워크 요청(fetch) 이벤트를 처리합니다.

self.addEventListener('fetch', function(event) {
  event.respondWith(
    caches.match(event.request).then(function(response) {
      return response || fetch(event.request);
    })
  );
});

Cache falling back to the network 기법으로 네트워크 요청(fetch) 이벤트 처리

캐시에서 파일을 제공하는 기법은 이 외에도 다음과 같은 것들이 있습니다.

• Network falling back to cache
• Cache then network

캐시 업데이트 반영하기

서비스 워커가 정적 파일을 캐싱한 후에 만약 서버에 새로운 파일을 추가하거나 삭제하거나 수정한다면 어떤일이 발생할까요?

현재 작성된 서비스워커는 네트워크 요청(fetch) 이벤트에 대해서 항상 캐시파일에서 우선 데이터를 불러오기 때문에 새로운 버전이 서버에 배포되더라도 절대로 사용하지 않게 됩니다.

개요에서 언급한 제가 겪었던 상황입니다.

캐시가 아닌 서버에 배포된 새로운 파일들을 PWA에 표시하려면 서비스워커를 교체하도록 합니다. 교체라는 것은 이전 서비스워커와 다른 내용이 필요하다는 것입니다. 하지만 서비스워커의 기능이 매번 달라지는 것도 아니기 때문에 단지 새로운 캐시를 이전과 다른 이름으로 변경하도록 합니다.

다음과 같이 앞서 서비스워커에서 사용하였던 cacheName의 값을 v1에서 v2로 수정합니다.

const cacheName = 'v2';

이와 더불어 v1라는 이름의 캐시는 더 이상 사용하지 않을 것이므로 (새로운 서비스워커가 활성화(activate 되면) 삭제합니다.

self.addEventListener("activate", event => {
  // delete any unexpected caches
  event.waitUntil(
    caches.keys().then((keys) => {
        return Promise.all(
            keys.filter(key => {
                return key === 'v1';
            }).map((key) => {
                return caches.delete(key);
            })
        );
    })
  );
});

기존 캐시(v1) 삭제

Precache - Workbox 라이브러리

제가 만들고 있는 PWA의 경우는 캐싱할 것 자체가 몇 가지 없는 간단한 앱이기 때문에 앞서 소개한 것과 같이 서비스워커를 교체함으로써 매번 모두 새로 캐싱을 하는 것도 좋은 전략이 되겠지만 복잡하고 덩치가 큰 PWA를 개발한다면 구글에서 작성한 Workbox 라이브러리의 precache를 사용하거나 이에 준하는 전략을 사용하는 것이 일반적입니다. precache를 사용하면 앱의 로딩 시 각 파일별로 해시 문자열이 관리되고 이를 바탕으로 어떤 파일이 서버에서 새로 갱신되었는지 판단하여 다음 세션 또는 사용자가 새로고침을 하였을 때 이것들만 반영하여 새로운 콘텐츠를 표시할 수 있게 됩니다.

출처

• Stack Overflow - When and how does a PWA update itself?
• 서비스워커 수명 주기
• Service worker를 사용해 PWA를 오프라인에서 동작하게 만들기