프로그레시브 웹 앱: 웹 개발의 미래?

프로그레시브 웹 애플리케이션 및 서비스 워커 는 상대적으로 새로운 개념이며 현재 웹사이트 및 모바일 앱의 현재 에코시스템을 파괴하고 있는 핵심 부분입니다. 이 기술은 바로 Google에서 지원하기 때문에 전환율이 크게 증가하고 이탈률이 감소했습니다. 서비스 워커와 프로그레시브 웹 앱, 그리고 이들이 모바일 애플리케이션 및 기존 웹사이트와 어떻게 다른지에 대해 자세히 알아보세요.

서비스 워커( 간단히 "SW" 라고도 함 ) 는 기존 웹사이트 페이지 및 스크립트와 함께 실행되는 독립 스크립트로 코딩되지만 인터넷의 웹사이트에서 볼 수 있는 일반적인 JavaScript에 비해 새롭고 흥미로운 기능이 있습니다.

오프라인 기능, 푸시 알림, 전체 캐싱 및 스마트폰 및 기타 장치의 하드웨어 API에 연결할 수 있는 추가 가능성을 통해 옵션은 개발자의 독창성과 디자이너의 창의성에 의해서만 제한됩니다. 기존의 웹사이트 기술과 서비스 워커를 동시에 사용하면 많은 이점이 있지만, 비즈니스 소유자의 관점에서 새롭게 부상하는 트렌드를 살펴보겠습니다.

프로그레시브 웹 앱을 사용하는 이유

• 웹사이트 및 모바일 앱 속도에 비해 속도 향상
• 페이지 크기 줄이기
• 오프라인 기능
• 특정 하드웨어 장치에 대한 액세스
• 푸시 알림
• 홈 화면에 추가

위의 목록은 비즈니스 소유자가 기존 웹사이트에 서비스 워커 와 프로그레시브 웹 앱 을 구현하는 가장 일반적인 6가지 이유입니다. 그것들을 세분화하고 6가지 핵심 사항 각각에 대해 좀 더 자세히 살펴보겠습니다.

속도 및 전환율 향상

서비스 작업자는 브라우저와 인터넷 액세스 사이에서 작동하기 때문에 방문자가 예를 들어 새 페이지를 요청하거나 링크를 클릭할 때마다 웹사이트 방문자가 웹서버에 응답을 요청할 필요가 없습니다.

인터넷 프로토콜이 작동하는 방식으로 인해 네트워크를 통과하는 각 응답에 대한 최소 시간이 있지만 서비스 워커 스크립트를 사용하면 서비스 워커 스크립트가 다음 주제에서 설명할 로컬 캐시입니다.

예를 들어, Housing.com은 프로그레시브 웹 앱 및 서비스 작업자 스크립트를 구현한 이후 페이지 로드 속도가 30% 빨라졌으며, 인도에 기반을 두고 있어 방문자의 대다수가 3G 네트워크에서 검색하고 속도가 향상되면 엄청난 결과에 도달합니다. 따라서 매우 중요합니다.

또 다른 예로는 방문자의 60% 이상이 느린 2G 네트워크 에서 검색하는 나이지리아의 선두 전자 상거래 소매업체인 Konga가 있습니다. 따라서 페이지 로드 시간을 줄임으로써 전환율과 이탈률을 크게 높일 뿐만 아니라 똑같이 중요하게, 그들은 경쟁자를 깊은 잠에 빠뜨렸습니다.

페이지 크기 줄이기

위의 요점과 긴밀하게 연결하여 서비스 워커를 사용 하면 의심할 여지 없이 모든 웹사이트 페이지 크기가 줄어들어 이탈률이 감소합니다.

이러한 개선 사항이 확인되는 이유는 서비스 작업자가 방문자의 휴대폰 및 태블릿에 웹사이트 사본을 저장하기 때문입니다. 즉, 서비스 워커가 설치되어 있고 자동으로 캐시를 업로드하도록 설정한 웹 사이트의 홈페이지를 방문하면 인터넷을 전혀 사용할 필요가 없습니다.

단순히 서비스 워커가 이미 방문한 페이지를 저장하도록 하는 것도 가능하지만 캐시의 다운로드는 사용자에게 어떤 식으로든 표시되지 않으므로 사용자가 모든 것을 다운로드하게 하는 것이 합리적입니다.

현재 일부 기업에서는 서비스 워커를 설치하면 페이지 크기가 최대 90%까지 감소했다고 보고합니다.

오프라인 기능

사용자가 페이지를 탐색하고 콘텐츠를 로드하기 위해 인터넷에 액세스할 필요가 없는 완벽하게 작동하는 서비스 작업자와 함께 웹사이트를 개발하는 것이 가능합니다. 몇 가지 요구 사항이 있지만 일단 충족되면 서비스 작업자는 오프라인과 온라인 경험을 원활하게 통합할 수 있으며 현재 웹 사이트에 게임을 추가하는 것으로 생각됩니다.

