프로그레시브 웹 애플리케이션

프로그레시브 웹 애플리케이션(Progressive Web Application, PWA)은 웹의 표준 기술을 기반으로 설치 경험, 오프라인 처리 및 장치 기능을 점진적으로 제공하도록 설계한 웹 애플리케이션이다. 기본적인 웹 페이지로 접근할 수 있는 동시에 지원되는 환경에서는 홈 화면이나...

분류웹 애플리케이션 설계 방식
정식 명칭 및 정의Progressive Web Application (PWA)
관련 기술World Wide Web, HTTP, 웹 브라우저, 웹 서버
기술 참고MDN: Progressive web apps

프로그레시브 웹 애플리케이션(Progressive Web Application, PWA)은 웹의 표준 기술을 기반으로 설치 경험, 오프라인 처리 및 장치 기능을 점진적으로 제공하도록 설계한 웹 애플리케이션이다. 기본적인 웹 페이지로 접근할 수 있는 동시에 지원되는 환경에서는 홈 화면이나 응용 프로그램 목록에서 독립적으로 실행할 수 있다. 설치 기능과 장치 API의 지원 범위는 플랫폼과 브라우저에 따라 달라진다.

PWA는 HTML, CSS, JavaScript와 웹 앱 매니페스트 등의 웹 플랫폼 기술로 구성된다. 매니페스트는 앱의 이름과 아이콘, 시작 URL, 표시 방식을 기술하고 브라우저는 이 정보와 자체 설치 정책을 바탕으로 설치 경험을 제공한다. PWA는 별도의 새로운 프로그래밍 언어가 아니라 여러 웹 기술을 특정한 사용자 경험으로 결합하는 접근 방식이다.

오프라인 기능은 일반적으로 Service Worker와 Cache API, IndexedDB 같은 저장 기술을 결합하여 구현한다. 네트워크가 끊겨도 캐시된 기본 화면이나 사용자 데이터를 표시할 수 있으며 연결이 회복되면 변경 내용을 서버와 동기화할 수 있다. 오프라인에서 발생한 수정의 충돌 해결과 보존 정책은 애플리케이션이 별도로 설계해야 한다.

알림, 백그라운드 동기화, 파일 처리와 장치 접근 기능은 해당 브라우저가 API를 제공하고 사용자가 권한을 허용할 때 이용할 수 있다. PWA는 네이티브 응용 프로그램과 유사한 사용 경험을 제공할 수 있지만 운영체제의 내부 기능에 무제한 접근하는 것은 아니다. 사용 불가능한 API가 있어도 기본 서비스가 유지되도록 점진적 향상을 고려한다.

PWA의 품질은 안정적인 URL, 접근성, 성능, 업데이트와 데이터 무결성에 좌우된다. HTTPS를 통한 배포와 캐시 버전 관리가 중요하며 오래된 설치본과 새로운 서버 API 사이의 호환성도 관리해야 한다. 설치한 사용자가 연결 없이 수행할 수 있는 작업 범위를 정의하면 오프라인 기능과 데이터 동기화 설계를 구체화할 수 있다.[1]

배경과 특징

웹 앱과 설치형 앱

점진적 향상

주요 구성

웹 앱 매니페스트

Service Worker

HTTPS

설치와 실행

설치 조건

독립 실행

아이콘과 시작 URL

오프라인 사용

Cache API

IndexedDB

동기화

플랫폼 연동

알림

파일 처리

장치 API

배포와 유지 관리

업데이트

캐시 전략

호환성

접근성과 성능

반응형 디자인

초기 로딩

사용성

관련 문서

  1. MDN: Progressive web apps ↩