Dev's

개요 CRA(Create React App)를 통하여 생성된 프로젝트는 서비스 워커(serviceWorker) 기능을 제공합니다. CRA에서 기본적으로 제공되는 service-worker.js파일은 아래와 같습니다. CRA에서 서비스워커를 재구성하는 방법은 여러 가지 방법이 있겠지만 workbox를 사용하여 서비스워커를 재구성하는 방법을 설명하고자 합니다. 환경 구성 프로젝트 생성 CRA를 사용하여 프로젝트를 생성합니다. npx create-react-app rca-workbox-customize-deploy 모듈 설치 workbox-build, npm-run-all 모듈을 설치합니다. npm install --save-dev workbox-build npm-run-all workbox-build 모듈 ..

개발 내용 웹앱 어플리케이션 프로젝트를 진행하며 workbox의 캐시 기능을 이용하여 PWA을 개발하였습니다. 어플리케이션 최초 구동 시 필요한 리소스의 캐시가 완료되면, 재실행시 캐시 된 리소스 파일들을 사용하여 오프라인 상태에서 사용할 수 있도록 개발을 진행하였습니다. 개발 환경 구성 workbox를 사용하기 위해서 workbox-build모듈을 설치 후 service-worker에서 사용될 serviceWorker.js파일을 생성하도록 하였습니다. 리소스 캐시 프로젝트 내에서 캐시 할 리소스를 필수적으로 캐시가 되어야 하는지, 사용자 또는 환경에 따라 캐시가 필요한 리소스로 구분을 지었습니다. 그리고 각 구분에 따라 캐시 하는 내용을 다르게 구성하였습니다. 필수적으로 캐시가 되어야 하는 리소스 해당..