모든 웹사이트에 완전한 오프라인 경험이 필요한 것은 아니지만 Opera가 수행한 것처럼 단순히 오프라인 화면을 추가하면 사용자가 탐색 중 인터넷 액세스가 끊겼을 때 페이지에 머무를 가능성이 높아집니다.

기본 브라우저의 오프라인 메시지와 Opera가 아래에 생성한 사용자 정의 오프라인 메시지를 비교하고 차이점을 느끼십시오.

Opera의 오프라인 웹사이트 기능

크롬의 기본 오프라인 페이지

특정 하드웨어 장치에 대한 액세스

모바일 애플리케이션과 마찬가지로 서비스 워커 와 연결된 프로그레시브 웹 앱 은 모바일 카메라, 가속도계 및 기타 일반 기능과 같은 하드웨어 장치에 API 호출을 할 수 있습니다. 지금까지 지문 식별 및 이와 유사한 새롭고 복잡한 기능과 같은 고급 기능에 대한 지원은 없지만 그것은 아마도 시간 문제일 것입니다.

모바일 앱 개발은 항상 특정 유형의 비즈니스 및 제품과 관련이 있지만 웹사이트가 제공해야 하는 사용 및 설치 용이성과 함께 모바일 앱의 경험을 제공하는 오늘날 온라인에는 이미 많은 진보적인 웹 앱이 있습니다.

하지만 이 기술 자체가 글을 쓰는 시점(2015년 말 개발)에 불과 1년 남짓이라는 점을 감안하면 모든 소상공인이 참여하고 싶어하는 가장 핫한 기술이 될 기회가 많습니다.

푸시 알림

이러한 하드웨어 기능 중 하나는 푸시 알림 이며 웹 사이트 소유자가 모바일 사용자에게 최신 콘텐츠를 알릴 수 있도록 합니다. 기업의 경우 고객의 알림 피드에 액세스하는 것은 비즈니스에 큰 도움이 될 수 있습니다.

이메일 뉴스레터와 달리 사람들은 휴대전화에서 직접 푸시 알림 을 열고 클릭하는 경향이 있으며, 사용자가 마케팅 및 광고 콘텐츠를 푸시하는 앱을 알게 되기 때문에 이러한 추세는 시간이 지남에 따라 바뀔 수 있지만 현재로서는 상당히 효과적입니다.

지금까지 아프리카 전자 상거래 사이트인 Jumia는 진보적인 웹 앱과 푸시 알림으로 큰 성공을 거두었습니다. 그들은 버려진 장바구니에 담긴 상품을 구매할 것인지 묻는 기존의 이메일 방식과 비교하여 버려진 장바구니에 대한 전환율이 9배 더 높다고 보고합니다. Jumia는 또한 푸시 알림에 대한 38%의 개방률을 보았습니다. 이는 상당히 인상적이라고 말해야 합니다.

홈 화면에 추가

이것은 우리 목록의 마지막이지만 최소한은 아닙니다. 즐겨찾는 웹사이트를 휴대전화의 북마크에 추가하고 기기에 아이콘을 표시하는 것은 새로운 일이 아니지만 프로그레시브 웹 앱을 사용하면 이제 사용자에게 홈 화면에 PWA를 추가할지 여부를 묻는 메시지 가 브라우저에서 표시 됩니다. 이것은 웹사이트의 멋진 팝업 오버레이가 아니라 브라우저 자체에서 수행되기 때문에 사람들은 이 기능으로 훌륭한 결과를 보고했습니다.

Chrome 또는 Opera를 사용하여 휴대전화에서 Washington Post를 방문하면 다음과 같이 표시됩니다.

FlipKart는 홈 화면을 통해 앱을 여는 사용자의 전환율 이 70% 증가한 것을 확인했습니다. 즉, 앱을 설치한 사용자는 해당 웹사이트를 구매하고 참여하기를 열망하는 충성도가 높은 고객이라고 할 수 있습니다.

결론

아직 모든 웹 브라우저가 프로그레시브 웹 앱 과 서비스 워커를 지원하는 것은 아니지만 아마도 시간 문제일 것입니다. Internet Explorer를 사용하는 Microsoft는 향후 기술 구현에 있어 다소 모호했으며, 이것이 단지 일시적인 추세인지, 아니면 이것이 우리가 알고 있는 웹에 혁명을 일으킬지 여부를 확인하기 위해 기다리고 있을 것입니다.

Safari가 포함된 Apple은 서비스 작업자 호환성을 5년 로드맵에 추가했으므로 서비스에 긍정적인 영향을 미치면 이 기술을 목록의 맨 위에 놓을 수도 있지만 아직 그렇게 되기까지 시간이 조금 남아 있습니다. 노동자가 있습니다.