[FE] Web API - Client-side storage : Service Worker API & Cache

Service Worker API & Cache

Web API - Service Worker API & Cache

Service Worker 와 Cache 를 활용하면 인터넷 연결이 끊겨도 동작하는 앱을 만들 수 있습니다.

Service Worker 는 브라우저에 등록되어, 브라우저와 네트워크 사이에서 프록시 서버의 역할을 수행합니다. 즉, Service Worker 는 서버인 것처럼 브라우저가 서버에게 보내는 요청에 응답할 수 있습니다.

Cache 는 브라우저의 Request 와 서버의 Response 를 저장할 수 있습니다.

오프라인에서 동작하는 앱을 만들려면, 먼저 Service Worker 를 등록합니다. 그리고 인터넷이 연결되어 있는 동안, 브라우저가 보내는 Request 와 Response 를 Cache 에 저장합니다. 그리고 인터넷 연결이 끊기게 되면, Service Worker 는 서버의 역할을 대신하여 인터넷이 연결된 것처럼 Cache 에 저장된 데이터를 바탕으로 마치 인터넷이 연결되어 있는 것처럼 브라우저의 요청에 응답합니다.

Service Worker 는 아래와 같이 등록할 수 있습니다.

// 일반적인 js 파일에서 Service Worker 를 등록합니다.
if('serviceWorker' in navigator) {
  navigator.serviceWorker
    .register('/relativePath/sw.js')
    .then(() => { console.log('Service Worker 등록 완료'); });
  }

Service Worker 는 브라우저의 요청을 가로채고 서버를 대신하여 응답할 수 있기 때문에 보안에 치명적입니다. 따라서 Service Worker 를 등록하려면 반드시 HTTPS 프로토콜로 접근해야 하고 Origin 이 다르면 등록할 수 없습니다. 그리고 Service Worker 는 실행 컨텍스트가 아닌 독립된 컨텍스트에서 실행되므로 스레드도 다르고 DOM 에 접근할 수 없습니다.

Service Worker 를 정의한 js 파일 내에서 self 키워드로 Service Worker 가 될 객체에 아래와 접근할 수 있습니다.

// /relativePath/sw.js 파일

// Service Worker 가 등록될 때 install 이벤트가 발생한다.
self.addEventListener('install', function(e) {

});

// 브라우저가 서버로 요청을 보내면 Service Worker 는 fetch 이벤트를 구독해서 요청에 접근할 수 있다.
self.addEventListener('fetch', function(e) {
  e.respondWith(
    // Cache 된 응답이 있는지 확인하고 응답이 없으면 서버로 요청을 전달한다.
    caches.match(e.request).then(function(response) {
      return response || fetch(e.request);
    })
  );
});

참고

Offline asset storage
Service Worker API
Cache