workbox의 이해 caching 전략 - jerrybabah/botw-recipe GitHub Wiki

workbox란?

service worker를 만들 때 사용할 수 있는 라이브러리

workbox로 할 수 있는 것

• (service worker를 직접 만들 때) 추상화된 service worker의 기능을 workbox 내의 여러 패키지에서 단순히 함수 호출하는 것으로 구현할 수 있다.
  • 예를 들어, Stale-While-Revalidate 캐싱 전략을 하나의 함수 호출로 끝내버린다.
• (service worker를 직접 구현하지 않을 때) 설정값만 입력해주면 service worker를 자동으로 만들어준다.

workbox를 이용해 service worker를 직접 구현

workbox 모듈을 임포트하는 방법

• CDN을 이용
  • importScripts를 이용하여 workbox-sw를 임포트 (웹 페이지와 다른 특수한 환경의 프로세스에서 동작하기 때문에 importScripts라는 특수한 임포트 문법을 사용하는 듯 하다.)
  • 임포트한 객체는 workbox에서 사용 가능한 모든 api를 가지고 있다.
  • service worker에서 실제로 읽어들이는 js 코드를 직접 코딩하는 방법
  • 직접 service worker를 만들고 싶은데, 간단한 로직을 가지고 있다면 이 방법을 추천
• bundler를 이용
  • es6+ 문법 또는 typescript를 활용하여 service worker를 구현 (import문, require문 사용 가능)
  • 필요한 패키지를 npm으로 설치한 후 각각 임포트 해야 한다.
  • 패키지 목록은 workbox 문서의 Service Worker Packages 카테고리 하위에 모두 나와 있다.
  • 직접 service worker를 만들건데, 복잡한 로직을 가질 것이라면 이 방법을 추천

workbox를 이용해 service worker를 직접 프로그래밍 하지 않고 구현

다은 세 가지 node 모듈 중 원하는 것을 이용

• workbox cli
• workbox-build
• workbox-webpack-plugin

workbox-webpack-plugin을 확장한 @vue/cli-plugin-pwa를 이용하기

• vue 프레임워크를 이용하고 vue-cli를 사용한다면 @vue/cli-plugin-pwa라는 workbox-webpack-plugin의 wrapper가 존재
• root directory 밑에 vue.config.js에서 설정을 하면 된다. (설정 방법)

캐싱 전략

캐싱 전략은 크게 두 가지 쟁점을 가지고 세울 수 있다.

• 언제 캐싱할까?
• 리소스가 존재하는 원천(캐시 or 서버)을 어떤 순서로 접근할까?

언제 캐싱할 지에 따른 전략

• precaching: 웹앱에 접근하기 전에 캐싱을 하는 전략
• runtime caching: 해당 리소스를 서버 응답을 통해 받았을 때 캐싱하는 전략

리소스 원천 접근 순서에 따른 전략

• Stale-While-Revalidate
• Cache First
• Network First
• Network Only
• Cache Only