• create-react-app 에서 service worker 커스텀하기 :: 마이구미
    React 2019. 8. 21. 23:37
    반응형
    이 글에서는 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 을 캐시에서 제외하는 목적으로 적용해보았다.

    반응형

    댓글

Designed by Tistory.