Progressive Web App 셋팅 & 앱 발행 방법

프로젝트 생성 방법

 

기존 프로젝트를 pwa 형식으로 변경하는 방법이 존재 하지 않기 때문에

새 프로젝트를 생성해주고 기존 코드를 복사 해주는 방식을 사용해야한다

 

터미널 안에서 다음 코드 작성후

세 프로젝트 생성 해준다

 

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

 

PWA 파일의 조건은 생성된 파일안에 manifest.json(앱 설정 파일)과 service-worker.js  파일이 들어있어야한다

시작할 때 PWA 형태로 파일을 생성해주면 자동으로 생성 되어있음

 

manifest.json  설정

 

앱의 설정 파일로 앱의 이름, 아이콘, 시작 url, 테마 색상, 배경 색상의 기본 설정을 다룰 수 있다

 

service-worker.js 설정

 

service-worker.js 파일은 빌드를 해야지 생성도는 파일로

index.js 파일안에서 다음과 같은 설정을 해주어야지 생성이 된다.

 

src 파일안에 있는 index.js 파일을 열어준다

 

여기에서 unregister()를 register()로 변경해준다

 

serviceWorkerRegistration.register();

 

다음과 같이 설정해주고 해당 프로젝트를 빌드해주면 된다

 

npm run build

 

빌드하면 다음과 같이 build 파일이 생성되고 파일안에 필요한 두 가지 파일을 확인 할 수 있다

 

service-worker.js는 오프라인에서도 사이트를 열수 있도록 도와준다