React - PWA 세팅해서 앱으로 발행하기

PWA 란

PC 는 바탕화면에, 모바일은 앱을 설치한 것과 같이 메뉴에 웹사이트 바로가기 아이콘이 생성되서 웹사이트를 앱처럼 설치해서 사용할 수 있도록 해주는 기술입니다.

• 장점
  • 설치 마케팅 비용이 적습니다.
  • 아날로그 유저들( 나이가 많으신 분들 ) 이 url 로 접속하고 이용하려면 어려울 수 있는데 PWA 를 이용해서 그 점을 해소해줄 수 있습니다.
  • html, css, js 만으로 앱까지 대응할 수 있습니다.
  • 푸시알림, 센서 등도 웹브라우저로 처리할 수 있어서 일반 앱에 비해서 기능적 하자가 적습니다.
• 단점
  • 설치과정이 조금 이질적입니다. ( 앱스토어에 방문하지 않고 설치하기 때문 )
  • HTTPS 사이트여야만 합니다.

 

PWA 사용법

먼저 PWA 가 세팅된 react 프로젝트를 생성해야합니다.

 

create-react-app 부분의 명령어가 조금 다릅니다.

 

PWA 프로젝트에 조건이 있습니다.

 

처음부터 PWA 프로젝트로 만들어야만 가능합니다. ( PWA 프로젝트가 아니었던 경우에는 새로 PWA 프로젝트를 만들고 그 안에 원래 만들었던 소스코드들만 복붙하시면 PWA 프로젝트로 만드실 수 있습니다. )

 

manifest.json 파일이 있어야합니다.

• 이 파일에서 앱의 이름과 아이콘등을 설정할 수 있습니다.

 

• 그리고 아이콘 설정 아래에 보시면 start_url 이라고 있습니다. 여기에는 앱을 누르면 처음 뜨는 페이지의 경로를 입력해주시면 됩니다.( 기본설정 . 으로 두면 index.html 이 잘 동작할 것입니다. )
• 그 외에도 상단바 제거 유무를 정할 수 있는 display, 테마 색상, 배경 색상등을 설정할 수 있습니다.

 

service-worker.js 가 있어야합니다.

• service-worker.js 파일은 index.js 파일로 가셔서 unregister() 를 register() 로 바꿔주시면 빌드할 때 자동으로 생성이 됩니다.

npm run build

 

• 이미 src 에 있는 service-worker.js 파일은 설정파일이라고 보시면됩니다.
• service-worker 파일은 오프라인에서도 사이트를 열 수 있도록 도와주는 역할을 합니다.
• 즉, 인터넷이 연결되지 않은 상황에서도 동작할 수 있도록 처음 설치할 때 미리 사진이나 html, css, js 를 하드디스크에 다운로드( 캐싱 ) 해놓는 코드들이 들어간다고 보시면 됩니다.
• 캐싱할 파일 목록들은 asset-manifest.json 에 작성되어 있습니다.

manifest.json 과 service-worker.js 는 PWA 프로젝트로 생성하시면 자동으로 생성되므로 처음에 PWA 프로젝트로 만들기만하면 별 문제 없습니다.

 

만약 특정 파일만 캐싱안되게 설정하고 싶다면 node_modules 파일에 있는 react-script 라는 폴더로 가서 config 폴더 안에 webpack.config.js 이라는 파일을 열어서 InjectManifest 라고 검색합니다.

 

그 다음에 exclude: 부분에 정규식으로 내가 캐싱하고 싶지 않은 파일의 이름을 적어주시면 됩니다.

• webpack.config.js