PWA ?

Dae-Hee·2023년 4월 13일

pwa

PWA(Progressive Web Application): 프로그레시브 웹 앱

▪︎ PWA ?

웹과 네이티브 앱의 기능 모두의 이점을 갖도록 수 많은 특정 기술과 표준 패턴을 사용해 개발된 웹 앱

웹 앱 / 네이티브 앱 장점

웹 앱: 뛰어난 접근성이라고 볼 수 있다. 앱을 설치하는 것보다 웹사이트에 방문하는 것이 훨씬 쉽고 빠르며, 브라우저가 설치된 어떠한 장치에서도 접근가능하며, 새로운 컨텐츠를 빠르게 배포할 수 있고, 링크로 손쉽게 공유
네이티브 앱: 운영체제와 보다 잘 통합되므로 더 부드러운 사용자 경험을 제공한다는 장점

PWA는 이러한 장점들을 모두 통합하여 진보된 애플리케이션을 제공하려는 시도

IOS에서 웹 내 알림이 불가능 했으나,
2023년 4월 7일 출시한 IOS 16.4 버전부터는 웹 푸쉬 알림 기능 추가

PWA 사용 기업

PWA 적용으로 얻은 효과에 대한 연구에 의하면, 대부분 공통적으로 페이지 뷰의 증가, 앱 사용자와 비교하여 이탈률 감소, 재방문 증가, 상호작용률 증가, 로딩 시간 감소와 관련하여 기업에 매우 긍정적인 수치가 좋아졌다고 함

▪︎ PWA 특징

웹 브라우저를 통해 실행하는 앱
오프라인에서 동작
설치가 가능
쉬운 동기화
푸시 알림
연결 독립적 *

연결 독립적 *

서비스워커를 사용하여 오프라인이나 느린 네트워크에서 작동하도록 한다.
서비스워커는 브라우저가 백그라운드에서 실행하는 스크립트이며 웹 페이지와는 별개로 작동된다.

스크립트이긴 한데 웹 페이지와 직접적으로 상호작용할 수 없다.

기존에는 스크립트를 작성하고 DOM 조작, 데이터 요청 등을 통해 웹 페이지를 제어/상호작용했지만 
서비스워커는 그렇지 않다.

서비스워커는 웹 푸시(알림), 백그라운드 동기화, 캐싱 등의 기술적 기반을 제공한다.

기본적으로 오프라인 상태로 웹 브라우저를 통해 URL로 접속을 하면 네트워크가 없어서 접속할 수 없지만,
오프라인 환경에서 접속할 수 있는 이유는 바로 서비스워커의 캐싱 덕분이다.