프로그레시브 웹앱 (PWA)

PWA란 무엇인가?

PWA(Progressive Web Apps)는 웹과 네이티브 앱 기능 모두의 이점을 갖도록 개발된 웹앱이다. 

 

웹은 접근이 쉽고, 링크로 공유하는것이 용이하다. 

네이티브 앱은 좀더 부드러운 사용자 경험(브라우저를 사용하지 않고 아이콘을 눌러 이동)을 제공할 수 있고, 설치가능하여 오프라인에서 동작이 가능하다. 

출처 :https://web.dev/what-are-pwas/

PWA로 구현된 웹앱인지 아닌지 어떻게 판단하나? 

바로 알기는 쉽지않다. 앱이 "오프라인에서 동작, 설치가능, 쉬운동기화. 푸시알람" 등의 기능이 구현되어 있는 경우 PWA라고 볼 수 있다. 

 

<<웹 앱을 PWA로 식별되기 위해 확인해야 하는 몇 가지 핵심 원칙>>

 

Discoverability 

웹 앱이 검색 엔진에서 더 잘 표현되고 노출, 분류 및 순위를 매기기 쉬우며 브라우저에서 사용할 수 있는 메타데이터를 갖추어 특별한 기능을 제공하는 것

Installability

사용자가 홈 스크린에 앱 아이콘을 가지고, 기본 플랫폼과 잘 통합된 느낌이 나는 자신만의 네이티브 컨테이너에 앱을 열 수 있도록 하는 것.

최신 웹 앱은 Web app manifest 내부에 설정된 속성과 웹 앱 설치라는 최신 스마트폰 브라우저에서 사용할 수 있는 기능을 통해 이러한 기본 앱 느낌을 가질 수 있다.

Linkability

앱 스토어나 복잡한 설치 과정 없이도 특정 URL에서 앱에 연결할 수 있는 기능

Network independence

최신 웹 앱은 네트워크를 신뢰할 수 없거나 존재하지 않을 때에도 작동 할 수 있다.

 [ 네트워크 독립성 ]

 - 네트워크를 사용할 수 없는 경우에도 사이트를 다시 방문하여 컨텐츠를 얻는다.                                                           - 연결 상태가 좋지 않은 경우에도 사용자가 이전에 한 번 이상 방문한 모든 종류의 콘텐츠를 보여준다.
                       - 연결이 없는 경우 사용자에게 표시되는 내용을 제어한다 (서비스 워커를 통해 페이지 요청을 제한, 네트워크요청에 대한 응답을 오프라인에 저장하기 위한 캐시api, 앱 데이터를 오프라인에 저장하기위한 웹 스토리지와 IdexedDB와 같은 클라이언트 사이드 데이터 저장)

 

Progressive enhancement support 

성능이 떨어지는 브라우저에 적합한 환경을 제공하도록 개발. 개발자는 서로 다른 브라우저 구현 간의 일부 PWA 기능 및 기술 구현의 차이를 고려해야함.

Re-engageability

사용자가 앱을 보거나 기기를 사용하지 않더라도 업데이트와 새로운 콘텐츠로 쉽게 다시 참여할 수 있다는 점. 최신 웹 앱도 페이지 제어를 위한 Service Workers, 서비스 작업자를 통해 서버에서 앱으로 바로 업데이트를 보낼 수 있는 Web Push API, 웹 브라우저를 사용하지 않을 때 사용자의 참여를 유도할 수 있는 시스템 알림 API 등의 신기술을 사용할 수 있음.

 

Responsiveness 

응답성이 뛰어난 웹 앱은 미디어 쿼리 및 뷰포트 같은 기술을 사용하여 UI가 데스크톱, 모바일, 태블릿 등 모든 폼 팩터에 맞는지 확인함.

Safety 

웹 플랫폼은 HTTPS를 활용하고 보안을 염두에 두고 앱을 개발하는 한 스누핑을 방지하면서 컨텐츠가 변조되지 않도록 하는 보안 전송 메커니즘을 제공. URL이 사이트 도메인과 일치하므로 사용자가 올바른 앱을 설치하고 있는지 쉽게 확인할 수 있음.

 

PWA를 구성하는 세가지 주요 요소

- 보안 연결(HTTPS) : PWA는 신뢰할 수 있는 연결 상태에서만 동작하기 때문에, 보안 연결을 통해서 서비스를 제공해야 함. 
- 서비스 작업자(service worker) : 서비스 작업자는 백그라운드에서 실행되는 스크립트. 서비스 작업자는 네트워크와 관련된 요청의 처리를 도와준다.
- 매니페스트 파일(manifest file, 설정 파일): 이것은 제이슨(JSON, 용량이 적은 데이터를 교환하기 위한 형식) 파일이며, PWA가 표시되고 기능하는 방식에 대한 정보들이 포함되어 있는 것. 여기에서는 PWA의 이름, 설명, 아이콘, 색상 등을 지정할 수 있다.

이 모든걸 할만한 가치가 있는가?

비교적 적은 노력으로 PWA 핵심 기능들을 구현할 수 있으며, 그 이점은 거대하다.

• Service Workers 를 사용한 캐싱 덕분에 앱을 설치한 후에 로딩 시간이 줄어들어 소중한 데이터와 시간을 절약.
• 앱 업데이트가 있을 때 변경된 컨텐츠만 업데이트 할 수 있음. 반면, 네이티브 앱의 경우, 아주 작은 수정에도 사용자가 어플리케이션 전체를 다시 다운로드하도록 강제함.
• 네이티브 플랫폼에 보다 통합된 외관과 느낌 — 홈 화면의 앱 아이콘, 전체 화면으로 실행되는 앱, 등.
• 시스템 알림 및 푸시 메시지를 통한 사용자의 재 참여. 참여율이 높은 사용자와 더 나은 전환율을 이끌어 냄.

---

참고 : 
https://developer.mozilla.org/en-US/docs/Web/Progressive_web_apps/Introduction 

https://web.dev/what-are-pwas/

https://yozm.wishket.com/magazine/detail/537/