PWA (Progressive Web App)

PWA 란?

웹의 장점과 앱의 장점을 결합한 환경

 

웹의 장점으로는

• URL을 통한 접근이 간단하다. 설치과정이 없다.
• 플랫폼에 종속되지 않는다.

앱의 장점으로는

• 한 번 설치하면 아이콘을 통해 접근하는 것이 수월하다.
• 푸시 알람을 보내준다.

 

특징

• 확장성이 좋고, 깊이 있는 앱같은 웹을 만드는 것을 지향한다.
• 웹 주소만 있다면, 누구나 접근하여 사용이 가능하고 스마트폰의 저장공간을 잡아 먹지 않는다.
• 서비스 작업자(Service Worker) API: 웹앱의 중요한 부분을 캐싱하여 사용자가 다음에 열 때 빠르게 로딩할 수 있도록 도와준다.
• 네트워크 환경이 좋지 않아도 빠르게 구동되며, 사용자에게 푸시 알림을 보낼 수도 있다.

 

PWA 제공 기능

• 프로그래시브: 점진적 개선을 통해 작성되서 어떤 브라우저든 상관없이 모든 사용자에게 적합하다.
• 반응형: 데스크톱, 모바일, 태블릿 등 모든 폼 factor에 맞는다.
• 연결 독립적: 서비스 워커를 사용해 오프라인에서도 작동이 가능하다.
• 안전: HTTPS를 통해 제공이 되므로 스누핑이 차단되어 콘텐츠가 변조되지 않는다.
• 검색 가능: W3C 매니페스트 및 서비스 워커 등록 범위 덕분에 '앱'으로 식별되어 검색이 가능하다.
• 재참여 가능: 푸시 알림과 같은 기능을 통해 쉽게 재참여가 가능하다.

웹 앱 매니페스트란?

웹 앱 매니페스트(Web App Manifest)는 JSON 파일이다. 이것은 PWA의 세부사항을 포함하고 사용자 기기에 PWA가 설치될 때 동작하는 방법을 브라우저에 알려준다.

매니페스트는 애플리케이션 이름(전체 또는 단축 이름), 앱 아이콘, 앱이 시작될 때 열리는 URL, 테마 색상 제어 등과 같은 정보를 포함한다.

서비스 워커란?

기본 브라우저 스레드와 별도로 실행되어 네트워크 요청을 가로채고 캐시에서 리소스를 캐싱하거나 푸시 메시지를 전송하는 자바스크립트 파일이다.

 

PWA 등록 완료 화면