---

React에서 PWA 셋팅

manifest.json 과 service-worker.js(or ts) 2개의 파일과 HTTPS 사이트라면 브라우저는 PWA로 인식합니다.

CRA를 이용한 셋팅

• 초기 셋팅 단계라면 CRA 커스텀 template를 이용해 PWA가 이미 셋팅된 상태로 프로젝트를 시작할 수 있습니다.

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

• 만약 TypeScript를 사용하는 프로젝트라면 아래와 같이 셋팅할 수 있습니다.

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

프로젝트가 생성된 후에 index.js(or tsx) 파일 내에서 아래의 내용을

serviceWorkerRegistration.unregister();

이렇게 수정하면 끝입니다.

serviceWorkerRegistration.register();

이미 작성된 프로젝트에 PWA 셋팅

• CRA 로 생성한 프로젝트에는 manifest.json 파일이 이미 존재합니다.
• 따라서 PWA를 위해 service-worker.js(or ts) 파일만 생성하면 됩니다.
• 가장 간단한 방법은 CRA 템플릿을 간접 활용하는 방법 입니다.

1. npx create-react-app 프로젝트명 --template cra-template-pwa 로 프로젝트 생성.
2. 생성된 프로젝트에서 service-worker.js(or ts), serviceWorkerRegistraion.js(or ts) 파일을 기존 프로젝트에 복사.
3. 생성된 프로젝트의 package.json 파일 {}dependencies 에서 workbox 로 시작하는 패키지를 기존 프로젝트에 동일 위치에 복사.
   
4. 기존 프로젝트에서 $ npm install; package.json 파일 {}dependencies(종속성)에 추가된 내용을 포함한 모든 내용이 자동으로 설치됨.
5. 기존 프로젝트의 src/index.js(or tsx) 에 import * as serviceWorkerRegistration from './serviceWorkerRegistration'; 와 serviceWorkerRegistration.register(); 추가; 아래의 참고.

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import * as serviceWorkerRegistration from './serviceWorkerRegistration';
import reportWebVitals from './reportWebVitals';

const root = ReactDOM.createRoot(
  document.getElementById('root') as HTMLElement
);
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

serviceWorkerRegistration.register();

reportWebVitals();

셋팅 확인

• manifest.json 파일과 아이콘 등을 설정하게 되면, PWA를 확인할 수 있다.
• 개발자 도구 > Application(응용프로그램) > Service Workers
  
• Lighthouse
  

---