(이미지 출처 : https://www.mitrais.com/news-updates/pwa-the-advantages-and-basic-guide-to-apply/)
PWA(Progressive Web Apps, 진보적 웹 앱)는 웹과 모바일 앱의 장점을 결합한 새로운 접근 방식으로, 최근 iOS 16.4 업데이트를 통해 iOS 장치에서도 웹 푸시 알림을 지원하게 되면서 그 가능성이 확대되었습니다. PWA의 세계를 살펴보고, 그 중요성과 작동 방식을 이해해 보겠습니다.
PWA 이해하기
개념 및 사용자 경험
PWA는 웹 기술에서 중요한 진전을 나타냅니다. 이는 웹 브라우저 내에서 네이티브 앱과 같은 경험을 제공하는 것을 목표로 합니다. 앱 스토어에서 앱을 다운로드하거나 업데이트할 필요가 없으며, 홈 화면에 바로가기를 추가하기 위한 최소한의 설치 단계가 필요할 수 있지만, 주로 웹 애플리케이션으로 기능합니다.
PWA의 주요 특징
-
푸시 알림
- 네이티브 앱과 마찬가지로, PWA는 푸시 알림을 보낼 수 있습니다.
- 브라우저가 닫혀 있어도 알림을 받을 수 있어 사용자 참여를 높일 수 있습니다.
- 알림을 보내기 위해서는 사용자의 허가가 필요합니다.
-
홈 화면 아이콘
- WA는 사용자가 홈 화면에 아이콘을 추가할 수 있게 해, 모바일 앱과 유사한 경험을 제공합니다.
-
설치 불필요
- 웹 애플리케이션으로 운영되기 때문에 다운로드할 필요가 없으면서도 앱과 같은 인터페이스와 사용자 경험을 제공합니다.
-
향상된 로딩 속도
- PWA는 사용자가 현재 페이지를 탐색하는 동안 다음 페이지의 데이터를 미리 로딩할 수 있는 프리캐싱 기능을 활용합니다.
프리캐싱 기술
프리캐싱은 전통적인 브라우저 캐싱(Cache-Control)과 다릅니다. 브라우저의 캐시 스토리지(Cache Storage)를 활용하여 웹 리소스를 미리 캐싱하는 기술로, 웹 애플리케이션에 접속하기 전에 리소스를 미리 캐싱하는 방법입니다.
PWA 장점 요약
- 오프라인과 온라인에서도 걱정 없는 "신뢰성"
- 네이티브 앱보다 간단히 설치할 수 있는 "편의성"
- 훨씬 강력해진 "보안성"
- 단골 손님을 늘리는 "구독자 고객 관리"
- 모든 곳에서 실행되는 "멀티 플랫폼" 지원
- 검색에 잘 노출되고 잘 퍼지는 "확장성"
- 항상 새것 같은 "최신성"
- 네이티브 앱도 부럽지 않은 "사용성"
- 빠른 "배포, 실행, 반응 속도"
서비스워커
https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API
- 서비스 워커는 네트워크 요청을 중간에 가로채서 자신이 제어하는 캐시의 리소스로 교체할 수 있으므로 마치 프록시 서버처럼 작동한다고 볼 수 있습니다. 즉, 웹 애플리케이션에 오프라인 기능을 제공합니다.
- 브라우저가 닫혀 있더라도 백그라운드에서 작동할 수 있습니다.
- 웹 브라우저의 네트워크 요청을 가로채어 조작 가능합니다.
- 보안 상의 이유로 HTTPS에서만 동작합니다. 네트워크 요청을 수정할 수 있다는 점에서 중간자 공격에 굉장히 취약하기 때문입니다.
- 여러 탭에서 사용할 수 있으며 모든 탭이 닫힌다고 하더라도 계속 활성화되어 있습니다.
PWA 적용하기
- HTTPS
-
service worker
- 브라우저가 백그라운드일 때 실행되는 스크립트.
- 캐시를 이용해 오프라인일 때 웹페이지를 사용자에게 보여주게 하기 위한 파일이고 필수는 아님.
-
manifest 파일
- 모바일 장치에서 설치할 때 아이콘, 이름, 경로등을 알려주는 json 파일.
- 해당 앱에 들어갈 때 스플래시 이미지를 보여줘 좀 더 네이티브 앱과 가깝게 만들 수 있도록 함.
- PWA Builder (https://www.pwabuilder.com/) 마이크로소프트사에서 만들었으며, 웹사이트를 PWA로 전환할때, 검토해주고, 빠진부분들을 자동으로 채워주면서 심플하게 만들 수 있게 줍니다.
마치며
다음 글에서 PWA의 기능을 활용하에 모바일 환경에서 앱에서와 같은 푸시를 받아볼수 있도록 하는 작업을 구현해보도록 하겠습니다.