분류 html

진보적인 웹 애플리케이션(PWA)이 모바일 웹의 미래인 이유

컨텐츠 정보

  • 조회 1,048 (작성일 )

본문

프로그레시브 웹 애플리케이션 : 일반적인 모바일 웹 사이트보다 훨씬 잘 작동합니다. 


Pinterest가 모바일 웹 사이트를 점진적 웹 앱 (PWA)으로 교체하자마자 즉시 몇 가지 중요한 지표에서 엄청난 상승을 보았습니다.


원본 : https://ymedialabs.com/progressive-web-apps 


oldvsnew-pinterest 


PWA는 일반적인 모바일 사이트보다 잘 작동합니다. 기간.


PWA를 구현 한 후 다양한 KPI가 크게 개선됨을 강조하는 거의 모든 산업 분야의 성공 사례는 없습니다.

  • West Elm의 PWA 구현으로 소요 시간이 15 % 증가하고 매출이 9 % 증가했습니다.
  • 인도 최대의 전자 상거래 사이트 인 Flipkart는 사이트 이용 시간을 3 배로 늘리고 재결합 율을 40 % 높였습니다.
  • 대규모 중국 플랫폼 알리바바의 일부인 AliExpress는 신규 사용자의 전환율이 104 % 증가했습니다.

그러나 지속적인 추진력과 Android 및 iOS의 지원 증가로 인해 브랜드는 이점을 활용하는 데 시간이 오래 걸렸습니다.


우리는 PWA의 궁극적 인 가능성에 대해 약간의 혼란이 있을 수 있음을 이해합니다. 또한 모바일 에코 시스템을 현재 위치로 전환하는 데 필요한 시간 및 투자로 인한 피로를 완화 할 수 있기를 바랍니다.


Progressive Web Apps가 올바른 비타민을 섭취한 웹 사이트인 이유 


프로그레시브 웹 애플리케이션은 수년 동안 대화에 참여해 왔지만 대부분의 브랜드에서 아직 의미 있게 채택되지 않았기 때문에 많은 혜택을 누릴 수 있는 기회를 놓치게 됩니다.


실제로 PWA는 기본 앱과 유사한 경험과 기능을 모바일 웹에 제공 할 수 있으며 디지털 경험을 제공하는 매우 효율적인 방법이 될 수 있습니다.


그러나 많은 새로운 기술과 마찬가지로 악마는 세부 사항에 있습니다.

  • 우리는 "앱과 같은" 이야기를 어떻게 합니까?
  • 정확히 어떤 기능이 가능합니까?
  • 그들은 완전히 크로스 플랫폼입니까?
  • 기본 앱을 PWA로 교체해야 하나요?

비즈니스 및 기술 리더가 모바일 사용자 참여 전략에 미치는 영향을 고려할 때 이러한 질문과 더 많은 질문이 일반적입니다.


이 백서에서는 PWA에 대해보다 자세하게 살펴보고 명확한 정의를 설정하고 반대 의견을 검토하며 일련의 기술이 고객 접점의 에코 시스템에 적합한 위치에 대한 고급 지침을 제공합니다.


문장으로 PWA를 정의하자 


PWA에 대한 매우 상세하고 포괄적이며 보편적으로 합의 된 정의를 찾기는 어렵지만 Alex Russell (프랜시스 베리 먼과 함께 진보적 인 웹 앱이라는 용어를 사용함)의 인용문은 우리에게 좋은 출발점을 제공합니다.


플립 팬트 정의 :


"프로그레시브 웹 앱은 모든 비타민을 섭취한 웹사이트 일 뿐입니다." 


더 정확한 설명 :


Alex Russell 


보다 구체적으로 설명하기 위해 PWA는 일반적으로 기본 응용 프로그램과 관련된 특정 기능을 제공 할 수 있습니다. 

예를 들면 다음과 같습니다.

  • 거의 즉각적인 로딩 (두 번째 방문시)
  • 홈 화면에 앱 아이콘으로 설치
  • 전체 화면 환경을 만드는 브라우저 "크롬"/ 탐색 제거
  • 오프라인 액세스
  • 푸시 알림

YML의 관점은 PWA가 비즈니스에 영향을 줄 수 있는 실질적인 잠재력을 가지고 있어 웹 사이트를 기본 응용 프로그램처럼 작동하도록 하는 모범 사례로 기능합니다.


비교하자 : 프로그레시브 웹 애플리케이션 VS 네이티브 애플리케이션 VS 모바일 웹 사이트 


PWA와 네이티브 앱 : 잘못된 비교 


