추가) React에서의 PWA

PWA

1. PWA란 ? 

- 웹사이트를 어플리케이션처럼 다운받는척하게 만들어서 사용할 수 있게 해주는 브라우저 기능을 이용한 개발기술

- 사용자에게 브라우저에서 '설치하시겠습니까?' 한마디 떤지고 다운받는 척 하게 해서 폰이나 pc에 바탕화면 아이콘처럼 만들어준다.

- 실제로 pwa로 설치된 바로가기를 누르면 브라우저를 통해 웹으로 접속되지만, 전체화면으로 작동하므로 사용자는 이게 웹인지 앱인지 모른다.

- 실제로 GFN 이나 XBOX Pass 등의 스트리밍 서비스에서 이런식으로 PWA를 적극 활용하고 있다. 실제로 네이티브 앱보다 개발비용이 적고 실시간 반응성이 중요한 게임스트리밍 서비스가 사용할 정도면 꽤 신뢰성이 높다.

- 네이티브 앱을 발행하는 것보다 마케팅비용도 적게들고, 오프라인 동작도 가능하게 캐싱이 가능하다.

2. React에서 사용

- 처음 프로젝트를 만들 때 세팅한다

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

- 필요한건 public 폴더 안의 manifest.json

- src 폴더 안의 service-worker.js

- 이 두가지이다.

 

- index.js 안의 

serviceWorkerRegistration.unregister();

이거를

serviceWorkerRegistration.register();

이렇게 바꿔준다.

 

2-1. manifest.json

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

- 이렇게 커스터마이징 하면 된다.

 

2-2. service-worker.js

- 사용자의 로컬에 기반파일을 알아서 저장해준다

- 기본 세팅은 되어있는데, 제외할 파일을 따로 커스터마이징 해줄 수 있다.

 

(공식 튜토리얼) https://developers.google.com/web/fundamentals/primers/service-workers

(샘플) https://googlechrome.github.io/samples/service-worker/basic/

 

3. PWA 개발자도구로 확인하면서 디버깅하기

- F12 누르고 Application 탭에 들어가서 확인하면 된다.

크롬 한글화는 최고야!

- 참고로 PWA는 구글 앱스토어에 올릴 수 있는 apk파일로 변환도 가능하다.

- PWAbuilder 이런거 찾아보자.