Workbox

개요

Next PWA는 Workbox를 사용한다. 이 Workbox에 대해서 알아보자.

serviceWorker를 다루면서 느낀 것은 '정말 다루기 조잡하다'라는 느낌이었다. API는 다루기 조잡한 것들을 편하게 다루게 해준다. Workbox가 그렇다.

Workbox is a set of modules that simplify common service worker routing and caching.

Workbox의 목표는 서비스워커 사용을 쉽게 사용함에 있고 동시에 필요한 경우 복잡한 응용 프로그램 요구 사항을 수용할 수 있는 유연성을 제공하는 것을 목표로한다.

가장 간단한 예시로 workbox-build는 지정된 asset을 미리 캐시하는 서비스 작업자를 생성할 수 있는 몇 가지 방법을 제공한다.

모듈들을 몇개 보자.

• workbox-routing: for request matching
• workbox-strategies: for caching strategies
• workbox-precaching: for precaching
• workbox-expiration: for managing caches
• workbox-window: registering a service worker and handling updates in the window context

이러한 모듈들은 서비스 워커 API를 직접사용하는 것보다 읽고 유지 관리하기 쉬운 선언적 방식으로 서비스 워커 코드를 작성하는데 도움이 된다.

아래는 선언적으로 코드를 작성한 간단한 예제이다.

import { skipWaiting, clientsClaim } from 'worbox-core';

skipWaiting()
clientsClaim()

skipWaiting과 clientsClaim이라는 함수가 보인다. 서비스 워커는 최초 등록된 후 다음 로드시까지 이를 사용하지 않는다. 하지만 skipWaiting과 clientsClaim을 적용한다면, 해당 페이지를 즉시 제어한다.

skipWaiting은 workbox에서 사라질 것이라고 한다. 대신 서비스워커에서 self.skipWaiting()을 사용한다.

Precaching with Workbox

Precaching은 서비스 워커에서 수행하는 일반적인 작업 중 하나이며 Workbox는 이에 대한 방법을 제공한다.

우선 두가지가 있다.

• generateSW
• injectManifest

Precaching with generateSW

generateSW는 Workbox에 캐싱하기 가장 쉬운 방법이다.

generateSW에 대해 기억해야 할 가장 중요한 점은 서비스워커를 직접 작성하는 것이 아니라 Workbox에 서비스 워커를 생성하도록 요청한다는 것이다. 또한, 다양한 옵션을 통해 동작에 영향을 줄 수 있다.

기본적으로 workbox-webpack-plugin은 웹팩이 종속성 그래프에 포함하는 모든 것을 미리 캐싱하고 service-worker.js라는 서비스 워커를 output.path에 저장된 디렉토리에 쓴다.

위와 같이 이미 workbox 관련된 플러그인이 next-pwa를 설치하면서 깔린 것을 볼 수 있다.

Warning: If too many assets in your project are precached with the default settings, use one of the glob options to exclude resources in the generateSW configuration. When using workbox-webpack-plugin, consult the plugin's GenerateSW documentation to find out how to prevent unwanted assets from being precached, as its configuration differs from generateSW.

아래와 같은 기능을 제공한다.

• Precaching: 웹 애플리케이션을 접속하기 전에 미리 캐싱해놓는 캐싱 방법.
• Runtime Caching: 웹 애플리케이션을 동작 시킬 때 발생하는 요청에 대해 서버 응답을 캐시 스토리지에 저장하는 캐싱 방법. 보통 이미지와 같은 리소스는 파일 용량이 커서 처음 페이지 접속할 때 서비스 워커 설치 시간이 길어지므로 런타임 캐싱으로 하는게 좋다.
• Strategies
• Request Routing
• Background Sync
• Helpful debugging

참고

• What is Workbox?