PWA의 "A"가 "앱"을 나타 내기 때문에 PWA에 대한 너무 많은 논의는 기본 모바일 애플리케이션과 비교 및 ​​대조하는 데 중점을 둡니다. 우리는 이 비교 (및 수반되는 논의)가 잘못 인도되었다고 생각합니다.


PWA는 기본 앱을 보편적으로 대체하지 않습니다.


우리가 믿는 유일한 경험은 사람들을 매번 다시 데려 오는 강력한 고객 경험입니다. 기본 앱 경험이 이 기준을 충족하면 가장 확실하게 존재해야 합니다.


이러한 경험에는 몇 가지 공통된 특성이 있습니다.

  • 금융 서비스와 같은 고주파 사용 사례를 다룹니다.
  • 웹에서 지원하지 않는 저수준 하드웨어 통합 또는 운영 체제 기능을 활용하고 있거나 앞으로 그렇게 하는 데 집중하고 있습니다.
  • 보안 강화를 위한 필요성 (또는 인식되는 이점)

기존의 기본 앱 환경에서 위의 상자 중 하나 이상을 선택하지 않은 경우 계속 존재해야 하는지 다시 고려하는 것이 좋습니다.


Hybrid vs Native, 


사용 빈도가 없거나 브라우저에서 사용할 수 없는 장치 하드웨어에 대한 낮은 수준의 액세스가 필요하지 않은 경우 어떤 가치가 있습니까?


허영 앱이라고 하는 이 앱은 시간이 지남에 따라 PWA로 대체 될 가능성이 가장 높습니다.


PWA 대 모바일 웹 : 올바른 대화 


대화가 PWA가 반응 형 모바일 웹으로 크게 업그레이드 되는 방식에 집중하는 것이 좋습니다.


앞서 공유 한 것처럼 PWA 구현 후 다양한 KPI에서 크게 개선 된 것을 강조하는 거의 모든 산업 분야에서 발표 된 사례 연구가 부족하지 않습니다.


이러한 성능 향상을 이끄는 기본 요소는 무엇입니까?


Google은 PWA가 왜 효과적인지 이해하기 위해 도움이 되는 약어를 사용합니다. 

FIRE – Fast(빠른), Integrated(통합), Reliable(신뢰성), and Engaging(참여).


FAST 


PWA는 백그라운드 처리를 활성화하여 페이지 로드 시간을 엄청나게 단축함으로써 훨씬 빠른 경험을 제공합니다.


우리 모두는 속도가 중요하다는 것을 알고 있습니다.


모바일 장치에서는 1초 지연으로도 이탈률이 거의 50 % 증가하고 전환이 20 % 감소 할 수 있습니다.


one-second-delay-ecommerce2 


Walmart는 페이지 로드 시간이 100 밀리 초마다 개선 될 때마다 최대 1 %의 증분 수익이 증가한 것으로 유명했습니다. 틴더는 PWA를 사용하여 로드 시간을 약 12 ​​초에서 5 초로 줄였습니다.


INTEGRATED 


끊임없이 진화하는 웹 기능 세트를 사용하여 PWA는 일반 웹 사이트보다 기본 하드웨어와 더 긴밀하게 통합됩니다. 궁극적으로 사용자 경험 관점에서 매끄럽고 통합 된 기본 앱처럼 느껴집니다.


RELIABLE 


캐싱은 속도에 관한 것이 아닙니다. 오프라인 또는 제한된 네트워크 및 연결 환경에서 액세스를 제공하는 것입니다.


ENGAGING 


속도와 안정성으로 사용자 참여가 증가합니다. 또한 앞에서 언급 했듯이 PWA는 푸시 알림 전송을 용이하게 하여 경험에 대한 지속적인 참여를 유도합니다.


Lancome은 푸시 알림을 통해 복구 된 카트에서 전환율이 12 % 증가했습니다.


02_graphic 3_custom 


추가 사례 연구는 Google 개발자 포털 및 PWAstats.com에서 찾을 수 있습니다.


PWA의 또 다른 주요 이점은 검색 가능성입니다. 다른 웹 사이트와 마찬가지로 웹에 존재하며 주요 검색 엔진, 소셜 공유 및 다른 웹 사이트의 링크를 통해 찾을 수 있습니다.


애플리케이션을 사용하기 전에 애플리케이션을 찾고 인증하고 설치하기 위해 기본 앱 스토어 중 하나에 가야 하는 장벽을 제거한다는 사실은 궁극적으로 컨텐츠, 유료 및 소셜 전략의 일부로 통합하는 것이 더 쉽다는 것을 의미합니다.


그것은 모든 브랜드에 대한 실질적인 가치입니다.


PWA의 주요 구성 요소 


