프로그레시브 웹 앱(PWA)에 대한 내용 정리

⚡ 개요

PWA는 Progressive Web App의 약자이다. PWA는 모바일 웹 애플리케이션의 새로운 형태로 사용자가 앱을 다운로드하거나 설치하지 않아도 모바일 기기에서 애플리케이션을 실행할 수 있게 해준다.

PWA는 일반적인 모바일 웹 사이트와 유사하지만 추가적인 기능을 제공한다. 예를 들어 오프라인에서도 작동할 수 있고 네이티브 앱과 유사한 기능을 제공하며 앱 아이콘을 홈 화면에 추가할 수 있다.

PWA는 웹 기술로 만들어지기 때문에 앱 스토어의 검토 과정을 거치지 않아도 되고 업데이트가 더욱 용이하다. 또한 여러 플랫폼에서 동작할 수 있기 때문에 개발자는 앱을 각 플랫폼마다 따로 개발할 필요가 없다.

PWA는 현재 많은 기업이 적극적으로 도입하고 있으며 모바일 웹 애플리케이션의 발전에 큰 역할을 하고 있다.

⚡ 사용 이유는 ?

네이티브 앱과 유사한 사용자 경험: PWA는 네이티브 앱과 비슷한 사용자 경험을 제공한다. 예를 들어 PWA는 앱 아이콘을 홈 화면에 추가할 수 있고 네이티브 앱처럼 전체 화면 모드를 사용할 수 있다. 또한 PWA는 오프라인에서도 작동할 수 있기 때문에 네이티브 앱과 마찬가지로 네트워크 연결이 불안정한 상황에서도 사용할 수 있다.

빠른 성능: PWA는 브라우저에서 실행되기 때문에 초기 다운로드 시간이 짧고 앱의 속도도 빠르다. 이는 사용자 경험을 향상시키고 이탈률을 낮추는 데 도움이 된다.

앱 스토어 없이 배포: PWA는 앱 스토어에서의 검토 과정을 거치지 않아도 배포할 수 있다. 이는 개발자가 업데이트를 빠르게 배포할 수 있게 해주며 사용자는 앱 스토어에서 앱을 다운로드하거나 업데이트할 필요가 없다.

여러 플랫폼에서 동작: PWA는 여러 플랫폼에서 동작하기 때문에 개발자는 각 플랫폼마다 따로 앱을 개발할 필요가 없다. 이는 개발 시간을 단축하고 비용을 절감하는 데 도움이 된다.

SEO 최적화: PWA는 일반적인 웹 사이트와 같이 검색 엔진 최적화(SEO)를 할 수 있다. 이는 앱을 검색 결과에서 노출시켜 앱 다운로드를 촉진하는 데 도움이 된다.

⚡ 사용하는 프레임 워크 및 라이브러리는 ?

PWA는 기본적으로 웹 기술을 사용하여 개발을 할수 있다.

HTML, CSS, JavaScript: PWA는 일반적인 웹 사이트와 같은 방식으로 HTML, CSS, JavaScript를 사용하여 개발할 수 있다.

Service Worker: Service Worker는 PWA에서 가장 중요한 기술 중 하나이다. Service Worker는 백그라운드에서 실행되는 JavaScript 코드로 네트워크 요청을 가로채고 캐싱, 오프라인 지원 등의 기능을 제공한다.

Manifest 파일: Manifest 파일은 PWA에서 앱 아이콘 앱 이름 등의 정보를 담고 있다. 이 파일을 추가함으로써 사용자는 PWA를 홈 화면에 추가할 수 있습니다.

HTTPS: PWA는 HTTPS를 사용하여 보안을 유지한다. HTTPS를 사용하지 않으면 Service Worker와 같은 일부 기능이 작동하지 않을 수 있다.

Responsive Web Design: PWA는 모바일 기기에서 사용되기 때문에 Responsive Web Design을 적용하여 다양한 기기에서 화면이 잘 보이도록 해야 한다.

 

대표적인 JavaScript 라이브러리로는 React, Angular, Vue.js 등이 있다. 

또한 라이브러리로는 Workbox, PWACompat 등이 있다. 

Workbox: Workbox는 Google에서 제공하는 Service Worker 라이브러리로 PWA 개발 시 필요한 캐싱, 프리캐시, 백그라운드 동기화 등의 기능을 제공한다.
PWACompat: PWACompat는 PWA를 지원하지 않는 구형 브라우저에서 PWA를 실행할 수 있도록 도와주는 라이브러리다. PWACompat는 모든 브라우저에서 PWA가 실행될 수 있도록 하기 위해 만들어졌으며 PWA 개발 시 크로스 브라우저 호환성을 높이는 데 도움이 된다.

⚡ 생각

회사에서 모바일도 지원을 해야되는 부분이 존재해서 PWA 로 개발을 진행을 하려고 준비를 하고 있다.  네이티브앱으로 개발을 하게 된다면 플랫폼에 따라서 요구하는 언어를 통해서 개발을 해야되고 이에 따르는 제약이 너무 강하다... 그런 와중에 PWA를 알게 되었고 현재 준비 단계에 있다. 어느정도 준비가 되고 내가 이해를 한뒤에 장단점, 이슈 관련 처리 내용, 관련 테스트 소스등으로 한번 더 정리를 하도록 하겠다.