8/24 TIL : PWA가 뭔데

1. PWA (Progressive Web Application, 진보적 웹 앱)

• 웹의 장점과 앱의 장점을 결합한 환경
• 브라우저에서 지원하는 어플리케이션 (기존의 모바일 어플리케이션은 플레이스토어 등을 통해 다운로드 & 설치가 필요함)
• PWA는 지원하는 웹 브라우저를 통해 설치 없이 페이지 접속 후 바탕화면에 앱 아이콘을 추가할 수 있고 푸시 알림도 보낼 수 있으며, 오프라인에서도 접근 가능
• 프로그레시브 : 점진적 개선을 통해 작성되므로, 어떤 브라우저를 선택하든 상관 없이 모든 사용자에게 적합
• 반응형 : 데스크탑, 모바일, 태블릿 등 모든 폼 팩터에 적합
• 연결 독립적 : 서비스 워커를 사용하여 오프라인이나 느린 네트워크에서도 작동하도록 향상됨
• 모바일 앱과 유사 : 앱 셸 모드에서 작성되기 때문에 앱 스타일의 상호작용 제공 가능
• 최신 상태 : 서비스 워커 업데이트 프로세스로 항상 최신 상태 유지 가능
• 안전 : HTTPS 프로토콜을 사용하므로 스누핑이 차단되며, 콘텐츠 변조로부터 안전
• 검색 가능 : W3C 매니페스트 및 서비스 워커 등록 범위로 인해 '애플리케이션' 으로 식별되므로, 검색 엔진에서 검색이 가능
• 재참여 가능 : 푸시 알림과 같은 기능을 통해 쉽게 재참여가 가능
• 설치 가능 : 앱 스토어 등 별도의 경로 없이도 홈 화면에 바로가기 생성 가능
• 링크 연결 가능 : URL을 통해 손쉽게 공유할 수 있으며 복잡한 설치 작업 불필요
• [알아둬야 할 단점] : 오래된 브라우저는 PWA를 지원하지 않음. 미지원 브라우저에서는 웹 푸시 알림, 오프라인 접속, 앱 셸 캐싱 등 강력한 기능을 사용하지 못할 뿐더러, 홈 화면에 웹 앱을 추가할 수 없음

서비스 워커

웹 워커(백그라운드 스레드에서 스크립트를 실행시켜주는 웹 컨텐츠(=브라우저의 백그라운드에서 실행하는 스크립트). 싱글 스레드로 작동하는 자바스크립트는 부하가 큰 작업에 취약하므로, 이를 보조하여 멀티 스레드와 유사하게 작업이 가능하도록 한다. 네트워크 통신, 파일 시스템 I/O등 리소스가 많이 드는 작업에 사용한다) 의 일종. 서비스 워커와 다른 웹 워커(dedicated workers, share workers 등)는 매우 유사한 인터페이스를 갖고 있으나, 의도와 기능 면에서 큰 차이가 있다.
[공통점]

• 별도의 워커 스레드에서 동작
• 직접적인 DOM 접근/조작 불가(웹 워커)
  - 별도의 실행 컨텍스트를 가진 워커 스레드에서 동작하므로 DOM에 직접 접근할 수 없음
• postMessage API를 사용하여 클라이언트와 통신

[각자 특징]

• 서비스 워커

  • 서비스 워커는 네트워크 요청을 중간에 가로채서 자신이 제어하는 캐시의 리소스로 교체할 수 있음 => 마치 프록시 서버처럼 작동=웹 애플리케이션에 오프라인 기능을 제공
  • 브라우저가 닫혀 있더라도 백그라운드에서 작동 가능
  • 웹 브라우저의 네트워크 요청을 가로채서 조작 가능
  • 보안 상의 이유로 HTTPS에서만 동작 (네트워크 요청을 수정할 수 있으니 중간자 공격에 취약함)
  • 여러 탭에서 사용 가능하며 모든 탭이 닫히더라도 계속 활성화되어있음
  • 서비스 워커의 생명 주기는 웹페이지와 별개로 작용한다

• 웹 워커

  • 자바스크립트는 싱글 스레드(메인 스레드) 기반으로 동작하기 때문에 오랜 시간이 소요되는 복잡한 작업을 메인 스레드에서 수행할 경우 웹 페이지가 멈추거나 버벅일 수 있음 => 이런 복잡한 작업들은 웹 워커를 통해 별도의 워커 스레드에서 연산하도록 하여 메인 스레드의 부담을 줄이고 성능 하락을 방지한다. UI의 응답성을 방해하지 않으면서 많은 연산 작업을 수행할 수 있다
  • 하나의 탭에서만 작동 가능

앱 셸 모델

앱 셸이란 PWA를 빌드하는 방법 중 하나다. 앱 셸을 통해 웹으로 개발한 PWA 앱은 네이티브 앱과 유사한 상호작용이 가능하다. 앱 셸은 앱 구동 시 필요한 최소한의 리소스만 로드하고, 캐싱한다. =앱에 방문할 때마다 리소스를 로드하지 않는다. + 필요한 컨텐츠만 로드하도록 개발자가 설정할 수 있다.
앱 셸은 마치 SPA 동작 방식과 유사하다. SPA에서는 초기 화면에서 필요한 리소스만 로드하고, 나머지는 필요할 때마다 동적으로 로드하여 사용한다. = 네트워크 없이 첫 화면을 빠르게 가져오는 데 유용하다