create-react-app 에서 service worker 커스텀하기 :: 마이구미

이 글에서는 create-react-app 에서 Service Worker 커스텀을 다루려고 한다.
CRA 을 사용한다면, eject 를 하고 싶지 않은 경우가 많을 것이다.
웹팩의 경우는 react-app-rewired 와 같은 라이브러리를 통해 커스텀하고있다.
서비스 워커는 sw-precache 라이브러리를 사용할 수 있다.

 

React 를 사용할 때, create-react-app 을 통해 셋업을 하는 경우가 많다.

우리는 복잡한 빌드 설정를 걱정하지 않고 편하게 사용할 수 있다.

Webpack, PWA, Service Worker 등 대부분 우리가 원하는 것들을 이미 제공해주고 있다.

따로 설정 변경이 필요하지않는다면, 굳이 시간을 쓸 필요가 없다.

하지만 CRA 에서 제공하는 설정을 커스텀해야할 경우는 발생하는 것은 흔치 않은 일이 아니다.

 

이 글에서는 CRA 에서 Service Worker 설정을 바꾸는 방법을 다루려고 한다.

서비스 워커는 많은 경우에서 사용되고 있고, 될 수 있다.

서비스 워커가 무엇인지에 대해서는 추후에 자세히 다뤄볼 생각이다.

글을 쓰게 된 동기는 다음과 같다.

 

우선 본인은 CRA 을 셋업했었고, 그 과정 중에 PWA 기능을 사용해야하는 경우가 생겼다.

PWA 를 사용하기 위한 조건들이 존재하는게, 그 중 하나가 서비스 워커를 활성화해야한다.

PWA 를 위해 기본적으로 제공해주는 서비스 워커를 사용했다.

하지만 기본적으로 CRA 에서 제공하는 서비스 워커는 새롭게 배포를 해도 캐시로 인해, 페이지가 업데이트가 되지 않았다.

이유는 index.html 을 서비스 워커에서 가져오고 있어서, index.html 이 새롭게 변해도 캐시된 index.html 을 계속 가지고 왔다.

 

 

CRA 를 빌드한 후에, 빌드된 파일 중에 precache-manifast.*.js 를 열어보면 서비스 워커 캐시 리스트를 볼 수 있다.

당연히 index.html 이 포함되어있었고, 단순히 index.html 가 캐시 항목에서 없애고 싶었다.

eject 를 통한 방법도 있었지만, 그러고 싶지는 않았다.

그러던 중 sw-precache 를 발견했고, eject 가 필요없는 방법이다.

 

sw-precache 는 특정 리소스에 대해 캐시를 제어할 수 있게 해주는 모듈이다.

사용법은 간단하다.

 

1. sw-precache-config.js 생성.
2. build 시 생성한 파일 실행.

sw-precache-config 파일은 다음과 같이 작성할 수 있다.

module.exports = {
  staticFileGlobs: [
    'build/static/css/**.css',
    'build/static/js/**.js',
  ],
  swFilePath: './build/service-worker.js',
  stripPrefix: 'build/',
  handleFetch: false,
  runtimeCaching: [{
    urlPattern: /this\\.is\\.a\\.regex/,
    handler: 'networkFirst',
  }],
};

 

staticFileGlobs 값에 캐시할 경로에 대해 js, css 만을 지정해주었다.

이 파일을 실행하기 위해 package.json 에서 명령어를 수정해준다.

 

"scripts": {
	.....
    "build": "react-scripts build && sw-precache --config=sw-precache-config.js",
  },

 

빌드를 한 후, 결과를 보면 index.html 는 Service Worker 에서 가져오지 않는 모습을 볼 수 있다.

빌드된 service_worker.js 에서 precacheConfig 변수에 들어있는 리스트를 보면, 설정한 경로의 js, css 파일만이 존재할 것이다.

 

여기서는 단순히 index.html 을 캐시에서 제외하는 목적으로 적용해보았다.