PWA(Progressive Web App)

PWA(Progressive Web App)

웹사이트를 안드로이드/iOS 모바일 앱처럼 사용할 수 있게 만드는 일종의 웹개발 기술

 

(장점)

1. 스마트폰, 태블릿 바탕화면에 여러분 웹사이트를 설치 가능합니다.

(저거 설치된 앱 누르면 상단 URL바가 제거된 크롬 브라우저가 뜹니다. 일반 사용자는 앱이랑 구분을 못함)

 

2. 오프라인에서도 동작할 수 있습니다.

service-worker.js 라는 파일과 브라우저의 Cache storage 덕분에 그렇습니다.

자바스크립트로 게임만들 때 유용하겠네요.

 

3. 설치 유도 비용이 매우 적습니다.

앱설치를 유도하는 마케팅 비용이 적게들어 좋다는 겁니다.

구글플레이 스토어 방문해서 앱 설치하고 다운받게 하는건 항상 매우 높은 마케팅비용이 듭니다. 

근데 PWA라면 웹사이트 방문자들에게 간단한 팝업을 띄워서 설치유도할 수 있으니 훨씬 적은 마케팅 비용이 들고요. 

그래서 미국에선 PWA를 적극 이용하고 있는 쇼핑몰들이 많습니다. 

 

PWA 만드는 법

1. PWA가 셋팅된 리액트 프로젝트 생성

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

 

 

2. 셋팅

index.js 하단에 있는 다음 코드를

(index.js)

serviceWorkerRegistration.unregister();

아래와 같이 바꾼다.

(index.js)

serviceWorkerRegistration.register();

바꿔준 뒤 터미널 창에 아래 명령어를 입력해주면 service-worker.js 파일이 생긴다.

(terminal)

npm run build

 

3. 확인

PWA 잘되나 확인하려면 build된걸 VScode로 오픈해서 index.html 미리보기 띄운다.

=> 설치버튼 생기면 PWA임.

 

manifest.json / service-worker.js 파일

manifest.json 파일 : 웹앱의 아이콘, 이름, 테마색 이런걸 결정하는 부분이라고 보시면 됩니다. 

{
  "version" : "여러분앱의 버전.. 예를 들면 1.12 이런거",
  "short_name" : "설치후 앱런처나 바탕화면에 표시할 짧은 12자 이름",
  "name" : "기본이름",
  "icons" : { 여러가지 사이즈별 아이콘 이미지 경로 },
  "start_url" : "앱아이콘 눌렀을 시 보여줄 메인페이지 경로",
  "display" : "standalone 아니면 fullscreen",
  "background_color" : "앱 처음 실행시 잠깐 뜨는 splashscreen의 배경색",
  "theme_color" : "상단 탭색상 등 원하는 테마색상",
}

 

service-worker.js 파일

- 이 파일에 설정을 잘 해주면 이제 여러분의 웹앱을 설치했을 때 어떤 CSS, JS, HTML, 이미지 파일이 하드에 설치될지 결정할 수 있다.

- 그럼 이제 다음에 앱을 켤 때마다 서버에 CSS,JS,HTML 파일을 요청하는게 아니라 Cache Storage에 저장되어있던 CSS,JS,HTML 파일을 사용하게 됩니다.

- 그럼 이제 오프라인에서도 사용이 가능해지는거죠