PWA 시작하기 3편 - 데모띄우기

안녕하세요 자유로이 입니다.

오늘은 PWA를 시작하기에 앞서 예제를 띄우고 간단하게 코드를 알아보도록 하겠습니다.

 

먼저 쉽고 간단하게 로컬 웹 서버 구축하기위해 구글 크롬 확장프로그램을 설치해줍니다.

 

chrome.google.com/webstore/detail/web-server-for-chrome/ofhbbkphhbklhfoeikjpcbhemlocgigb?hl=ko

Web Server for Chrome

 

 

설치가 완료된 Web Server for Chrome 크롬확장프로그램을 실행 시켜 줍니다.

 

1번에서는 데모를 실행시킬 폴더경로를 설정해줍니다.

2번에 체크하고 해당 Web Server URL로 접속합니다. 

 

PWA 예제

출처 : https://github.com/goldenthumb/pwa-examples

예제는 깃허브에 만들어놓은 샘플을 사용했습니다.

 

index.html 파일을 보면

<script>
    if ('serviceWorker' in navigator) {
      navigator.serviceWorker.register('service-worker.js')
        .then(function(success) {
          console.log('[Service Worker 등록 완료]', success);
        })
        .catch(function(error) {
          console.log('[Service Worker 등록 실패]', error);
        });
    }
  </script>

navigator.serviceWorker.register이 부분이 service worker를 등록하는 코드입니다.

등록하고 완료인지 실패인지 콘솔에 출력합니다.

service-worker.js를 보면

self.addEventListener('install', function(event) {
  console.log('Service Worker] Install');
  event.waitUntil(
    caches.open(CACHE_NAME)
      .then(function(cache) {
        return cache.addAll(filesToCache);
      })
      .catch(function(error) {
        return console.log(error);
      })
  );
});

 

service worker를 설치하고 실제로 캐싱합니다.

self.addEventListener('fetch', function(event) {
  console.log('[Service Worker] Fetch');
  event.respondWith(
    caches.match(event.request)
      .then(function(response) {
        return response || fetch(event.request);
      })
      .catch(function(error) {
        return console.log(error);
      })
  );
});

 

service worker는 가능한 경우 캐시로부터 컨텐츠를 패치하여 오프라인 기능을 제공합니다.

self.addEventListener('activate', function(event) {
  var newCacheList = ['pwa-example-basic'];

  event.waitUntil(
    caches.keys().then(function(cacheList) {
      return Promise.all(
        cacheList.map(function(cacheName) {
          if (newCacheList.indexOf(cacheName) === -1) {
            return caches.delete(cacheName);
          }
        })
      )
    }).catch(function(error) {
      return console.log(error);
    })
  );
});

‘activate’이벤트는 브라우저의 새로운 탭 또는 아예 브라우저를 재시작하여

해당 페이지를 재방문 했을 때 서비스 워커가 다시 설치되고 나서 호출되고 이전 캐시를 제거합니다.