Service worker를 간단하게 사용해자

저번 면접을 통해 PWA의 존재에 대해 알게 되었었다.

PWA를 간단하게 말해보자면, PWA는 앱과 웹의 장점들만 합친걸로 html,css,js등을 클라이언트 캐시에 저장해둬 앱처럼 사용할 수 있도록 하는 것이다.

PWA의 장점은 정말 앱처럼 사용할 수 있다. Twitter.com 또한 PWA로 생성하여 들어가보시면 알겠지만 아래 그림처럼 연결 프로그램을 선택할 수 있고,

이걸 선택하게 된다면

위와 같이 앱처럼 튀어나오는 것을 볼 수 있다.

두번째 장점은 네트워크가 느린 환경이나 오프라인에서 사용할 수 있다. 그 이유는 캐싱된 정보를 가져와 보여주기만 하기 때문!

세번째 장점은 서버에서 원할 때 정보를 보낼 수 있다. 이로 인해, 앱처럼 push나 notification을 보낼 수 있다. 내가 웹에서 알림을 주기적으로 받기 위해서는 1분에 한번씩 알림이 있나 확인을 해, 있을 경우 새로 그리는 형식을 사용했다. 그 이유는 웹에서는 request가 없으면 respond를 받지 못하기 때문이다. 하지만, pwa를 사용하면 서버에서 원할때 받을 수 있으니 request없는 respond를 받을 수 있다.

자, 그래서 적재적소에 사용하면 편한 PWA를 사용하기 위해서는 Service Worker를 사용할 필요가 있다.

이에 대한 자세한 내용들은 아래 사이트 들어가서 보시면 된다.
https://developer.mozilla.org/ko/docs/Web/Progressive_web_apps/Offline_Service_workers

Service Worker를 사용하기 위해 테스트 앱을 git에서 받아 해봤는데 그 내용은 아래 사이트에 있다.
https://developers.google.com/web/fundamentals/codelabs/offline?hl=ko

자, 난 내 사이트에 적용해보고 싶다. 사실, 지금 동기 2명과 진행하고 있는 프로젝트가 있는데 이게 타겟 사용자들이 언제든 보기 원하기에 PWA를 사용하면 더 이득이 되겠다 판단했다.

하지만, 무지성으로 다른 사람들과 하는 프로젝트를 건드릴 수 없으니 내 포토폴리오 사이트를 건들여보았다ㅎㅎ

Service Worker

1. service worker Reigster하기!
   자, 먼저 내 Service Worker를 Reigister 해야한다.
   src/App.js에 Register하는 코드를 넣어보자.

 // src.App.js
  if('serviceWorker' in navigator) {
    navigator.serviceWorker.register('/sw.js').then(function(registration) {
      console.log('ServiceWorker registration successful with scope: ', registration.active);
    });
  };

이렇게 되면, {url}/sw.js에 service worker가 등록된다.

사실 난 이부분에서 Service Worker registration error: Unsupported MIME type ('text/html') 라는 에러가 떴고, 해당 부분을 해결하기 위해 index.html코드 안 바디 가장 뒷부분에 아래 코드를 넣었다.

// public/index.html
<script> 
      if ('serviceWorker' in navigator) {
        window.addEventListener('sw-cached-site.js', function() {
          navigator.serviceWorker.register('sw.js', {
            scope: '/',
          });
        });
      } 
      window.process = { env: { NODE_ENV: 'production' } };
 </script>  

안 뜨시는 분들은 안넣어도 될듯합니다.

2. Service Worker Install 하기
   그 후, 난 간단히 하기 위해, /public 폴더 안에 sw.js 파일을 생성 후, service worker를 install하도록 했다.

/public/sw.js
self.addEventListener('install', function(e) {
 console.log('[Service Worker] Install');
 e.waitUntil(
   caches.open('danbi').then(function(cache) {
     return cache.addAll([
       '/',
       '/index.html',
       '/src/'
     ]);
   })
 );
});

3. Service Worker에 Fetch하기
   서비스 워커가 페이지를 제어하고 나면 페이지에서 이루어지는 모든 요청을 각각 가로채어 그 요청으로 무엇을 할지 결정하도록 하기 위해 fetch 이벤트를 설정해준다.
   이 또한, sw.js 파일에 install 위에 넣었다.

self.addEventListener('fetch', function(e) {
  e.respondWith(
    caches.match(e.request).then(function(r) {
          console.log('[Service Worker] Fetching resource: '+e.request.url);
      return r || fetch(e.request).then(function(response) {
                return caches.open('danbi').then(function(cache) {
          console.log('[Service Worker] Caching new resource: '+e.request.url);
          cache.put(e.request, response.clone());
          return response;
        });
      });
    })
  );
});

이렇게 하고 yarn start를 진행해보았다.
localhost:3000에 들어간 후, 개발자 도구에 들어가 Application에 가면 왼쪽에 service workers라는 탭이 있고 내가 만든 sw.js가 잘 동작하고 있음을 알 수 있다.

PWA가 잘 동작하는 지 보기 위해, 오프라인 상태로 만들어보자.

이렇게 오프라인 버튼을 눌렀지만, 내 포토폴리오 웹사이트가 제대로 나오는 것을 확인할 수 있다! 멋져!

좀 전에 말했던 트위터처럼

앱같이 사용가능하다.