PWA 시작하기

1. 정의

• Progressive Web Application
• 장점
  • 신속함과 신뢰성
  • 설치 가능함
  • 웹/앱 환경에 빠른 적응력

[ 참고 주소 ]

이근둥 블로그 : https://codevkr.tistory.com/85

• A~Z까지 너무나 잘 설명되어 있는 블로그

구글 코드랩 : https://developers.google.com/web/fundamentals/codelabs/your-first-pwapp/?hl=ko

• 특징

  • 프로그레시브 : 점진적인 개선을 통해 작성되므로, 어떤 브라우저를 선택하든 상관 없이 모든 사용자에게 적합합니다.

    ( ? ) : 무슨 뜻일까??

  • 반응형 : 데스크톱, 모바일 태블릿 등 모든 폼 팩터에 맞습니다.

  • 연결 독립적 : 서비스 워커를 사용하여 오프라인이나 느린 네트워크에서 작동하도록 향상됩니다.

    • 서비스워커 : 브라우저가 백그라운드에서 실행하는 스크립트이며 웹 페이지와는 별개로 작동.

    그렇다면, 서비스워커를 통해서 한다면 웹페이지를 따로 안들어가는 개념인건가?? 앱처럼 쓸 수 있는 경우?

  • 앱과 유사 : 앱 셀 모드에서 작성되기 때문에 앱 스타일의 상호작용 및 탐색 기능을 사용자에게 제공합니다.

    (오프라인에서도 동작 가능한 부분이 많음.)

  • 최신 상태 : 서비스 워커 업데이트 프로세스 덕분에 항상 최신 상태로 유지됩니다.

    (어떻게 최신 상태로 되는 거지?? 공부해야 겠다.)

  • 안전 : HTTPS를 통해 제공되므로 스누핑이 차단되며, 콘텐츠가 변조되지 않도록 보장합니다.

    (무조건 HTTPS 는 필수! HTTPS의 특징 및 원리에대해서도 공부해 보자!)

  • 검색가능 : W3C 매니페스트 및 서비스 워커 등록 범위 덕분에 애플리케이션으로 식별되므로, 검색 엔진에서 검색이 가능합니다.

  • 재참여 가능 : 푸시 알림과 같은 기능을 통해 쉽게 재참여가 가능합니다.

  • 설치 가능 : 앱 스토어에서 씨름할 필요 없이 사용자가 자신에게 가장 유용한 앱을 홈 화면에 유지할 수 있습니다.

  • 링크 연결 가능 : URL을 통해 손쉽게 공유할 수 있으며 복잡한 설치 작업이 불필요합니다.

• 단점

  • 오래된 브라우저는 지원이 안됨.

• 정리

  1. 웹 브라우저를 통해 실행하는 앱

  2. 푸시알림, 오프라인 환경 접속 등 원시 앱과 유사

  3. 서비스워커는 독립적으로 실행되며 웹 푸시, 캐싱 등 기능 제공