[React] PWA 그것은 무엇인가?

PWA가 뭘까? 

프로그레시브 웹 앱 ( Progressive Web Apps )은 웹 앱과 네이티브 앱의 장점을
모두 제공하는 개발 철학이다. 

 

설명에서 나온 것처럼 진보된 형태의 웹 애플리케이션 개발이라고 할 수 있다. 

여기서 말하는 웹 앱의 장점과 네이티브 앱의 장점은 뭘까?

 

웹 앱

앱을 설치하는 것보다 웹사이트에 방문하는 것이 훨씬 빠르고 쉽다 또한 브라우저가 설치된 어떠한 장치에서도 

접근이 가능하며, 새로운 콘텐츠를 빠르게 배포할 수 있고, 링크로 쉽게 공유할 수 있다. 

 

특별하게 많이 사용하는게 아니라면 웹사이트의 애플리케이션은 설치하지 않는 것이 일반적일 수 있다. 

그래서 쇼핑몰 등에서 어플로 구매 시 더 많은 할인을 해주는 것 같다. 

쿠팡과 무신사를 이용할 때 어플 설치 유도

 

네이티브 앱

운영체제와 잘 통합되므로 부드러운 사용자 경험을 제공한다. 

 

네이티브 앱은 설치할 수 있으므로 오프라인에서 동작하고, 사용자는 홈 화면에서의 아이콘으로 브라우저를 사용하는

브라우저를 사용하는 것보다 쉽게 앱에 접근할 수 있다. 

 

PWA는 이러한 장점을 모두 통합해서 제공하려는 시도이다. 

 

PWA의 기능 

그렇다면 어떤 기능이 있어야지 PWA라고 할 수 있을까? 

• 오프라인에서 동작
• 설치가 가능 
• 쉬운 동기화
• 푸시 알림

위와 같은 기능을 만족하면 PWA라고 할 수 있다. 

그렇다면 우리가 개발하는 웹 앱이 PWA로 식별되기 위해서는 어떤 작업을 해야 할까? 

• 검색 가능 : 콘텐츠를 검색 엔진을 통해 찾을 수 있어야 한다. 
• 설치 가능 : 기기의 홈 화면이나 앱 런처에서 사용할 수 있어야 한다. 
• 연결 가능 : URL을 통해 공유할 수 있어야 한다. 
• 네트워크 독립적 : 오프라인 상태에서도 동작하거나 열악한 네트워크 연결에서도 동작해야 한다. 
• 점진적 향상 : 최신 브라우저에서는 모든 기능이 가능하고 구형 브라우저에서는 기본적인 수준으로 사용할 수 있다. 
• 재참여 가능 : 새 콘텐츠가 사용이 가능할 때마다 알림을 보낼 수 있어야 한다. 
• 반응형 : 스크린과 브라우저를 탑재한 모든 장치에서 사용할 수 있어야 한다. 
• 안전 : 사용자, 앱, 서버간의 연결은 민감한 데이터에 접근을 시도하는 제3자에게로부터 안전해야 한다. 

React에서 사용하기 

그렇다면 주인장이 사용하는 React에서 PWA를 사용하려면 어떻게 해야할까? 

놀랍게도 CRA에서는 템플릿을 제공하고 있다 ㄴㅇㄱ!!! 

 

npx create-react-app pwa --template pwa

설치하게 된다면 바로 PWA 세팅이 완료되게 된다. 

환경을 살펴보면 service-worker.js 파일이라던지, serviceWorkerRegistration.js 파일이 생성된다. 

 

해당 파일을 통해서 PWA 기능을 구현이 되는 것 같다. 

설치 후 실행하면 상단에 설치하라는 팝업을 볼 수 있고 설치를 누르면 다운로드가 가능해진다!!