PWA(Progressive Web App)

PWA(Progressive Web App) 이란?

• 모바일 기기에서 네이티브 앱과 같은 사용자 경험을 제공하는 웹 앱
• 전통적인 웹 앱의 한계에서 벗어나 네이티브 앱과 유사한 기능을 제공할 수 있음
• 사용자가 앱을 다운로드 하거나 업데이트할 필요 없이 브라우저를 통해서 바로 사용 가능
• HTML, CSS, JS와 같은 웹 기술들을 활용하여 네이티브 앱 수준으로 진화된 웹 앱

왜 인기를 얻게 되었는가?

• 웹의 기술 발전을 한 곳으로 수렴시키는 최신 웹 애플리케이션 개발 방법
  • 웹이지만 데스크톱이나 모바일 환경에 설치가 가능하고 앱과 유사한 사용자 경험을 제공해주는 웹 앱
• 앱 개발 생산성 극대화
  • 각 네이티브 앱에 대한 기술이 전혀 요구되지 않는 웹 기술을 이용하여 다양한 플랫폼에서 동작하는 설치형 앱을 빠르게 개발 가능
  • 스토어에서 설치될 필요가 없기 때문에, 심사 과정에 들어가는 비용이 절감됨
• 검색 엔진을 통한 유입
  • 검색엔진을 통해서 검색이 용이하며, 사용자의 유입을 기대해볼 수 있음
• 푸시 알림 지원
• 저속도 네트워크 환경, 오프라인 동작 지원
  • Service Worker 덕분에 앱 동작에 필요한 asset들과 일부 API call들에 대한 캐싱이 가능해지게 됨
• 🌟 기대 효과
  • 페이지 뷰의 증가
  • 이탈률 감소
  • 재방문 증가
  • 상호작용률 증가
  • 로딩 시간 감소

그럼에도 불구하고, 여전히 Native 급의 성능을 보장하진 않기 때문에 게임과 같은 고사양의 앱 개발이 불가능하다는 단점도 존재합니다

PWA의 조건

1. 검색 가능 (Discoverable)
   • 컨텐츠를 검색엔진을 통해서 찾을 수 있어야 함
2. 설치 가능 (Installable)
   • 기기의 홈 화면이나 앱 런처에서 사용할 수 있어야 함
3. 연결 가능 (Linkable)
   • URL을 통해서 공유할 수 있어야 함
4. Progressively enhanced
   • 최신 브라우저에서는 모든 기능을 사용할 수 있어야하고
   • 구형 브라우저에서는 기본적인 기능은 사용할 수 있게 만들어져야한다.
5. Re-engageable
   • 새 컨텐츠가 사용 가능할 때마다 알림을 보낼 수 있어야 함
   • e.g.) push 알림
6. 반응형 (Responsively designed)
   • 스크린과 브라우저를 탑재한 모든 장치에서 사용할 수 있어야 함
7. 안전 (Secure)
   • 사용자, 앱, 서버간의 연결은 민감한 데이터에 대해서
   • 접근을 시도하는 모든 제3자에 대해서 안전해야한다
   • PWA는 https 연결만 허용하기 때문에, 이와 같은 문제를 해결한다