2023년 07월 24일
PWA(Progressive Web Apps)란 모바일 기기에서 네이티브 앱과 같은 사용자 경험을 제공하는 웹 앱이다. 즉 어떤 기술이나 앱을 뜻하는 것이 아닌, 비슷한 개념으로 반응형 웹 앱을 예로 들 수 있는데 이와 같이 사용자 경험을 기준으로 나타낼 수 있는 개념이다. PWA를 사용하면 사용자가 앱을 다운로드하고 업데이트 할 필요 없이 웹 브라우저를 통해 앱을 바로 사용할 수 있다.
훨씬 빠른 페이지 로딩 속도
Service Worker 의 Cache API를 사용하여 데이터를 캐싱시킬 수 있다. 이를 통해 두번째 방문 부터 캐싱된 데이터를 통해 즉각적인 페이지 로딩을 시킬 수 있다. 정적데이터와 동적데이터에 대한 캐싱 정책을 어떻게 정하느냐에 따라 페이지 로딩 결과가 달라지게 된다.
오프라인 지원 (네트워크에 독립적)
Service Worker 에 캐싱된 데이터를 가져오게 되면 네트워크가 오프라인 상태라도 서비스를 사용할 수 있게 된다. 따라서 PWA 로 웹 앱을 구성하게 되면 오프라인 상태라도 브라우저에 더 이상 오프라인 상태라고 표시되지 않으며 캐싱된 데이터를 그대로 보여 줄 수 있다. 단, 우선 Service Worker에 캐싱을 해야되기 때문에 1, 2번은 페이지를 한 번이라도 방문 해야 한다. 그리고 이제 웹 앱에서도 Background Sync가 가능하기 때문에 오프라인 상황에서 서버에 전달할 데이터들의 유실을 방지할 수 있다.
검색 가능
웹 앱의 특성 그대로 검색이 가능하다.
설치 가능 (홈 화면에 추가)
PWA 는 웹 앱 매니페스트 내부에 설정된 속성과 웹 앱 설치 라는 최신 모바일 브라우저에서 사용할 수 있는 기능을 통해 웹 앱을 현재 모바일 브라우저를 사용하는 디바이스의 홈 화면에 추가 즉, 설치와 같이 등록 할 수 있다.
공유 가능 (링크를 통한)
웹 앱 이기 때문에 URL을 통한 공유도 가능하다.
푸시알림을 통한 지속적 참여 유도
최신 브라우저에서 Web API인 Push API 를 사용하여 서버로부터 알림을 push event로 받고, Notification API 을 이용해 브라우저에 시스템 알림을 보여 줄 수 있다. 이는 사용자의 재참여를 유도할 수 있고 사용자의 재참여를 유도하는 네이티브 앱의 핵심 기능을 웹에서 구현할 수 있게 된 것이다.
반응형 웹 화면
PWA 의 가장 기본은 반응형 웹 앱 이기 때문에 웹 브라우저를 사용하는 다양한 디바이스의 화면에 모두 대응할 수 있다.
안전
PWA 을 구현하기 위한 기술은 HTTPS 에서만 사용이 가능하고 브라우저의 보안정책인 CORS 등을 따르기 때문에 보안적인 이점도 있다.
점진적, 구축이 쉬움
이미 구축된 웹 앱이라고 해서 PWA로 사용하지 못하는 것은 아니다. 기존에 구축된 웹 앱에 Service Worker와 Manifest.json 파일을 만들어 PWA로 구축하는 것은 매우 쉽고 또, 점진적으로 PWA에 요구되는 기능들을 하나씩 점진적으로 추가해 갈 수 있다.