• 웹과 네이티브 앱 기능 모두의 이점을 갖도록 특정 기술과 표준 패턴을 사용해 개발된 web app
• 브라우저에서 실행되는 web app을 네이티브 앱처럼 만들어주는 기술
• PWA는 service worker를 통해 가능하다.
  • service worker를 지원하는 브라우저가 따로 존재

PWA를 위한 service worker 설정

우선 cra에 PWA를 위한 template가 이미 존재하기 때문에

cra를 통해 프로젝트를 만들었다면 편하게 이를 쓸 수 있다.

npx create-react-app . --template cra-template-pwa

이미 기존 프로젝트를 cra로 만들었다면,

1. PWA를 위해 새로운 프로젝트를 하나 생성한다. (template를 pwa로 해서)
2. service-worker.js, serviceWorkerRegistration.js만 src로 가져온다.
3. index.js에 serviceWorkerRegistration.register(); 을 추가해서 service worker를 등록해주면 끝!

중요한건 우리 프로젝트는 CRA로 만들지 않았다..

하지만 여차저차 설정해주면 service-worker.js, serviceWorkerRegistration.js 를 이용해서 PWA를 구동할 수 있을 것 같았다.

근데 여기서 문제인게 지금 웹팩에서 code splitting과 cache busting 등을 적용해두어서 그런지 service-worker 등을 build에 포함시켰음에도 불구하고 service-worker를 실행하다가 오류가 나는 문제가 발생했다.

이유가 뭘지 추측해봤는데 우선 service-worker 파일은 찾았지만 service-worker에 필요한 workbox 관련 라이브러리들이 vendor로 묶여있어서 찾지 못하는 문제 같았다. (추측)