PWA 프로그레시브 웹앱?

https://ko.wikipedia.org/wiki/%ED%94%84%EB%A1%9C%EA%B7%B8%EB%A0%88%EC%8B%9C%EB%B8%8C_%EC%9B%B9_%EC%95%A0%ED%94%8C%EB%A6%AC%EC%BC%80%EC%9D%B4%EC%85%98

 

PWA (Progressive Web Application)

: 모바일 앱 처럼 느껴지는 웹사이트

• 브라우저 탐색표시줄이 숨겨져서 앱처럼 보인다.
• 앱스토어에 올리기위한 심사가 필요 없다.
• 푸시 알림이 가능하다.

 

 

PWA로 식별되기 위한 원칙

• 발견 가능, 따라서 컨텐츠를 검색 엔진을 통해 찾을 수 있습니다.
• 설치 가능, 따라서 기기의 홈 화면에서 사용할 수 있습니다.
• 연결 가능, 따라서 간단하게 URL을 전송해 공유할 수 있습니다.
• 네트워크 독립적, 따라서 오프라인이나 불안한 네트워크 연결에서 동작합니다.
• 점진적, 따라서 최신 브라우저의 모든 기능은 사용할 수 없지만 이전 브라우저의 기본 기능은 여전히 사용할 수 있습니다.
• 재 참여 가능(Re-engageable), 따라서 새 컨텐츠가 사용 가능할 때마다 알림을 보낼 수 있습니다.
• 반응형, 따라서 모든 기기의 화면이나 브라우저에서 사용할 수 있습니다 — 모바일 폰, 태블릿, 노트북, TV, 냉장고, 등.
• 안전, 따라서 여러분과 앱 사이의 연결이 여러분의 민감한 데이터에 접근하려는 모든 제3자로부터 안전합니다.

Web Periodic Background Synchronization API

: 주기적 백그라운드 동기화 API

- PWA가 열려있지 않은 상황에서도 백그라운드에서 데이터를 가져올 수 있게 하는 것

 

 

SSR

: 서버 측 렌더링

• 첫 번째 로드가 더 빠르지만 페이지 사이를 탐색하려면 새 HTML 콘텐츠를 다운로드해야 합니다. 
• 여러 브라우저에서 잘 작동하지만 페이지 사이를 탐색하는 시간 면에서 문제가 있어 일반적으로 인지되는 성능이 저하됩니다.
• 페이지를 로드하려면 서버로의 새로운 왕복이 필요합니다.

 

 

CSR

: 클라이언트 측 렌더링

• 다른 페이지로 이동할 때 웹 사이트를 브라우저에서 거의 즉시 업데이트할 수 있지만 처음에는 클라이언트에서 더 많은 초기 다운로드 조회와 추가 렌더링이 필요합니다. 
• 웹사이트는 처음 방문할 때는 느리지만 탐색하는 것이 더 빠를 수 있습니다.

 

 

앱셸 방식

SSR과 CSR을 혼합하면 최상의 결과를 얻을 수 있다.

 

 

 

 

---

 

참고

프로그레시브 웹 앱 소개 - 프로그레시브 웹 앱 | MDN