Progressive Web App 간단히 알아보기

안녕하세요. 

오늘은 PWA(Progressive Web App)에 대해서 알아보도록 하겠습니다.

PWA는 재배포 하지 않아도 업데이트가 가능하고 즉시 수정이 가능해서 항상 최신상태를 유지할 수 있다는 말을 많이 들었습니다. 

또한, 오프라인/온라인 모두 사용이 가능하다는 말에 PWA가 어떤 기술이길래 가능할까 의문이 들어 알아본 내용들을 정리합니다.

PWA(Progressive Web App) 란?

• PWA는 웹의 장점과 앱의 장점을 결합한 환경입니다. 앱과 같이 설치가 필요 없고, 느린 네트워크에서도 빠르게 로드 됩니다. 

• 관련된 푸시 알림을 전송할 수 있고 홈 화면에 아이콘을 만들 수 있으며, 앱과 같이 전체화면으로 로드할 수 있습니다.

PWA의 특징

• 프로그레시브 - 어떤 브라우저에서도 똑같이 동작합니다.
• 반응형 - 데스크톱, 모바일, 태블릿 등 모든 폼 팩터에 맞습니다.
• 연결 독립적 - 서비스 워커를 사용하여 오프라인이나 느린 네트워크에서 작동하도록 향상됩니다.
• 앱과 유사 - 앱 스타일로 구현 됩니다.
• 최신 상태 - 서비스 워커 업데이트 프로세스 덕분에 항상 최신 상태로 유지됩니다.
• 안전 - HTTPS를 통해 제공되므로 스누핑이 차단되며, 콘텐츠가 변조되지 않도록 보장합니다.
• 검색 가능 - W3C 매니페스트 및 서비스 워커 등록 범위 덕분에 '애플리케이션'으로 식별되므로, 검색 엔진에서 검색이 가능합니다.
• 재참여 가능 - 푸시 알림과 같은 기능을 통해 쉽게 재참여가 가능합니다.
• 설치 가능 - 앱 스토어에서 씨름할 필요 없이 사용자가 자신에게 가장 유용한 앱을 홈 화면에 유지할 수 있습니다.
• 링크 연결 가능 - URL을 통해 손쉽게 공유할 수 있으며 복잡한 설치 작업이 불필요합니다.

PWA tutorial 시작하기

• PWA tutorial을 Google에서 한국어로 친절하게 제공하고 있습니다. 여기를 눌러 진행해주세요.

PWA 기본 개념 익히기

1. 앱 셸
   - 앱의 셸은 Progressive Web App의 사용자 인터페이스를 구동하는 데 필요한 최소한의 HTML, CSS 및 자바스크립트이며, 안정적인 성능을 보장해주는 여러 구성 요소 중 하나입니다.
   -  앱이 빠르게 로딩 되도록 구현하기 위해서 PWA는 앱의 구성요소인 앱 셸을 서비스 워커를 사용하여 캐싱합니다.
   - 즉, 네트워크를 통해 한 번 로드되고 나면 로컬 기기에 저장된다는 의미입니다.
   - 모든 UI 및 인프라는 서비스워커를 사용하여 로컬로 캐시되므로, 이후의 로드에서 Progressive Web App은 모든 것을 로드하는 대신 필요한 데이터만 검색하면 됩니다.
   
   
2. 서비스 워커
   - 서비스 워커를 가지고 앱 셸과 앱 데이터를 캐싱할 수 있으므로, 네트워크가 없는 경우에도 사용이 가능합니다.
     (정확히 말하면, 최신 데이터가 아닌 캐싱된 데이터를 사용하여  사용이 가능한 것처럼 느끼게 해줍니다.)
   - 온라인과 오프라인으로 작동하고 간헐적인 연결이나 느린 연결에서 작동할 수 있습니다.
   - 단, 서비스 워커를 지원하는 브라우저에서만 동작합니다. (글을 쓰는 현시점에서는 firefox, opera, chrome은 지원하고 safari와 edge는 준비중 이라고 합니다.)
   

3. 매니페스트 선언
   

   웹 앱 매니페스트는 원하는 영역(예: 모바일 홈 화면)에 표시되는 앱의 모양을 제어할 수 있는 기능을 개발자에게 제공하고 실행 가능한 것과 실행 방식을 지시하는 단순한 JSON 파일입니다. (manifest.json)
   웹 앱 매니페스트를 사용하면:
   • 웹 앱이 사용자의 Android 홈 화면에 널리 존재할 수 있습니다.
   • Android에서 URL 표시줄이 없는 전체 화면 모드로 웹 앱을 시작할 수 있습니다.
   • 최적의 보기를 위해, 웹 앱에서 화면 방향을 제어할 수 있습니다.
   • 웹 앱에서 사이트의 '스플래시 화면' 시작 환경과 테마 색상을 정의할 수 있습니다.
   • 홈 화면 또는 URL 표시줄에서의 시작 여부를 웹 앱이 추적할 수 있습니다.

PWA 구현 흐름

: 간단하게 PWA 구현 흐름에 대해서 알아보도록 하겠습니다.

1. 앱 셸 영역(데이터 영역을 제외한 앱의 기본 틀을 의미)을 서비스 워커를 사용하여 캐싱 합니다.
2. ajax 통신을 사용하여 실시간 데이터를 호출하고 서비스 워커를 사용하여 캐싱합니다.
3. ajax 통신을 사용하여 가져온 데이터는 항상 최신 데이터로 캐싱 됩니다.
4. 앱 셸 영역의 데이터와 ajax 통신으로 가져온 데이터 모두 최초 1회에는 네트워크가 연결되어 있어야 합니다.
5. 네트워크 연결이 불안정하거나 안될경우 최근 캐싱된 내용을 화면에 보여주고, 반복적으로 데이터를 요청합니다.
6. 네트워크 연결이 정상적으로 돌아올 경우 응답받은 실시간 데이터를 서비스 워커를 사용하여 캐싱합니다.
7. 캐싱된 최근 데이터를 화면에 보여줍니다.
   
   
   
   (pwa 동작 흐름)

PWA 사용자 관점

1. 최초에 앱을 실행할때는 다른 앱들과 마찬가지로 네트워크가 정상적이여야 캐싱할 수 있습니다.
2. 최초 실행 이후로는 앱 셸 영역 그리고 데이터 영역이 빠르게 로딩 됩니다. 
3. 하지만, 최신 데이터라고 확신할 순 없습니다.

결론

• 엄밀히 말하면, 네트워크가 불안정하고 안될 경우 정상적으로 작동하는 것은 아니고,
• 정상적으로 동작하는 것과 같은 사용자 경험을 느낄 수 있도록 프로그래밍 되어 있습니다.
• 실제 웹기술을 사용하여 앱과 같은 사용성을 느낄 수 있는 기술입니다.
• 현재는 모든 브라우저에서 지원되지 않기 때문에 많이 사용되지 않고 있지만, 모든 브라우저에서 지원이 된다면 모든 웹 사이트가 앱과 같이 진화할 수도 있다는 생각이 듭니다.

참조

• PWA tutorial, https://developers.google.com/web/fundamentals/codelabs/your-first-pwapp/?hl=ko
• 서비스워커 소개, https://developers.google.com/web/fundamentals/primers/service-workers/?hl=ko