PWA(Progressive Web App)란?

PWA(Progressive Web App)

- 기존 Web app에서는 할 수 없던 푸시 알림, Offline 접속을 가능하게 기능을 개선

- 앱을 쓰는 것 같은 사용감 (모바일에 설치 가능, 스플래시 이미지 기타 등등)

- 한 번의 웹 개발로 앱 개발까지 같이할 수 있다는 점 (웹앱의 장점) + 애플리케이션의 고유 기능까지 개발 가능하다는 점 (앱으로서의 장점, but 한계는 있음)

 

 

Lighthouse

- PWA로 잘 만들어져 있는지 검사해줄 뿐만 아니라, Performance, 보안 등도 검사해주는 확장프로그램

* 크롬에 기본 탑재되어 있으나 크롬 확장프로그램으로 설치도 가능, 기본 탑재된 lighthouse는 report가 멈추는 버그가 있는 것으로 보여 확장프로그램을 설치하는 것을 추천.

 

manifest.json

- 앱으로의 UI를 설정하는 파일 (아이콘, 스플래시 이미지, 초기 경로 기타 등등)

- create-react-app의 프로젝트에서 public 경로 안에 존재함

 

service-worker

- 디바이스의 캐시를 세부 설정할 수 있는 파일

- offline 시에 앱으로서의 기능을 수행할 수 있도록 캐시에 저장할 데이터 설정 

- 서비스 워커는 웹 또는 앱과는 별개로 백그라운드에서 돌아가는 프로세스이므로 푸시 알림 기능을 가능하게 함

 

React + PWA => npx create-react-app my-app --template cra-template-pwa 또는 npx create-react-app my-app --template cra-template-pwa-typescript