✅ PWA란?
- 2015년 구글 크롬 엔지니어 알렉스 러셀(Alex Russell)이 고안한 개념
- 초기 아이폰에 들어갔던 웹앱을 비롯해 그 개념은 기존에도 존재해왔음
- 간단하게는 웹에서 출발해 앱으로 가는 것
- 네이티브 앱의 강력한 기능성과 웹의 뛰어난 접근성을 모두 갖춤
- 대표적 서비스로는 스타벅스, 트위터 등이 있음
=> 스타벅스 PWA : https://app.starbucks.com/
🔸 장점
- 푸시알림, 오프라인 캐시, HTTPS 사용 가능
- 홈 화면 설치 기능으로 os 응용프로그램 설치 가능
- 실시간 유지 보수 가능
- 빠른 실행속도로 네이티브 앱과 유사한 사용자 경험 제공
🔸 단점
- 앱스토어, 플레이스토어 이용불가
=> Cordova나 Capacitor을 사용해 배포 가능 - ios에서는 네이티브 기능이 제한적이다
✅ PWA의 핵심기술
🔸 PWA 필수 요소
- 서비스 워커
- 웹 브라우저 안에 있지만 웹 페이지와는 분리되어 항상 실행되는 백그라운드 프로그램
=> ex) 앱을 완전히 닫아도 푸시알림이 오는것은 백그라운드에서 서비스 워커가 항상 실행되고 있기 때문 - 일종의 프록시 서버로써 전통적인 애플리케이션이 해야하는 일을 담당
- 매니페스트
- 해당 앱이 PWA라는 것을 식별해주는 여권같은 역할
- 앱 소개 정보와 기본 설정이 담겨있는 JSON 파일
- HTTPS
- 보안을 강화한 HTTPS
- 암호화와 인증을 거쳐 보안을 강화한 웹 통신 규약
- HTTP 대비 월등한 반응속도
=> 속도비교 사이트: https://www.httpvshttps.com
🔸 PWA 중요 기능
-
푸시 알림
- 서비스워커가 백그라운드에서 실행되고 있기 때문에 사용 가능
- 서비스 차원에서는 재방문과 이용시간을 늘릴 수 있음
-
홈 화면에 추가
- 스마트폰: 홈 화면에 추가(add to home screen)
- 데스크톱: 옴니박스(omnibox)
-
웹 API
- 웹 API를 활용해 네이티브 앱처럼 위치 정보를 받거나 카메라도 작동 가능
🔹 웹API가 또 볼게 좀 있는디
-
whatwebcando
- 현재 접속 브라우저의 지원 웹API 확인
- https://whatwebcando.today
-
Project Fugu
- 구글에서 진행하는 프로젝트
- 웹에서 지원하지 않는 네이티브 앱 기능 + 네이티브 이상의 기능 개발
- https://developer.chrome.com/docs/capabilities/status?hl=ko
-
PWA builder
- MS가 주도하고 코어 기능들을 구글과 협업
- 최근 API들을 데모와 함께 조회할 수 있음
- https://components.pwabuilder.com
✅ 간단한 PWA 적용
- angular/pwa 추가
ng add @angular/pwa # 서비스 워커를 활성화
ng build # 애플리케이션을 빌드, 빌드 결과물은 /dist 폴더에 생성- angular/pwa를 추가해주면
- 프로젝트에 @angular/service-worker 패키지를 추가
- Angular CLI로 빌드할 때 서비스 워커를 활성화하도록 설정
- 서비스 워커를 로드하고 애플리케이션 최상위 프로바이더에 등록
- 서비스 워커 환경설정 파일 ngsw-config.json을 생성.
=> 이 파일은 캐싱 정책을 비롯한 서비스 워커의 동작을 정의하는 파일- 이후 실행시에, ng serve는 서비스 워커 애플리케이션에서 지원되지 않으니 아래 방법을 사용해야함
npx http-server -p 8080 -c-1 dist/appName- 이후 실행해보면 서버를 끄더라도 네트워크가 연결되지 않았다는 경고문이 아니라 화면이 나오는 것을 확인할 수 있음
- 브라우저가 애플리케이션을 렌더링하기 위한 필요한 모든 리소스들은 캐싱됨
- ngsw-config.json에 설정된 캐싱 항목들
- index.html
- favicon.ico
- 빌드 결과물(JS, CSS 번들파일)
- assets 폴더에 있는 모든 파일
- outputPath와 resourcesOutputPath로 지정된 폴더에 있는 이미지, 폰트 파일🌟 참고자료
- Do it! 프로그레시브 웹앱 만들기
- angular 공식 홈페이지
🥳믓진 개발자가 되겠어요🥳