워크박스는 구글이 개발한 자바스크립트 라이브러리다. 프로그래시브 웹 앱의 핵심 요소인 서비스 워커를 짜는 것을 간편하게 하는 라이브러리다.
이점편집
워크박스를 사용하면 서비스 워커를 짤때 자주 사용되는 패턴을 간편하게 짤 수 있다. 예를 들어 오프라인 상태시에 offline.html을 띄우고 싶디면 원래는 몇줄의 코드를 작성해야 하지만...
// 워크박스를 불러오는 코드
importScripts('https://storage.googleapis.com/workbox-cdn/releases/6.2.0/workbox-sw.js');
// 여기에 서비스 워커를 구성하는 작성해야 한다. 아래의 코드만으로 제대로 된 서비스 워커가 아니니 주의
workbox.recipes.offlineFallback();
워크박스를 사용한다면 이렇게만 작성하면 된다. 실제로 이곳 L위키가 오프라인 페이지를 이런식으로 구현한다.
기타편집
- PWA 제작을 도와주는 PWA 빌더는 워크박스를 이용한 서비스 워커를 생성한다.
- workbox-sw를 통해서 워크박스를 불러올 경우 공식 CDN은 한국 서버가 없어서 사이트 속도 저하의 원흉이 될 수 있기에 한국을 대상으로 하는 사이트를 한다면 Workbox CLI의 copyLibraries 명령어 등을 이용해서 파일을 받고 자체 서버에 호스팅 하는 것이 좋다. 참고로 jsdelivr에 있는 workbox-sw는 worbox-sw파일만 jsdelivr에서 불러올 뿐 다른 파일은 구글 서버에서 불러운다. 위의 예시 코드는 어디까지나 예시를 위해서 공식 CDN에서 불러오는 예제를 작성한 것 뿐이다.