PWA

PWA는 웹과 네이티브 앱의 기능 모두의 이점을 갖도록 수 많은 특정 기술과 표준 패턴을 사용해 개발된 웹 앱

준비

1. 서비스 워커(Service Worker)

• PWA의 핵심 기술
• 웹 페이지와 별도로 백그라운드에서 실행되는 스크립트
• 네트워크 요청을 가로채는 프록시 서버 역할
• 캐싱 및 리소스 요청 관리하여 오프라인 경험을 가능하게 함

2. 매니페스트 파일(Web App Manifest)

• JSON 형식으로 작성된 파일
• 웹 애플리케이션에 대한 정보(앱 이름, 아이콘, 시작 URL, 디스플레이 타입 등)를 포함
• 이 파일을 통해 사용자는 PWA를 모바일 기기의 홈 스크린에 추가 가능

작동 방식

1. 사용자가 PWA를 방문: 사용자가 PWA가 호스팅된 URL에 처음 접속하면, 서비스 워커가 등록되고 활성화
2. 리소스 캐싱: 서비스 워커는 주요 리소스(HTML, CSS, JavaScript 파일 등)을 캐시에 저장
3. 오프라인 작동: 사용자가 네트워크 연결 없이 사이트를 방문할 경우, 서비스 워커는 캐시된 자원을 사용하여 페이지를 로드
4. 홈 스크린 추가: 사용자가 웹 앱을 자주 사용하는 경우, 브라우저는 PWA를 홈 스크린에 추가, 앱처럼 직접 액세스 가능

핵심 원칙

1. 발견 가능(Discoverable): 컨텐츠가 검색 엔진을 통해 쉽게 찾을 수 있음
2. 설치 가능(Installable): 앱을 기기의 홈 화면에 추가할 수 있어, 전통적인 네이티브 앱처럼 접근하고 사용 가능
3. 연결 가능(Linkable): 간단한 URL 공유를 통해 접근이 가능하여, 설치나 복잡한 설정 없이 사용 가능
4. 네트워크 독립적(Network Independent): 오프라인이나 불안정한 네트워크 상태에서도 동작 가능
5. 점진적(Progressive): 최신 브라우저의 최신 기능을 사용할 수 있지만, 구형 브라우저에서도 기본 기능을 제공하여 접근성을 보장
6. 재참여 가능(Re-engageable): 푸시 알림을 통해 사용자에게 새로운 컨텐츠나 업데이트 알림 가능
7. 반응형(Responsive): 모든 종류의 기기(모바일, 태블릿, 노트북, TV, 냉장고 등)에서 호환되어 사용 가능
8. 안전(Secure): 사용자, 앱, 서버간의 연결이 민감한 데이터에 접근을 시도하는 모든 제3자에 대해 안전해야 함