PWA 및 SPA 관한 쉬운이해

■ PWA란
모바일 앱과 웹 기술의 장점을 결합한 것.(웹앱)
모바일 앱과 같은 경험을 주는 최신 웹 앱
앱 아이콘, 앱 아이콘 설치 배너, ?모바일 푸시, 오프라인 경험을 제공
HTML, CSS, JS로 구현하는 웹 어플리케이션
프로그레시브 웹 앱은 브라우저 탭에서 실행할 수 있지만 설치할 수도 있음.
Service worker를 사용하여 연결 독립적이다.(오프라인이나 느린 네트워크에서 동작)

* 비주얼 스튜디오 2015 이상에서 ASP.NET CORE APPLICATION에서 개발 가능
* Manifest File 설정 필요.(JSON 파일이며, 사이트의 메타 information을 정의 한다.)
* Service worker 필요.(Script 파일 형식)
- 서비스워커는 브라우저가 백그라운드에서 실행하는 스크립트이며 웹 페이지와는 별개로 작동한다.
스크립트이긴 한데 웹 페이지와 직접적으로 상호작용할 수 없다.
서비스워커는 웹 푸시(알림), 백그라운드 동기화, 캐싱 등의 기술적 기반을 제공한다.
서비스워커는 도메인당 한 개만 등록할 수 있고 활성화 된다.
* 오래된 브라우저들은 PWA 지원하지 않음

■ SPA란
1개의 페이지만 있는 어플리케이션
SPA형태는 브라우저에 최초에 한번 페이지 전체를 로드하고, 이후부터는 특정 부분만 Ajax를 통해 데이터를 바인딩하는 방식이다.

* 단점
앱 규모가 커질수록 자바스크립트 파일 크기도 너무 커지게 된다는 것이 단점이다.
페이지를 로딩할 때, 실제로 방문하지 않을 수도 있는 페이지와 관련된 컴포넌트 코드도 불러오기 때문.


■ PWA 내용 참고 사이트
* https://developers.google.com/web/fundamentals/codelabs/your-first-pwapp/?hl=ko
* https://codevkr.tistory.com/85