PWA 관련 전반적인 개념 정리 - jerrybabah/botw-recipe GitHub Wiki

PWA란?

Progressive Web App의 약자. 기존에 SSR(서버 사이드 렌더링), CSR(클라이언트 사이드 렌더링)로 제공하던 웹앱에서 좀 더 진보된 웹앱.
진보됐다는 것이 무엇인지 아는 것이 중요하다.
라이브러리나 프레임워크가 아니라 표준? 명세?에 가깝다.

'진보됐다'는 것이 무엇인지에 초첨을 맞춘 정의 (MDN 참고)

발견 가능: 컨텐츠를 검색 엔진을 통해 찾을 수 있습니다.
설치 가능: 기기의 홈 화면에서 사용할 수 있습니다. 네이티브 앱처럼 행동한다.
연결 가능: 간단하게 URL을 전송해 공유할 수 있습니다.
네트워크 독립적: 오프라인이나 불안한 네트워크 연결에서 동작합니다.
점진적: 최신 브라우저의 모든 기능은 사용할 수 없지만 이전 브라우저의 기본 기능은 여전히 사용할 수 있습니다.
재참여 가능: 새 컨텐츠가 사용 가능할 때마다 알림을 보낼 수 있습니다.
반응형: 모든 기기의 화면이나 브라우저에서 사용할 수 있습니다 — 모바일 폰, 태블릿, 노트북, TV, 냉장고, 등.
안전: 여러분과 앱 사이의 연결이 여러분의 민감한 데이터에 접근하려는 모든 제3자로부터 안전합니다. ⇒ 다른건 딱히 새롭지 않은데, 네트워크 독립적, 재참여 가능이 좀 새로운 것 같다. ⇒ 웹 개발에서 이미 중요하게 여겨지고 있던 개념과 더불어 최신 기술까지 접목하여 총집합한 개념인 듯 하다.

기능 위주의 정의. 다음 세 가지가 구현돼있으면 좁은 의미로 PWA라고 할 수 있다.

구성요소

start_url: 설치된 앱을 실행했을 때 처음 진입점을 설정해준다.
- start_url에 해시(#)나 쿼리를 붙이면 설치된 PWA 앱으로 접속한 것과 웹으로 접속한 것을 구분할 수 있다.
- start_url을 잘못 입력하면 앱 실행이 안된다.
display: 설치된 앱을 실행했을 때 화면에 어떻게 보여줄지
- fulscreen: url ui, 뒤로가기, 홈 버튼 등이 안보이는 꽉찬 화면
- standalone: 뒤로가기, 홈 버튼 ui만 보임
- browser: 위에 url 포함된 상태바, 뒤로가, 홈 버튼 보임
background_color: 앱 실행 시, 바탕 색깔
theme_color
- 데스크탑 기준으로 앱 설치 후 실행했을 때 윈도우의 top tool bar 색깔에 반영됨
- 모바일 기준 최근 앱 화면에서 top bar 색깔에 반영됨

service worker는 브라우저 마다 있는 service 데몬 프로세스에서 동작하며, 프로그래밍 가능한 클라이언트 사이드 프록시이다.

service-worker.js와 같은 파일을 만들어 서비스 워커가 어떤 동작을 할지 정의해준 후 알맞은 시점에 등록(register)해줘야 함
service worker를 등록하게 되면 웹 페이지, 브라우저와는 별개로 백그라운드 프로세스에서 스레드가 시작된다.
웹 페이지, 브라우저와는 별개이기 때문에 document, window, navigator에 직접 접근하지 못한다.
service worker는 웹 워커의 일종 (웹 워커는 웹 페이지 프로세스에서 메인 스레드와 별도로 동작하는 스레드 → 멀티스레드 가능)(웹 워커도 DOM에 직접 접근하지 못한다.)
브라우저에서 서버로 요청을 보낼 때, 클라이언트 사이드에서 중개 역할을 하여 request와 response가 항상 service worker를 통한다.

service worker는 이벤트 기반으로 동작한다.

설치 전략