PWA (Progressive Web App)
📖 PWA란?
-
PWA는 Progressive Web App의 약자로, 모바일 및 웹 플랫폼에서 사용 가능한 앱과, 웹 사이트의 혼합 형태입니다.
-
PWA는 구글 크롬 엔지니어 알렉스 러센과 디자이너 프랜시스 베리만이 소개한 웹의 새로운 개념입니다. 네이티브 앱 수준으로 웹 기술이 발전해 나갈 수 있게 방향성을 제시하는 최신 웹 앱 개발 방식입니다.
📖 PWA의 주요 특징들
📌 진보적 향상
- PWA는 최신 브라우저의 기능을 활용하여 단계별로 향상됩니다. 이 말은 구형 브라우저에서도 작동이 가능하지만, 최신 브라우저에서는 더 많은 기능과 향상된 경험을 제공합니다.
📌 앱 스타일의 사용자 경험
- PWA는 앞에서 소개하듯이 네이티브 앱과 유사한 사용자 경험을 제공합니다. 홈 화면에 아이콘을 추가하고, 오프라인에서도 작동하며 푸시 알림 등을 통해 사용자와 상호 작용이 가능합니다.
📌 오프라인 지원
- PWA는 서비스 워커를 사용하여 오프라인에서도 작동이 가능합니다. 이는 앱이 네트워크 연결이 없는 상황에서도 일부 기능이 사용 가능하다는 것을 의미합니다.
📌 안전성과 보안
- HTTPS를 사용하여 안전한 연결을 제공하는 것도 PWA의 일부입니다. PWA로 사용자의 데이터 보호 및 보안을 강화할 수 있습니다.
📌 설치가 필요하지 않음
- PWA는 앱 스토어를 통한 설치가 필요하지 않습니다. 사용자는 웹 브라우저를 통해 즉시 허용할 수가 있습니다.
📖 쉽게 이해하는 PWA
-
어떤 웹 사이트에 접속했는데 '앱을 설치하시겠습니까?'라는 팝업창이 뜨고 앱을 설치하면 앱 스토어를 거치지 않고 바로 컴퓨터 바탕화면이나 스마트폰 홈 화면에 설치되는 것들이 있는데요, 이것들이 우리가 접하는 PWA입니다.
-
우리가 자주 이용하는 카페인 스타벅스가 대표적인 PWA의 예시인데요, 스타벅스도 PWA로 만들어진 웹 앱을 서비스하고 있습니다.
📖 더 알아보기
📌 PWA 추가 설명
-
PWA는 웹의 기능과 네이티브 앱 수준의 기능을 모두 활용 가능하도록 다양한 기술과 표준 패턴으로 개발한 방법론 입니다.
-
일반적인 웹 앱을 PWA로 만들기 위해서는 다음 요건들을 필요로 합니다.
📌 서비스 워커 (Service Worker)
-
서비스 워커란, 웹 브라우저의 뒤편에서 항상 실행되고 있는 백그라운드 프로그램을 말합니다. 서비스 워커가 실행되어 있으면 클라이언트인 브라우저와 서버 사이의 상태 변경을 감지할 수 있습니다. 따라서 서버가 전송한 메시지가 있다면 클라이언트에 푸시알림을 보내는 것도 가능하게 됩니다.
-
서비스 워커는 온라인 상태 뿐만 아니라 오프라인 상태에서도 항상 실행되고 있습니다. 그래서 오프라인 상태에서 브라우저가 서버로 전송할 요청을 저장하고 있다가 인터넷 연결이 활성화 될 경우 즉시 서버로 전송하는 것이 가능한 것이죠.
-
서비스 워커 덕에 기존에 오프라인에서는 404 에러 페이지를 띄우는 것과 다르게 이미 불러온 콘텐츠에 접근하여 오프라인에서의 동작을 설계할 수 있는 것입니다.
📌 웹 앱 매니페스트 (Web Application Manifest)
- 웹 앱 매니패스트는 앱의 이름, 아이콘, 화면 방향, 배경 색 등등 기본 정보 및 설정을 저장한 JSON(Javascript Object Notation) 파일을 말합니다. 웹 앱 매니패스트는 다양한 기기에서 PWA가 설치될 경우 꼭 필요한 가이드라인 역할을 합니다.
📌 HTTPS
-
PWA는 여러 운영체제의 권한을 필요로 합니다. 따라서 웹 서버와의 보안이 중요시되죠. 따라서 HTTPS를 통해 배포 및 실행되어야 합니다. HTTPS를 통한 서비스는 서비스 워커가 클라이언트의 기기에 등록하거나 Geolocation 같은 API를 사용하기 위한 보안상의 전체조건이며 추가 보안 조치 및 콘텐츠의 신뢰성을 보장할 수 있습니다.
-
HTTPS란 웹에서 데이터를 안전하게 전송하는 프로토콜을 의미합니다. HTTPS는 일반적으로 웹 사이트에서 개인 정보를 보호하고 보안을 강화하기 위해 사용되죠. 보안과 신뢰성, SEO에 유리한 HTTPS의 장점이 있기에 PWA는 HTTPS에서 배포 및 실행되는 것입니다.
📖 PWA를 사용하는 이유
- 일반적인 모바일 웹 앱에 PWA를 도입하면 SEO가 가능해집니다. 또한 스마트폰의 주소록, 카메라 접근과 같은 기존 웹 앱에서는 불가능한 네이티브 기능을 사용할 수도 있죠. 주요 이유는 다음과 같습니다.
📌 푸시 알림
- 푸시 알림은 네이티브 앱의 성공에 꼭 필요한 기능입니다. 이 기능의 유무에 따라서 앱의 재방문률, 실행 시간이 크게 달라지기 때문이죠. 다른 무엇보다도 웹 API의 푸시 알림 관련 API들을 사용할 수 있다는 점이 가장 큰 매력입니다. 이 API들을 서비스 워커와 마찬가지로 백 그라운드에서 동작하기에 사용자가 다른 앱을 사용 중이거나 앱을 완전히 종료한 경우에도 푸시 알림을 보낼 수 있습니다.
📌 앱 설치 기능
- 앱 설치 기능은 스마트폰에서 홈 화면에 추가와 같은 기능입니다. PWA에서 홈 화면에 추가는 네이티브 앱에서 운영체제에 설치됩니다. PWA를 설치할 경우 큰 장점 중 하나는 네이티브 앱과 거의 동일한 사용자 경험을 제공한다는 것이죠. 그리고 이런 PWA는 네이티브 앱보다 용량이 작습니다.
📌 네트워크의 독립성과 캐시
-
앞에서 말했듯이 PWA는 오프라인에서도 404에러 페이지를 띄우지 않고 일정부분의 작업이 가능하다고 했는데요, 이는 네트워크의 독립성과 캐시에 관련이 있습니다.
-
PWA에서의 캐시는 브라우저 자체의 캐싱이 아니라 브라우저의 캐시 저장 공간을 활용하는 자원 관리 방법입니다. PWA에서의 캐싱은 프리 캐싱이 아닌 런타임 캐싱으로 분류합니다.
⚽ 프리 캐싱 (pre-caching) : 프리캐싱은 데이터가 필요한 시점 이전에 미리 캐시에 저장되는 것을 의미합니다. 사용자가 요청하지 않더라도 시스템에 미리 캐시를 저장하는 것이죠. 프리캐싱으로 사용자 경험을 높이고 응답 시간을 줄일 수 있는 장점이 존재합니다.
⚽ 런타임 캐싱 (Runtime Caching) : 런타임 캐싱은 데이터가 필요한 시점에 캐시에 저장되는 것을 의미합니다. 사용자 요청에 따라 동적으로 데이터를 캐시하는 것을 의미하죠. 런타임 캐싱은 실시간 애플리케이션이나 자주 변경되는 데이터에 대한 엑세스를 최적화하는 경우 사용됩니다. PWA에서는 프리 캐싱보다 이러한 점이 부각된 런타임 캐싱이 더 나은 선택입니다.
📌 캐싱 전략??
- 서비스 워커의 캐싱에는 캐싱 전략이 존재합니다. 캐싱 전략은 캐시된 데이터를 우선할 것인지 네트워크 요청을 우선할 것인지에 대한 조합으로 다음과 같은 것들이 존재합니다. 데이터 별로 여러 전략 중 하나를 골라 적용할 수 있습니다.
⚽ Cache First (정적 데이터!) : 네트워크 요청과 캐싱 중 항상 캐시된 데이터에 먼저 접근하는 방식입니다. 바뀔 일이 없는 폰트나 파비콘 이미지 같은 데이터에 적용하는 것이 좋습니다.
⚽ Cache Only (오직 캐시만!) : 항상 캐시된 데이터를 사용하고 캐시된 데이터가 없을 경우 에러를 발생하는 형식입니다.
⚽ Network First (동적인 데이터!) : 캐시된 데이터를 확인하기 전 항상 네트워크 요청을 먼저 진행하는 방식입니다. 포털 사이트의 뉴스나, 인스타그램 게시글 처럼 항상 최신 데이터를 불러오는 경우 적용하기 좋습니다.
⚽ Network Only (오직 네트워크만!) : 해당 데이터에 대해서는 캐시된 데이터의 유무와 관계없이 항상 네트워크 요청만 하는 방식입니다.
⚽ Stale While Revalidate (선 캐시 후 네트워크!) : 캐시된 데이터를 먼저 사용하고 캐시된 데이터가 없거나 오래된 경우 네트워크 요청을 진행하는 방식입니다. 프로필 이미지처럼 가끔 바뀌는 데이터에 적용하기 좋습니다.
📖 PWA 단점
📌 기능 제한
- 일부 기능들은 PWA에서 네이티브 앱에서 제공하는 것보다 더 제한적일 수 있습니다. 특히 하드웨어 기능에 엑세스 하는 카메라 센서 같은 것들은 네이티브 앱이 더 많은 기능을 제공합니다.
📌 오프라인 기능 제한
- PWA는 오프라인에서 작동할 수 있지만, 완전히 오프라인에서 작동하는 네이티브 앱보다는 제한적일 수 있습니다. 일부 기능들은 오프라인 상황에서 작동이 제한될 수 있죠.
📌 플랫폼 종속성
- PWA는 여러 플랫폼에서 작동하지만, 각 플랫폼에 따라 지원되는 기능이 다를 수 있습니다. 이로 인해 사용자 경험이 동일하지 않을 수 있습니다.
