create-react-app 및 PWA 템플릿을 사용하여 프로그래시브 웹 애플리케이션을 만드는 것으로 시작하겠습니다.
PWA란?
: Progressive Web Apps의 줄임말로, 모바일 사이트에서 네이티브 앱과 같은 사용자 경험을 제공하는 기술입니다.
웹과 앱 모두의 장점을 결합한 제품입니다. 설치할 필요는 없지만 홈 화면에 아이콘 추가 및 푸시 알림도 가능하여 사용자와의 접촉 기회를 늘릴 수 있습니다. 그것뿐만 아니라 읽기 속도와 표시의 고속화, 오프라인 열람 등 다양한 이점을 얻을 수 있습니다.
설치하는 방법
1. 프로젝트를 생성 할 때 pwa 설정을 해준다.
npx create-react-app react-pwa-app --template cra-template-pwa
2. index.js에서 serviceWorkerRegistration.unregister() -> serviceWorkerRegistration.register()로 바꿔준다.
삭제하는 방법
: 삭제를 안해주면 업데이트가 일어났을 때 반영이 안되기 때문에 아래 방법으로 삭제를 해줘야 한다.
npx create-react-app 에러가 발생 + 해결 방법
npm uninstall -g create-react-app npm add create-react-app npx create-react-app myapp
+ 확대/축소 안되게 하는 방법 (index.html에 아래 코드 추가)
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />https://marshmello.tistory.com/47
[PWA] 자바스크립트로 PWA 개발
자바스크립트로만 PWA를 개발해보겠습니다. 단계별로 하나하나씩 PWA를 완성해보도록 하겠습니다. 1. 프로젝트 생성 우선 VSCode를 열어 폴더(프로젝트)를 만듭니다. (파일 -> 폴더열기 -> 폴더생성
marshmello.tistory.com
그 외에 Service worker, push 알림 관련 사이트
https://gyyeom.tistory.com/m/3?category=961857
[React] CRA 프로젝트에 serviceWorker 적용하기
개요 create-react-app 으로 만든 프로젝트 진행하다가 푸시 알림때문에 serviceWorker 를 적용할 일이 생겼다. 찾아보니 cra 로 프로젝트 생성하면 기본적으로 serviceWorker.js 가 있다고 하는데 현재 프로젝
gyyeom.tistory.com
'더 알아보기 > 기능' 카테고리의 다른 글
| 리액트에서 워드 클라우드 만들기 (0) | 2021.12.24 |
|---|---|
| Audio 기능 (0) | 2021.12.22 |
| Timer 기능 (0) | 2021.12.20 |
| Proxy (0) | 2021.12.15 |
| Prettier 세팅하기 (0) | 2021.12.13 |
댓글