Skip to content

React:PWA

React에서 PWA앱 시작하는 방법.

Create Project 

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

# TypeScript
npx create-react-app my-app --template cra-template-pwa-typescript

manifest.json

앱 설정 파일이다.

  • short_name - 앱 이름. 아이콘 아래에 표시할 이름
  • name - 앱의 풀 네임
  • icons - 앱 아이콘 설정. 플랫폼마다 요구하는 아이콘 크기가 다름
  • start_url - 앱 클릭시 처음 뜨는 페이지 설정
  • display - 앱을 실행했을 때 브라우저 상단바를 제거할지 말지 설정
  • theme_color - 테마 색사아 설정
  • background_color - 배경색 설정

index.js

빌드시에 service-worker.js 파일을 생성하기 위해서 index.js 파일에 설정을 변경한다. 

//serviceWorkerRegistration.unregister();
serviceWorkerRegistration.register();

See also

Favorite site