[React] PWA란?

PWA

웹사이트를 모바일앱처럼 설치해서 쓸 수 있음

PWA 장점

- 설치 마케팅 비용 적음 (앱스토어 마케팅 X)

- html , css ,js만으로 앱처럼!

 

처음에 PWA가 셋팅된 리액트 프로젝트를 생성해야 한다.

터미널에 다음 명령어를 친다.

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

기존 프로젝트를 PWA로는 만들지 못한다... ㅠㅠ 처음 생성할 때 저렇게 해야 한다.

그냥 새 PWA 플젝 만들고 기존 코드를 복붙한다. 필요한 라이브러리도 설치한다.

 

아래 2개의 파일을 수정한다.

1. manifest.json 앱설정파일 생성 (public폴더 아래 )

앱이름, 이미지 등등 설정할 수 있다.

2. service-worker.js 오프라인에서도 사이트 열 수 있게 도와준다. 나는 Html, css, JavaScript 파일을 미리 하드에 저장해둘 것입니다.

index.js에서 serviceWorkerRegistration.unregister(); 를 register()로 바꾼다.

npm run build하면 파일이 생성된다. build 폴더 안에 manifest.json, service-worker.js 있으면 PWA처럼 동작된다.

build파일 vscode에서 열고 index.html live server켰을 때 설치버튼 생기면 PWA이다.

개발자 도구 - Application에서 PWA 설정확인가능하다.