PWA란?

PWA란?

• Progressive Web App의 약자
• HTML, CSS, JavaScript와 같은 웹 기술로 구현
• 앱 스토어에서 설치하는 것 뿐만 아니라, 웹 기술만으로 앱과 같은 기능을 갖춤
• 웹이지만 모바일 환경에서 설치가 가능하고, 앱과 유사한 사용자 경험을 제공해주는 웹 앱
• 가장 대표적인 예시 - twitter.com
• 보안상의 이유로 브라우저에서 접근하지 못하는 시스템 하드웨어와 소프트웨어에도 접근 가능

---

네이티브 앱 vs PWA

• 실행
  네이티브 앱은 설치를 해야 실행을 할 수 있지만
  PWA는 설치없이 브라우저에서 실행이 가능(설치도 가능)
  
  
• 작성 방법
  네이티브 앱은 각 기기의 OS에 맞는 프로그래밍 언어로 개발(iOS - 스위프트, 안드로이드 - 자바)
  PWA는 HTML, CSS, JavaScript 사용
  
  
• 배포
  네이티브 앱은 다양한 플랫폼에 대해 버전을 따로 개발하고 앱을 배포해야 함
  PWA는 이런 절차들 필요 없이, 브라우저와 URL만 있으면 실행 가능 

---

PWA 조건

• 발견 가능 : 검색 엔진을 통해 찾을 수 있음
• 설치 가능 : 앱스토어와 별개로 브라우저 안에서 홈 화면에 앱 설치 가능
  (원한다면 앱 스토어 출시도 가능)
• 연결 가능 : 간단하게 URL을 전송해서 공유
• 네트워크 독립적 : 오프라인, 저속도 환경에서 동작가능
• 재 참여 가능 : 브라우저가 닫혀 있더라도 푸쉬 알람을 보낼 수 있음
• 반응형 : 데스크탑, 모바일 등 여러 기기에서 동일한 사용자 경험을 제공
• 안전 : HTTPS 통신으로 제공되므로 안전

---

구성

크게 Manifest와 Service Worker 라는 2가지 기술을 사용함

 

- Manifest

• 앱 아이콘, 화면 런처방식 및 배경색, 시작 URI 등을 설정할 수 있는 json 형식의 설정파일
• 앱스토어에서 설치없이 웹 페이지에서 디바이스에 추가하는 기능

 

- Service Worker

• PWA의 핵심 기술
• 캐싱, 백그라운드 동기화 및 푸시 알림 같은 다양한 기능 지원
• 브라우저 스레드와 별도로 백그라운드에서 실행되는 스크립트
• 서버로 가는 request, response를 가로채는 프록시 서버로 작동
  -> 네트워크 작업을 통해 주고 받는 컨텐츠들을 수정하고 저장하는 등의 처리를 함

---

장단점

- 장점

• 안드로이드/iOS 지식 없이도 두 플랫폼 위에서 작동하게 만들 수 있음
• 일반적인 웹 기술을 활용해서 만들 수 있음
• 앱 스토어의 심사와 리뷰를 거치지 않음
• 기존의 웹사이트를 앱으로 만들 수 있음 -> 추가로 유지관리해야하는 코드베이스가 적음
• 기본적으로 반응형이기 때문에, 다양한 화면 크키에도 잘 작동함
• 일반적인 웹 사이트와 달리, 오프라인에서도 작동
• 검색엔진을 통해서 찾을 수 있음
• 원한다면 앱스토어를 통해서 배포 가능
• 푸시 알림을 통해 사용자들의 관심을 끌 수 있음

 

- 단점

• PWA에 대한 인지도 부족, 앱 설치의 애매함
• 브라우저에서 실행되기 때문에, 네이티브 앱에 비해 지연 속도가 크고 배터리 소모량이 많음
• 네이티브 앱에 비해 제공되는 기능에 한계가 있음