Create-React-App에서 자동 생성 서비스 작업자를 수정하는 방법

Question

Create-React-App 라이브러리에서 샘플 앱을 만들었습니다. 빌드 명령을 실행하면 cache-first 전략을 사용하여 자체적으로 서비스 작업자를 생성합니다. 하지만 API 응답과 같은 캐시 기능과 같은 기능이 더 필요합니다. 자동 생성 된 서비스 작업자에서 내 코드가 포함 된 스크립트를 수정하는 방법을 모르겠습니다. 필자의 경우에 도움이되는 부분을 찾았지만 이것으로는 충분하지 않습니다.

은 기본적으로 생성 된 서비스 노동자 파일이 차단되지 않거나 HTTP API 요청, 이미지처럼, 어떤 출처 간 트래픽을 캐시하거나 다른 도메인에서로드 포함합니다. 이러한 요청에 대해 런타임 캐싱 전략을 사용하려는 경우 webpack.config.prod.js의 SWPrecacheWebpackPlugin 섹션에서 runtimeCaching 옵션을 추출한 다음 구성 할 수 있습니다. 단락 위

사전에

doc 공식 감사에서입니다!

Answer 1

npm run eject을 실행하고 기본 Webpack 구성에 액세스 할 수 있습니다.

이렇게하면 webpack.config.prod.js 파일을 생성 된 서비스 작업자를 조정하도록 수정할 수 있습니다. section that configures SWPrecacheWebpackPlugin을 찾으십시오.

runtimeCaching configuration option을 해당 섹션에 추가하여 런타임 캐싱 요구를 수용 할 수 있습니다.

Answer 2

최근 프로젝트에서 작업하는 동안 비슷한 문제가 발생했으며 "꺼내기"를 원하지 않았습니다. CRA에서 생성 된 코드에 사용자 지정 서비스 작업자 코드를 추가 할 수있는 작은 도구를 만들었습니다. 배출 후에 내가 내 자신에 모든 일을 처리해야하기 때문에 내가 꺼내기 싫어 https://github.com/bbhlondon/cra-append-sw