PWA 란?

PWA의 기본 개념을 간단히 소개

*자세한 설명 생략

 

 

▷ PWA(Progressive Web App)이란?

 

    - Web에 최신 기술을 더하여 브라우저가 있는 환경(데스크톱, 태블릿, 모바일)이면 

      어디에서나, 마치 Native App과 같은 사용성을 가진 Web App을 제공하고자 하는 시도이자 방법론

 

        *HTML, CSS, 자바스크립트와 같은 웹 기술들을 사용해 App과 같은 기능을 갖춘 Web App
        *푸시 알림 등 Native App의 기능 제공
        *Native App, Web App의, Hybrid App의 : 아래 참고

 

    - 최초 구글이 PWA라는 이름으로 방법론과 개념을 제시하였고,

      자신들의 브라우저인 Chrome에 새롭게 개발한 것이 아닌 최신 Web API를 접목시키고 확장 

    

        *구글뿐만이 아니라 다른 기업들 (Mozilla의 Firefox, Microsoft의 Edge)도 

          자신들의 최신 브라우저에 PWA가 요구하는 feature 들을 지원하기 시작
          그러나 웹이 앱만큼 유용해지기를 바라지 않는 Apple은 이들 중 가장 느린 속도로 PWA을 지원

 

 

▷ PWA 특징

 

    - 사용자 기기에 설치 가능
    - 오프라인, 저속도 환경에서도 동작
    - 백그라운드 동기화 가능
    - 다양한 Web API를 사용한 Native App과 같은 사용성
    - 푸시 알림 가능
    - HTTPS 프로토콜을 통해 제공

 

 

▷ PWA 필수 요구사항

*기존에 존재하는 일반 웹도 몇 가지 필수 요구사항만 충족시키면 PWA으로 쉽게 전환 가능

 

    - Web App Manifest JSON
        브라우저에게 PWA에 대한 메타 정보와 현재 웹 사이트가 유저의 데스크톱이나 모바일 장치에 

        어떻게 설치되어야 하는지에 대한 정보를 저장한 파일 (App 이름, 아이콘, 테마 색상 정보 등을 포함)

    - Service Worker.js
        PWA의 핵심 기능인 푸시 알림, 백그라운드 동기화, 오프라인 환경 지원, 리소스 캐싱의 구현체를 담을 수 있는 스크립트 파일

        *Javascript 기반의 Web API의 한 종류로 브라우저의 백그라운드에서 독립된 스레드를 실행
        *사용자가 해당 메인 App을 켜놓고 있지 않아도 백그라운드에서 실행 가능

    - HTTPS
        PWA는 신뢰할 수 있는 연결 상태에서만 동작하기 때문에, 보안 연결을 통해서 서비스를 제공

    - 아이콘 이미지

 

 

▷ 참고

릴로 - 기분좋은 앱 푸시 마케팅

앱 개발 "PWA(Progressive Web Application)" 정의/요소/장단점/사례/트위터 예시