웹에 애플리케이션의 장점을
결합해 만든 웹 앱입니다.
What ?
PWA웹과 애플리케이션은 차이점이 있으며. 이에 따른 장단점이 있습니다.
PWA는 웹과 애플리케이션의 경계를 허물어, 웹에서 애플리케이션과 같은 UX를 제공합니다.
'Google I/O 2016'에서 소개돼, 'Progressive Web Apps' 의 약자로 PWA로 줄여 부릅니다.
How?
PWA💡 Service Worker
💡 manifest.json
💡 HTTPS
Why?
PWA1. 뛰어난 접근성
별다른 설치 없이 접근이 가능하고, 빠른 배포와 링크를 통한 쉬운 공유가 가능합니다.
2. 비용 절약
뉴스 사이트, 쇼핑몰이나 간단한 사이트의 경우 웹과 애플리케이션이 함께 요구되는 경우가 있습니다.
한 번의 개발로 웹과 애플리케이션을 동시에 제공하여, 개발 및 유지 관리 비용을 절감할 수 있습니다.
3. SEO 향상
웹 애플리케이션이기 때문에, SEO(검색 엔진 최적화)를 활용할 수 있습니다.
PWA는 검색 엔진에서 색인되므로 사용자가 웹을 통해 앱을 쉽게 발견할 수 있습니다.
4. 높은 디바이스 호환성
데스크탑, 모바일, 태블릿 등 다양한 디바이스에서 동일한 웹 애플리케이션을 사용할 수 있습니다.
5. UX 개선
빠른 로딩 시간, 오프라인 기능, 푸시 알림 등 다양한 기능을 제공합니다.
Function
1. 오프라인 작동
서비스 워커를 사용하여, 사용자가 인터넷에 연결되지 않았을 때에도 애플리케이션을 사용할 수 있게 만듭니다. 웹 애플리케이션은 로컬에 캐시된 데이터를 통해 오프라인에서도 정상적으로 작동할 수 있습니다.
2. 홈 화면에 추가
PWA는 모바일 브라우저에서 홈 화면에 추가할 수 있는 기능을 제공합니다. 사용자가 웹 애플리케이션을 네이티브 앱처럼 홈 화면에 추가하여, 아이콘을 통해 손쉽게 앱을 실행할 수 있습니다.
3. 푸시 알림
PWA는 푸시 알림 기능을 통해 사용자에게 실시간 알림을 보낼 수 있습니다. 이 기능은 웹사이트나 앱이 활성화되지 않았을 때도 알림을 받을 수 있게 해줍니다. 예를 들어, 이메일, 뉴스, 새로운 메시지 등을 실시간으로 알려주는 알림 기능을 구현할 수 있습니다.
4. 빠른 로딩
PWA는 캐싱을 통해 빠르게 로드됩니다. 이는 특히 네트워크 상태가 좋지 않거나 오프라인일 때 웹 애플리케이션의 속도를 크게 향상시킵니다.
5. 애플리케이션 동작
PWA는 전체 화면 모드나 애플리케이션 스타일의 UI를 제공할 수 있습니다. 또한, 홈 화면에 추가된 PWA는 브라우저 UI(예: 주소창, 탭 등)가 없어지고, 네이티브 앱처럼 동작합니다.
6. 자동 업데이트
PWA는 서비스 워커를 사용하여 백그라운드에서 앱의 새로운 버전을 자동으로 업데이트합니다. 사용자는 항상 최신 버전의 앱을 사용할 수 있습니다.