그렇다면 PWA를 그렇게 특별하게 만드는 것은 무엇입니까? 네 가지 중요한 부분이 있습니다.


1 : 서비스 근로자(SERVICE WORKER) 


이것은 아마도 가장 중요한 구성 요소이며 웹 사이트를 앱처럼 느끼게 하는 열쇠입니다. Service Worker는 웹 사이트가 장치에서 로컬로 특정 파일이나 콘텐츠를 다운로드하여 캐시할 수 있도록 합니다.


사용자가 PWA에 처음 액세스하면 서비스 워커는 즉시 첫 번째보기 뿐만 아니라 백그라운드의 다른 콘텐츠를 다운로드하여 작업을 시작합니다. 해당 콘텐츠가 장치에 이미 캐시 되어 있으면 사이트가 훨씬 빠르게 로드 되는 것으로 보입니다.


Introduction_to_Service_Worker_ _ _Web_ _ _Google_Developers 



기본 애플리케이션을 설치할 때 생각하십시오.


많은 콘텐츠와 지원 파일이 로컬로 다운로드 및 설치되어 작업을 빠르게 시작하고 로드 할 수 있습니다. 오프라인에서도 (또는 제한된 연결 영역에서) 사용자가 콘텐츠에 액세스 할 수 있도록 하는 것도 동일한 아이디어입니다.


서비스 워커는 또한 웹 사이트가 푸시 알림을 보낼 수 있도록 하는 요소입니다.


2: HTTPS 


Service workers는 웹 사이트가 안전한 연결을 통해 제공되어야 합니다. 모든 것이 HTTPS를 통해 전달되기를 원한다는 점에서 Google의 광범위한 초점을 고려할 때 큰 문제는 아닙니다.


3: WEB MANIFEST 


앱 아이콘, 배경색, 이름 등 앱에 대한 기본 메타 정보를 제공하는 JSON 파일


4: ICON 


사용자가 홈 화면에 앱을 설치하면 사용자에게 표시되는 이미지입니다.


PWA 한계 


지속적인 추진력과 Android 및 iOS의 지원이 증가하고 있지만 오늘날 고려해야 할 브라우저와 플랫폼에는 불일치와 제한이 있습니다.


iOS 주요 제한 사항 


예를 들어, 현재 iOS에서 PWA는 오프라인 액세스를 위해 최대 50MB의 데이터만 저장할 수 있습니다. 또한 사용자가 몇 주 동안 앱을 시작하지 않으면 캐시된 파일이 삭제되어 다음 실행시 전체 다운로드가 필요합니다.


위에서 언급했듯이 Bluetooth, Touch 및 Face ID와 같은 특정 하드웨어 기능에 대한 액세스는 사용할 수 없거나 제한되어 있습니다. 추가로 고려해야 할 사항은 두 번째 방문 때까지 성능 이점이 사용자에게 분명하지 않다는 것입니다.


opentider3 



많은 속도 이점은 백그라운드에서 컨텐츠를 다운로드하는 기능에서 비롯됩니다. 즉, 사용자가 PWA를 처음 방문 할 때 여전히 초기 컨텐츠를로드해야합니다. 이는 전체 파일 크기를 작게 유지하기 위한 모범 사례를 따르거나 초기 로드를 더욱 빠르게 하기 위해 가속 모바일 페이지 (AMP)를 사용하여 완화 할 수 있습니다.


AMP + PWA는 강력한 조합이 될 수 있습니다.


pwa-homescreen-ios 


또한 Android에서는 웹 사이트가 사용자에게 홈 화면에 앱을 설치하라는 메시지를 표시 할 수 있지만 현재 iOS에는 이러한 기능이 없습니다.


대신, 사용자는 시스템 공유 기능을 수동으로 열고 "홈 화면에 추가"버튼을 찾아야 합니다.


다시 한 번, YML은 PWA의 삶에 가져올 수 있는 경험의 일관성을 높이고 한계를 줄일 것이라고 확신하는 YML의 안드로이드와 iOS 모두에서 엄청난 추진력과 지원이 증가하고 있습니다.


실제의 진보적 인 웹 애플리케이션 


날씨 회사 


weather-channel-phone 


전체 웹 사이트를 PWA로 재구성하는 대신 단일 기능인 푸시 알림으로 시작했습니다.


전 세계적으로 60 개 이상의 언어로 출시되었으며 처음 3 개월 동안 백만 개 이상의 옵트 인을 받았습니다.


이를 통해 회사는 향후 더 큰 규모의 배포에 이르는 방법을 테스트하고 배울 수 있습니다.


George.com 


Walmart 제품군의 영국 의류 브랜드 인 George.com은 PWA를 구현했으며 페이지 로드 시간이 거의 4 배 단축되고 전환율이 31 % 개선되었습니다.


