[PWA] react에서 PWA 구현

React에서 PWA 구현하는 방법을 알아보자.

일단 create-react-app으로 react 앱을 생성할 것이다. 이때 template 옵션을 cra-template-pwa와 함께 생성하면 된다.

npx create-react-app [프로젝트명] --template cra-template-pwa

타입스크립트를 지원하려면 아래와 같이 typescript를 추가로 입력하면 된다.

npx create-react-app [프로젝트명] --template cra-template-pwa-typescript

template cra-template-pwa 템플릿으로 생성을 하면 Google에서 PWA를 위해 만든 라이브러리인 Workbox가 미리 세팅이 되어 caching 기능을 사용할 수 있도록 만들어진다.

생성이 완료되면 아래와 같이 파일들이 생성된다.

여기서 index.js를 열고 serviceWorkerRegistration.unregister(); 를 serviceWorkerRegistration.register(); 으로 변경을 하자.

// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://cra.link/PWA
//serviceWorkerRegistration.unregister();
serviceWorkerRegistration.register();

PWA의 세부적인 기능에 대한 내용은 아래 링크를 참고하기 바란다.

Web manifest : https://rudaks.tistory.com/entry/PWA-Web-App-Manifest
Service-Worker : https://rudaks.tistory.com/entry/PWA-Service-Worker
Caching : https://rudaks.tistory.com/entry/PWA-Caching
Background Sync : https://rudaks.tistory.com/entry/PWA-Background-Sync
Web Push : https://rudaks.tistory.com/entry/PWA-Web-Push-Notification

빌드

npm run build

위의 명령어를 통해 build를 하자.

그러면 아래와 같이 빌드가 완료되었다는 메시지를 확인할 수 있다.

Compiled successfully.

File sizes after gzip:

  47.32 kB  build/static/js/main.9a35e712.js
  1.77 kB   build/static/js/787.653e102c.chunk.js
  513 B     build/static/css/main.f855e6bc.css

The project was built assuming it is hosted at /.
You can control this with the homepage field in your package.json.

The build folder is ready to be deployed.
You may serve it with a static server:

  serve -s build

그리고 serve -s build를 통해 실행을 해보자. 만일 serve를 설치하라는 메시지가 나오면 설치를 한 이후 실행해야 한다.