[PWA, progressive web app] 01 - 2. 프로그레시브 웹앱을 대표하는 6가지 핵심 기술

* 'Do it! 프로그레시브 웹앱 만들기' 책 + 유튜브 강의 + 구글링을 통해 개인적으로 정리한 내용입니다.

혹시나 정정해야될 내용이나 잘못된 부분이 있다면 댓글로 피드백 주시면 감사하겠습니다.

 

 

@ https://dev.to/sudhirdontha/pwa-what-is-pwa-progressive-web-app-2kmc

 

 

 

 

프로그레시브 웹앱(PWA) 필수요소

 

1. 서비스 워커(Service Worker)

2, 웹앱 매니페스트 (그냥 매니페스트라고도 부른다)

3. HTTPS(보안)

 

 

 

네이티브 앱과 같은 경험(중요기능)

 

4. 푸시 알림

5. 홈 화면에 추가

6. 웹 API (덕분에 네이티브 앱과의 간격을 좁혔다. 네이티브 앱이 제공하지 않는 기능까지도 제공하는 형태로 발전중)

 

 

 

 

 

1. PWA의 심장 '서비스 워커'(Service worker)

- 웹 브라우저 안에 있지만 웹 페이지와는 분리되어 항상 실행되는 백그라운드 프로그램

- 웹 브라우저 - 클라우드 - 서버 -> 웹페이지에서 서버까지 가기전에 서비스 워커가 끼게 되면서 일종의 프록시 서버 역할을 한다. 캐시라던지 기본적인 애플리케이션이 해야되는 기능을 서비스 워커가 담당하게 됨.

 

 

 

 

2. PWA의 여권, '웹앱 매니페스트'

- 앱 소개 정보와 기본 설정을 담은 JSON 파일(아이콘, 제목 등)

- manifest.json이라는 파일 이름으로 웹앱 매니페스트를 등록하여 PWA라는 것을 알려줘야 한다.

 

 

 

3. HTTPS

- 암호화와 인증을 거쳐 보안을 강화한 웹 통신 규양

- HTTP와 HTTPS의 차이를 간단하게 보자면

   -> HTTP 보안에 취양

   -> HTTP + Secure가 추가 된 것이 HTTPS -> 브라우저와 웹 서버 사이에 데이터를 암호화 시켜서 보안을 강화시킨다.

   -> HTTP보다 HTTPS의 반응 속도가 90% 이상 더 빠름

 

- A2HS (add to home screen)(홈 화면 추가) 기능은 HTTPS에서만 지원가능.

 

 

 

4. 푸시 알림(Push Notification)

- 푸시 알림은 사용자의 재방문을 유도하고 서비스 이용 시간을 늘리는 기능

- PWA가 실행되지 않은 백그라운드 상태에서도 알림 메시지를 발송 가능 -> 네이티브 앱만의 소유가 아니게 되었다.

 

 

 

 

5. 홈 화면의 추가 기능 (바로가기)

- 스마트폰 : H2HS(add to home screen)

- 데스크탑 : 옴니박스(omnibox)

 

- PWA가 설치 조건

-> HTTPS로 서비스해야 함

-> 매니페스트 등록

     -> start_url 오프라인 사용 가능

     -> 아이콘 이미지 192px, 512px 포함

     -> name, short_name 값을 등록해줘야 함

-> 서비스 워커 설치

-> PWA 설치 여부

 

 

 

 

 

6. 웹 API (Web API)

- 웹 API를 활용해 네이티브 앱처럼 위치 정보를 받거나 스마트폰의 카메라도 작동할 수 있다.

- 'What Web Can Do Today', 'MDN' 에서 웹 API에 대한 정보를 확인할 수 있다.

 

Web API | MDN

What Web Can Do Today

 

 

 

 

 

 

 

 

* 참고

 

PWA 홈 설치의 모든 것 (A2HS)

New capabilities status - Chrome Developers

배우다