george-phone 


Twitter Lite 

twitter-pwa 


트위터 라이트는 작고 사악하며 빠르며 피드를 새로 고치기 위해 풀다운 할 때 발생하는 재미있는 애니메이션을 포함하여 기본 앱의 기능을 대부분 유지합니다.


Starbucks 


starbucks-pwa 


Starbucks는 PWA를 사용하여 기본 애플리케이션의 기능 대부분을 복제했습니다.


빠르고, 모바일을 통해 주문 및 결제 할 수 있으며, 주문에 상품을 추가 할 때 가방에 상품을 보여주는 귀여운 애니메이션이 있습니다.


더 많은 예 

  • Expedia에서는 PWA를 사용하여 호텔 검색 결과 페이지를 2-3 배 가속화했습니다.
  • QR 코드 스캐너는 웹 앱이 장치 카메라에 액세스 할 수 있음을 보여주기 때문에 간단합니다.
  • 여기와 여기에 다른 잠재적 인 예가 있습니다. 두 번째 링크 인 Appscope에는 카탈로그의 앱에 대한 등대 점수가 포함되어 있습니다.
  • 또한 Moovweb은 PWA 및 기타 최신 웹 기술을 사용하여 전자 상거래 사이트 목록을 집계했습니다.


진보적인 웹 애플리케이션(PWA) 리소스 


PWA에 대해 더 많이 배우고 자하는 독자들을 위해 이 10 가지 리소스 목록을 정리했습니다.


  • PWA에 대한 Google의 공식 개발자 섹션 : 동영상, 방법 안내 및 테스트 도구를 포함하여 PWA를 위한 환상적인 종합 리소스입니다.
  • Google의 PWA '로드쇼': Chrome 개발자가 제작 한 일련의 훌륭한 동영상 중 첫 번째 동영상입니다. 전체 시리즈는 탄탄한 개요, 일부 성공적인 예제 및 일부 개발자 방법을 제공합니다.
  • Mozilla의 PWA 지침 : PWA의 잠재력을 탐구하는 개발자를위한 훌륭한 자료 모음.
  • Jason Grigsby의 Progressive Web Apps 책 : 조직에서 사례를 만드는 것부터 대담하고 새로운 방법으로 사용자에게 도달하는 것에 이르기까지 진보적 인 웹 앱의 내용, 이유 및 방법에 대한 답변입니다. 리스트 아파트는 2 장에서 발췌 한 것으로 PWA에 대한 훌륭한 개요입니다. Jason은 또한 iOS의 PWA에 대한 완벽한 지원이 중요하지 않은 이유에 대한 훌륭한 글을 썼습니다. 이 시점에서 2 년이 지났으며 iOS는 더 많은 PWA 기능을 지원하기 시작했지만 논쟁은 여전히 ​​관련이 있습니다.
  • Maximiliano Firtman : iOS 11.3에 추가 된 PWA 개선 사항에 대한 훌륭한 게시물을 보유하고 있으며 Jason Grigsby의 주장과 결합하여 계속해서 강력한 사례를 제시합니다.
  • PWA 통계 : Progressive Web Apps와 관련된 커뮤니티 기반 통계 및 뉴스 목록
  • 사용할 수 있습니까? : 개발자에게 다양한 버전의 모바일 브라우저가 지원하는 매우 특정한 기능을 제공합니다.
  • 오늘날 웹에서 할 수 있는 작업 : 현재 사용중인 브라우저의 웹 기반 기능을 보여주는 '사용할 수 있는 '보조 리소스입니다.
  • 그렇습니다. 해당 웹 프로젝트는 PWA 여야합니다. 비즈니스 리더, 제품 관리자 및 기술 의사 결정자를위한 안내서입니다.
  • 추가 PWA 리소스 : 기술 / 개발자 리소스의 잡초를 파는 기능별로 분류 된 유용한 링크 모음입니다.


결론 


PWA는 강력하고 효과적이며 빠르며 앱과 비슷합니다.


PWA 구현을 통해 크게 개선 될 수 없는 모바일 웹 속성을 상상하기는 어렵습니다. 또한 오늘날 존재하는 많은 "허영"기본 앱의 필요성을 제거 할 수 있습니다.


요컨대, 이러한 기술을 고객 접점의 에코 시스템에 통합 할 때입니다.


모바일 웹과 관련된 노력을 포함한 모든 프로젝트는 프로그레시브 웹 앱을 오래 살펴 보아야 합니다. Google의 주제 전문가 중 한 사람과 특정 상황에 대해 자세히 논의하고 싶은 경우 Google에 문의하십시오.



pwa