PWA TEST 공간입니다.( PWA 공부 ) PWA TEST

Step 1: PWA란?

PWA는 ‘Progressive Web Apps’의 줄인 말로, 모바일 사이트에서 네이티브 앱과 같은 사용자 경험을 제공하는 기술입니다.
웹과 앱 모두의 장점을 결합한 제품입니다.
프로그레시브 웹 앱은 기능, 안정성 및 설치 용이성이 보장되도록 설계된 웹 애플리케이션입니다.
이 세 가지 주요 개념은 플랫폼별 애플리케이션처럼 느껴지는 경험을 만들어줍니다.

Step 2: PWA에서 구현할 수 있는 기능

◆ 푸시 알림
일반적인 앱처럼 푸시 알림을 보낼 수 있습니다.
브라우저를 닫고 있는 상태의 사용자에게 푸시 알림을 보낼 수 있기 때문에, 웹사이트와 비교하면 현격히 접촉 횟수를 늘릴 수 있습니다.
푸시 알림을 보내기 위해서는 사이트 열람시 표시되는 메시지로 사용자의 허가를 받아야 합니다.
화면에 팝업되는 형태로 ‘http : // ~~~ (사이트 URL)가 통지를 보내려고 합니다’라고 표시되어 사용자가 ‘차단’ 또는 ‘허용’을 선택합니다.

◆ 아이콘을 홈 화면에 추가
스마트폰의 홈 화면에 아이콘을 추가할 수 있습니다.
네이티브 앱과 마찬가지로 홈 화면에서 직접 액세스를 할 수 있으므로 사용자에게는 매우 유용한 기능입니다.
아이콘을 탭하는 것만으로 액세스를 할 수 있어 재방문 증가가 예상됩니다.
홈 화면에 추가하려면 사이트 열람시 나타나는 팝업에서 허가하거나 브라우저 메뉴에서 사용자가 직접 추가할 필요가 있습니다.

◆ 설치 불필요, 네이티브 앱과 같은 사용감
PWA는 앱이 아니기 때문에 사용자는 스토어에서 다운로드 및 설치하는 수고를 할 필요가 없습니다.
그러나 앱과 같은 외형과 사용감을 제공할 수 있습니다.

전체화면 모드로 표시되기 때문에 외형도 앱에 가깝습니다.
API를 복수연계하여 보다 수준높은 사용자 인터페이스를 제공할 수 있습니다.

◆ 표시속도의 고속화
페이지의 표시속도를 향상시킬 수 있습니다.
PWA에는 프리캐시 기능이 있어, 사용자가 페이지를 읽고있는 동안 다음 페이지의 데이터를 읽어들일 수 있습니다.

◆ 오프라인에서 열람이 가능
미리 페이지 정보를 읽어들이기 때문에 오프라인 상태에서도 캐시 데이터를 사용하여 사이트의 열람을 할 수 있게 됩니다.

Step 3: 일반 모바일 브라우저 및 앱과 어떻게 다른가?

◆ 모바일 브라우저와의 차이점
읽기 속도
최대치에 가까운 읽기 속도입니다.
PWA는 프리캐시 기능이 있어 페이지를 보고있는 동안 다음 페이지를 읽어들입니다.
네트워크의 품질에 관계없이 빠르게 표시되기 때문에 사용자는 스트레스없이 사이트를 열람할 수 있습니다.
또한 백그라운드에서 업데이트하기 때문에 다시 로드할 필요도 없습니다.
앱과 같은 인터페이스
기존의 모바일 브라우저에 비해 사용자 인터페이스의 자유도가 높아집니다.
전체화면 모드 표시가 가능하여 앱과 같이 사용자의 몰입감을 높일 수 있습니다.
등록 및 주문, 결제, 연락처 등의 도선을 원활하게 구축할 수 있습니다.
사용자와의 접촉 기회 증가
사용자의 허가가 있으면 앱과 같이 홈 화면에 아이콘 추가 및 푸시 알림도 가능하기 때문에, 접촉 빈도 증가로 연결됩니다.
◆ 앱과의 차이점

설치가 필요없다
가장 큰 차이점은 앱스토어를 통해 다운로드 및 설치를 할 필요가 없다는 점입니다.

개발의 자유도
앱스토어를 통할 필요가 없다는 것은 Apple과 Google의 정책에 구속될 필요가 없다는 의미입니다.
심사를 통과할 필요가 없어 개발의 자유도도 증가하고 즉시 공개할 수 있습니다.
또한 개발자의 관점에서 볼 때, 플랫폼별로 앱을 개발할 필요가 없다는 점도 매력적입니다.
하나의 PWA를 구축하는 것만으로 장치에 상관없이 일관된 내용을 표시할 수 있습니다.

Step 4: PWA를 도입할 때 주의할 점

SSL화가 필요하다
PWA는 https를 전제로 한 기술입니다.
HTTP를 통해 구축된 웹사이트라면 전체를 https로 할 필요가 있으므로 도입의 시간이 예상보다 걸릴지도 모릅니다.