Service worker with Jekyll

최근 타 사이트를 이용하다 불편한 경험을 했다. 그 당시 인터넷이 원활히 연결되지 않았던 모양이었다. 분명 브라우저는 로드되고 있다고 하는데, 사이트는 계속 흰 화면만 보여주고 있었다. 조금만 기다리면 될 것 같다는 인내심과는 달리 페이지는 전혀 로드되지 않았다. 시간만 낭비한 셈이다.

이런 환경에서 사이트를 어떻게 최적화할 수 있을까 고민했다. 아직 Working Draft 상태이긴하나 파이어폭스와 크롬에선 적용되고 있는 Service Worker는 좋은 해결책이 될 것 같았다.

Service Worker의 작동 방식은 단순하다. 사이트가 로드되면, 로드된 페이지의 파일들을 모두 caching한다. 이후 사이트가 접속 상태가 불량하거나 오프라인 상태라면, 이미 caching된 파일을 불러오는 방식이다.

이를 적용하기 위해서 Google의 Udacity 강좌¹와 Google Chrome의 예제 코드²를 참고하였다. 또한 이를 Jekyll에 어떻게 적용할 것인지에 대해선 이 글³이 도움이 되었다. 특히 Udacity 강좌를 통해 작업 과정을 대략적으로 파악할 수 있었다.

Caching을 위해 사용하던 CloudFlare에도 수정이 필요했다. Service Worker 파일은 늘 최신 상태를 유지해야만 사이트를 제대로 반영할 수 있다. 해당 파일이 caching 되어 있다면 업데이트가 반영되지 않는 치명적인 문제가 발생한다. 이를 위해 CloudFlare의 Cache Level을 by-pass로 설정해 해결했다. 다른 파일들은 자동으로 caching하고 Service Worker 파일만 네트워크에서 바로 가져오도록 한 것이다.

의외의 성과는 로드 속도였다. 원래 목적은 오프라인이나 Lie-fi 상태에서의 사이트 접근을 용이하게 하겠다는 것이었다. 하지만 Servie Worker의 작업 후 로드 속도를 약 30%나 줄일 수 있었다. Offline-First 관점이 얼마나 중요한지 느꼈던 작업이었다. 추가로 ES7의 Async Function⁴을 이용해 비동기 적용도 도전해보고 싶다.