프로젝트에 PWA를 적용해보자는 이야기가 나와서 테스트를 먼저 해보겠사옵니다.

---

PWA

• Progressive Web Application
• 웹과 네이티브 앱의 장점을 결합한 웹 기술
• URL을 통해 접근
• 설치 필요 없음
• 대표 기능
  • PUSH 알림
  • 오프라인 환경
  • 홈 화면에 추가

---

PWA 만들기

설치

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

// typescript
npx create-react-app my-app --template cra-template-pwa-typescript

프로젝트 설치 후

프로젝트 설치 후 /src/service-worker.ts /src/serviceWorkerRegistration.ts /public/manifest.json 파일이 자동으로 생성됩니다.

• service worker:
  PWA의 핵심 기능을 구현하여 오프라인 기능, 푸시 알림, 네트워크 요청 관리 등을 수행하는 백그라운드 스크립트
• manifest:
  PWA의 외형과 사용자 경험을 정의하는 JSON 파일로, 앱 이름, 아이콘, 시작 URL, 테마 색상 등을 지정

서비스 워커 활성화

/src/index.tsx

// 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.unregister();

초기에는 위 코드처럼 unregister()로 비활성화 되어있는 데, 활성화를 하려면 주석 설명처럼 serviceWorkerRegistration.register() 로 수정하면 됩니다.

매니페스트 작성

앱 아이콘을 사이즈별로 넣어줍니다.
아래 굉장히 좋은 사이트에서 아이콘을 사이즈별로 만들어줍니다.
https://favicomatic.com/

"Every damn size, sir!" 을 선택해야 아이콘이 각 사이즈별로 생성됩니다.
Upload your image 클릭

• 이미지 업로드하면 1) 파일 자동으로 다운받아짐(못받았으면 수동발급) 2) <link>와 <meta>태그 생성됩니다.
• 다운받은 이미지는 /public 폴더 안에 image or icons 적당한 이름으로 폴더 만든 후 싹 넣어줍니다.
• /public/manifest.json icons: [] 사이즈 별로 작성해주세요.
  

• 생성된 <meta>를 /public/index.html <header>태그 안에 모두 넣어줍니다
  

• npm run build

• 프로젝트 실행시켜주고 브라우저 상단에 다운로드 아이콘이 생겼습니다.
  

• 

• 바탕화면과 작업표시줄에 아이콘도 잘들어가있고 앱도 잘 돌아갑니다.
  

Vite 환경에서 세팅

지금까지 CRA에서 제공해주는 PWA 설정이었고 vite에서는 vite-plugin-pwa 플러그인을 사용해야합니다.

https://vite-pwa-org.netlify.app/

---

참고

https://create-react-app.dev/docs/making-a-progressive-web-app/