2022년 프로그레시브 웹 앱에 대한 궁극적인 가이드 - 50개의 PWA 예제 포함

프로그레시브 웹 앱 구축에 관심이 있으십니까? 이 가이드는 시장에서 가장 좋은 PWA의 50가지 예와 함께 알아야 할 모든 것을 알려줄 것입니다!

수년 동안 우리는 논스톱으로 설교해 왔습니다 . 기본 앱이 필요합니다. 거기에는 그럴만한 이유가 있으며 우리는 여전히 그것을 지지합니다.

당사 플랫폼인 News, Canvas 및 전자상거래용 Canvas는 고객이 모바일 UX를 크게 개선하고 트래픽을 늘리며 충성도를 높이고 수익을 높이는 데 도움이 되었습니다. 기본 앱은 핵심 사용자층과 더 깊은 관계를 구축하는 데 탁월하며 충성도, 참여도, 유지율을 중시하는 모든 브랜드의 필수 요소입니다.

그러나 완벽한 것은 없습니다. 네이티브 앱은 훌륭한 웹 경험을 대체 하지 않습니다 .

기본 앱은 앱이 설치된 사용자에게만 관련이 있습니다. 웹에서 처음으로 귀하를 확인하는 신규 방문자, 가끔씩 방문하지만 아직 앱을 설치할 만큼 충분히 노력하지 않은 일반 사용자 또는 데스크탑을 사용하는 고객에게는 아무 것도 하지 않습니다.

이러한 잠재 고객도 성공에 절대적으로 중요합니다. 첫인상이 매우 중요하며 기본 앱은 유입경로의 초기 단계에서 항상 도움이 됩니다. 전체 여정에서 빠르고 부드러운 경험을 제공해야 합니다. 어떻게?

프로그레시브 웹 앱(PWA)을 입력합니다. 웹 사이트가 있고 귀하 또는 귀하의 비즈니스에 원격으로 중요하다면 PWA 가 필요 합니다.

이 기사에서 우리는 프로그레시브 웹 앱을 정의하고 가장 중요한 이점에 대해 논의하며 인터넷에서 최고의 PWA에 대한 50가지 예를 공유할 것입니다.

PWA를 구축하는 방법과 PWA가 기본 모바일 앱과 함께 작동하여 성공적인 모바일 UX 콤보를 만드는 방법에 대한 몇 가지 지침으로 마무리하겠습니다. 자세히 알아보자. 이 기사가 끝나면 프로그레시브 웹 앱 프로젝트를 시작하기 위해 알아야 할 모든 것을 알게 될 것입니다.

근본적인 질문부터 시작하겠습니다. PWA가 무엇입니까?

프로그레시브 웹 앱 이란 정확히 무엇입니까 ? PWA를 정의하자

프로그레시브 웹 앱은 웹의 장점과 이전에는 기본 앱에서만 가능했던 기능을 결합합니다.

PWA는 기존 웹사이트처럼 브라우저에 존재하며 링크 및 검색 엔진 인덱스의 웹 인프라에 완전히 연결되어 있습니다. 기본 앱과 마찬가지로 홈 화면 아이콘에서 실행하고 사용자의 기기에 푸시 알림을 보내고 순식간에 로드하고 오프라인에서 작동하도록 구축할 수 있습니다.

프로그레시브 웹 앱은 사이트 와 별개 가 아닙니다. 이는 최신 모범 사례로 사이트를 업데이트하고 서비스 워커와 같은 최첨단 웹 기술을 활용하여 모바일 브라우저 내에서 앱과 같은 경험을 제공하는 사이트의 개선 사항 입니다.

아마도 당신은 여전히 ​​그들이 정확히 무엇인지 확신하지 못할 수도 있습니다.

용어가 많이 묶여 있지만 확실한 정의가 어렵기 때문에 이것은 이해할 수 있습니다. 일을 명확히하기 위해 용어의 역사를 살펴 보겠습니다.

프로그레시브 웹 앱의 원래 정의

프로그레시브 웹 앱(Progressive Web App)이라는 용어는 2015년 Francis Berriman과 Google 엔지니어 Alex Russell에 의해 만들어졌습니다. 그들은 새로운 종류의 웹 응용 프로그램의 출현을 관찰했으며 저녁 식사를 통해 웹 응용 프로그램을 정의하고 이름을 지정하기로 결정했습니다.

그들은 다음과 같은 기준을 제시했습니다.

• 반응형: 모든 폼 팩터에 적합
• 연결 독립성 : 서비스 작업자가 오프라인에서 작업할 수 있도록 점진적으로 향상됨
• 앱과 유사한 상호 작용: Shell + Content 애플리케이션 모델을 채택하여 앱 탐색 및 상호 작용 생성
• Fresh : Service Worker 업데이트 프로세스 덕분에 투명하게 항상 최신 상태로 유지
• 안전 : 스누핑을 방지하기 위해 TLS(서비스 작업자 요구 사항)를 통해 제공
• 검색 가능: W3C 매니페스트 및 서비스 워커 등록 범위 덕분에 "애플리케이션"으로 식별 가능하여 검색 엔진에서 찾을 수 있음
• 재 참여 가능: OS의 재참여 UI에 액세스할 수 있습니다. 예: 푸시 알림
• 설치 가능: 브라우저에서 제공하는 프롬프트를 통해 홈 화면으로 이동하여 사용자가 앱 스토어의 번거로움 없이 가장 유용하다고 생각하는 앱을 "유지"할 수 있습니다.
• 연결 가능 : 마찰이 없고 설치가 필요 없으며 공유하기 쉽습니다. URL의 사회적 영향력이 중요합니다.

이러한 기준이 정의의 "웹 앱" 부분을 어떻게 충족하는지 확인할 수 있습니다.

수년 동안 우리와 다른 회사들은 기업이 웹 기술을 사용하여 앱 경험 을 만들 수 있도록 하는 플랫폼을 만들었습니다. 이것은 오늘날까지 잘 작동하지만 장단점이 있습니다. 훌륭한 기본 앱 경험을 만들기 위해 웹의 검색 가능성과 연결 가능성을 잃게 됩니다.

서비스 워커와 같은 새로운 웹 기술(나중에 다룰 예정)이 등장하여 상황이 바뀌었습니다. 따라서 개발자는 네이티브 앱 UX의 장점을 최대한 활용한 경험을 구축하고 브라우저에 넣어 웹의 모든 이점을 유지할 수 있습니다.

더 이상 평범한 모바일 웹 UX를 수용하는 동시에 사람들이 실제 거래를 위해 기본 앱을 다운로드하도록 강요할 필요가 없습니다. App Store 와 웹에서 온라인으로 브랜드와 상호작용한 모든 사람에게 훌륭한 모바일 경험을 제공할 수 있습니다.

이것이 Berriman과 Russell이 관찰한 것입니다. 그들은 아무 것도 발명하지 않았습니다. 그들은 웹의 변화를 알아차리고 이름을 지었습니다.

"진보" 부분은 어떻습니까?

이러한 맥락에서 이는 앱이 점진적인 향상 으로 구축되었음을 의미합니다 . 이것은 모든 사람에게 효과가 있지만 고급 장치에서 업그레이드 및 향상되는 "기준" 경험을 구축하는 데 중점을 둔 설계 기술입니다. 프로그레시브 웹 앱의 경험은 모든 사용자에게 동일할 필요는 없으며, 사용자가 부여한 권한과 장치의 성능에 따라 조정됩니다.

그렇다면 Berriman과 Russell의 정의가 충분합니까? 문제는 실제로 이러한 기준을 모두 충족하는 PWA가 거의 없다는 것입니다. 그것들은 위시리스트, 목표로 삼을 대상, 또는 모범 사례에 가깝습니다.

프로그레시브 웹 앱에 대한 Google의 정의

Microsoft는 한동안 PWA에 열광했습니다. 애플은 어느 정도 설득력을 얻었고 지금은 (대부분) 참여하고 있습니다. 하지만 빅 테크 분야에서 처음부터 PWA를 옹호한 것은 Google이었습니다.

즉, Google 자체는 정의에 대해 100% 확신하지 못하는 것 같습니다. 2015년에 그들은 10개의 특성 목록을 발표한 다음 6개로 줄인 다음 3개의 새로운 특성을 추가했습니다.

현재 Google의 프로그레시브 웹 앱 정의에는 세 가지 기둥이 있습니다. 소개 페이지에서 PWA는 다음과 같다고 명시되어 있습니다.

“ 능력, 신뢰성 , 설치 가 가능하도록 설계된 웹 응용 프로그램 . 이 세 가지 기둥은 플랫폼별 애플리케이션처럼 느껴지는 경험으로 변환합니다.”

이것은 더 유용하지만 너무 광범위하기 때문에 그다지 유용하지 않습니다. 그러나 PWA가 전통적으로 기본 플랫폼과 독점적으로 연관되었던 경험을 웹에 가져오고 있다는 핵심 요점을 암시합니다.

프로그레시브 웹 앱의 기술적 정의

PWA를 정의할 수 있는 세 번째 방법은 UX 기준이 아닌 순수하게 기술적인 기준을 지정하는 것입니다.

이것이 웹 개발자이자 작가인 Jeremy Keith가 2017년 블로그 게시물 What is Progressive Web App? 에서 시도한 것입니다. .

Keith는 PWA 정의에 대한 혼란은 근거가 없으며 기본적으로 세 가지 기준이 충족되어야 한다고 생각합니다.

1. HTTPS – PWA는 HTTPS를 사용하는 보안 서버에서 실행되어야 합니다. 서비스 워커는 잠재력에 필수적이며 HTTPS가 있는 경우에만 사용할 수 있습니다.
2. 서비스 워커 – 기본적으로 기본 브라우저 "스레드"와 별도로 실행되는 JavaScript 파일이며 개발자가 앱이 네트워크 요청 및 캐싱을 처리하는 방법을 제어할 수 있도록 합니다. 이는 PWA의 놀라운 속도와 오프라인 기능을 구동하는 데 도움이 됩니다.
3. 웹 앱 매니페스트 – 이름, 작성자, 아이콘, 설명 및 실행 리소스와 같은 세부 정보를 포함하여 브라우저에 애플리케이션 설명을 제공하는 JSON 파일입니다. 이렇게 하면 응용 프로그램을 검색할 수 있습니다.

Keith는 이것이 최소한의 기본적인 정의라고 계속해서 설명합니다. PWA는 훨씬 더 많은 기능을 수행할 수 있지만 컷을 만들기 위해서는 이 세 가지 기술 기준을 충족 해야 합니다 .

그래서 우리는 원래의 관찰/열망 정의, Google의 UX 중심 정의 및 최소한의 기술 정의를 보았습니다. 우리는 무엇을 추측할 수 있습니까? 여전히 약간의 모호함이 있을 수 있지만 이제 우리는 프로그레시브 웹 앱이 무엇인지에 대해 좋은 아이디어를 얻었습니다.

PWA는 이러한 특성을 달성하기 위해 최첨단 웹 기술을 사용하는 현대적이고 안전하며 빠르게 로드되는 웹사이트입니다. 기존 웹사이트와 달리 기본 앱처럼 작동하고 사용자에게 느껴지며 그 과정에서 브라우저 탭을 "이스케이프"합니다.

Alex Russell은 다음과 같이 말합니다.

"이러한 앱은 매장을 통해 패키징 및 배포되지 않으며, 모든 적절한 비타민을 섭취한 웹사이트일 뿐입니다."

이것은 그것을 넣는 좋은 방법입니다. PWA는 웹의 최신 세대입니다. 최신 브라우저 기술의 잠재력을 활용할 수 있는 웹 앱입니다. 자신의 웹사이트를 PWA로 전환하여 최적의 성능을 발휘하는 데 필요한 "비타민"을 제공합니다.

이제 프로젝트에 영감을 주는 50개의 PWA 예제를 살펴보기 전에 프로그레시브 웹 앱 빌드의 이점으로 넘어갈 것입니다.

프로그레시브 웹 앱 이점

이전에 웹사이트가 있고 그것이 어떤 식으로든 비즈니스 성공과 연결되어 있다면 PWA를 구축해야 한다고 말했습니다.

대담한 말처럼 보일 수 있지만 사실입니다. 왜요?

간단히 말해서, PWA를 구축 하지 않으면 고객, 수익 및 성장을 테이블에 남겨둘 가능성이 높습니다. Google 웹 팀의 Pete LePage와 Sam Richard는 다음과 같이 말했습니다.

“숫자는 거짓말을 하지 않는다! Progressive Web Apps를 출시한 회사는 인상적인 결과를 보았습니다. 예를 들어 Twitter는 세션당 페이지 수가 65% 증가하고 트윗이 75% 증가했으며 이탈률이 20% 감소하는 동시에 앱 크기를 97% 이상 줄였습니다. PWA로 전환한 후 Nikkei는 자연 트래픽이 2.3배, 구독이 58%, 일일 활성 사용자가 49% 증가했습니다. Hulu는 플랫폼별 데스크톱 경험을 Progressive Web App으로 교체했고 재방문이 27% 증가했습니다.”

이것은 표면을 긁을 뿐입니다.

PWA 출시의 직접적인 결과로 다른 유명 브랜드들이 달성한 결과를 살펴보겠습니다.

• Alibaba , 모바일 웹 전환율 76% 증가, iOS에서 14% 더 많은 활성 사용자, Android에서 30% 증가
• Debenhams 는 모바일 수익이 40% 증가하고 전환이 20% 증가했으며 시장 이상의 온라인 성장을 보였습니다.
• Pinterest 는 총 소요 시간 40% 증가, 사용자 생성 광고 수익 44% 증가, 핵심 참여 60% 증가를 확인했습니다.
• Forbes 는 사용자당 세션이 43%, 광고 조회가능성이 20%, 참여가 100% 증가했습니다.
• BMW 는 판매 사이트에 대한 CTR이 30% 증가하고 로드 시간이 4배 빨라졌으며 모바일 사용자가 50% 증가했으며 자연 트래픽이 49% 증가했습니다.
• MakeMyTrip 은 페이지 속도를 38%, 전환율을 3배, 쇼핑객 세션을 160% 증가시켰습니다.
• AliExpress 는 신규 사용자의 전환율을 104%(iOS의 경우 +82%) 높였으며 세션당 소요 시간이 74% 증가했으며 세션당 방문 페이지 수는 2배 증가했습니다.
• Housing.com 은 38% 더 많은 전환, 10% 더 긴 평균 세션, 40% 더 낮은 이탈률 및 전체 30% 더 빠른 페이지 로드 시간을 보았습니다.
• Wego 는 광고 CTR을 3배로 늘렸고 전체 방문자 수는 26%, 전환수는 95% 증가했습니다. iOS에서는 전환율이 50% 증가하고 세션 시간이 35% 증가했습니다.
• Treebo 는 전년 대비 전환수가 4배 증가했습니다. 반복 사용자는 3배 더 높은 전환율을 보였습니다.
• Tinder 는 로드 시간을 11.91초에서 4.69초로 절반 이상 줄였으며 기본 앱보다 90% 더 작은 PWA로 전반적으로 참여도를 높였습니다.

어떻게 이 모든 놀라운 결과가 가능합니까? 많은 부분이 PWA가 훨씬 더 나은 사용자 경험을 제공하고 그로부터 훌륭한 비즈니스 결과가 나온다는 사실로 귀결됩니다.

하지만 그것보다 더 많은 것이 있습니다. 가장 중요한 것인 속도부터 시작하여 몇 가지 주요 프로그레시브 웹 앱 이점을 더 자세히 살펴보겠습니다.

PWA는 번개처럼 빠릅니다.

현대 소비자는 즉각적인 로딩을 기대합니다. 무언가가 심장 박동에로드되지 않으면 많은 사람들이 아마도 영구적으로 관심을 잃을 것입니다. 이것은 자명하며 수많은 데이터에 의해 지원됩니다.

• 거의 50%의 사용자가 모바일에서 가장 큰 불만은 느린 페이지 로드를 기다리는 것이라고 말합니다(출처)
• 2초 이내에 로드되는 페이지의 이탈률은 9%이고 5초가 걸리는 페이지의 이탈률은 38%입니다(출처).
• "전환율의 급격한 감소"는 평균 로드 시간이 1초에서 4초로 증가하는 것과 관련이 있습니다(출처).
• 로드 시간이 1초 개선될 때마다 전환율이 2% 증가하는 반면 100밀리초 개선은 최대 1% 더 많은 수익 증가를 생성합니다(출처).

기본적으로 사이트 로드가 빠를수록 좋습니다. 고객/독자/사용자를 기다리게 하면 그들 중 상당한 비율이 이탈하고 돈을 주지 않을 것입니다.

사이트 속도를 개선하면 전반적으로 더 나은 결과를 얻을 수 있습니다. 그게 전부입니다.

그렇다면 PWA는 이를 달성하는 데 어떻게 도움을 줄 수 있습니까? 프로그레시브 웹 앱은 빠릅니다. 정말 빠릅니다.

예를 들어 Pinterest는 "대화형 시간" 로딩 시간을 느린 23초에서 단 5.6초로 줄였습니다. 이것은 느린 3G 연결을 통한 평균 Android 하드웨어였습니다. 이는 주요 지표에 긍정적인 영향을 미쳤습니다.

나쁘지 않아. Pinterest의 결과는 전혀 이상하지 않습니다.

스트리밍 플랫폼 ZEE5는 PWA를 구축하여 사이트 속도를 3배로 높이고 버퍼링 시간을 절반으로 줄였습니다. Uber의 PWA는 2G 네트워크에서 3초 이내에 로드됩니다. Forbes는 이전 모바일 사이트에서 모바일 로딩 시간을 6.5초에서 PWA로 단 2.5초로 줄였습니다.

훌륭하고 잘 설계된 프로그레시브 웹 앱을 빌드하면 속도 향상이 보장 됩니다.

프로그레시브 웹 앱이 왜 그렇게 빠릅니까?

PWA는 가장 중요한 서비스 작업자 덕분에 매우 빠릅니다. Jason Grigsby는 그의 훌륭한 책 Progressive Web Apps에서 다음과 같이 말했습니다.

“프로그레시브 웹 앱은 서비스 워커를 사용하여 매우 빠른 경험을 제공합니다. 서비스 워커를 통해 개발자는 브라우저가 로컬 캐시에 저장해야 하는 파일과 브라우저가 캐시된 파일에 대한 업데이트를 확인해야 하는 상황을 명시적으로 정의할 수 있습니다. 로컬 캐시에 저장된 파일은 네트워크에서 검색된 파일보다 훨씬 빠르게 액세스할 수 있습니다."

Grigsby는 계속해서 다음과 같이 설명합니다.

“누군가 프로그레시브 웹 앱에서 새 페이지를 요청하면 해당 페이지를 렌더링하는 데 필요한 대부분의 파일이 이미 로컬 장치에 저장되어 있습니다. 이것은 브라우저가 다운로드해야 하는 모든 것이 해당 페이지에 필요한 증분 정보이기 때문에 페이지가 거의 즉시 로드될 수 있음을 의미합니다."

네이티브 앱 의 전통적인 장점 중 하나는 번개처럼 빠르다는 것입니다. 유사한 방식으로 이를 달성합니다. 앱을 실행하는 데 필요한 모든 파일은 앱을 설치할 때 다운로드되며 새 데이터를 검색하기만 하면 됩니다. 서비스 워커는 프로그레시브 웹 앱이 웹에 유사한 인상적인 성능을 제공할 수 있도록 합니다!

PWA는 웹에서 앱과 같은 UX를 제공합니다.

우리가 이미 논의한 속도는 분명히 UX의 큰 부분입니다. 하지만 다른 중요한 요소가 있으며 PWA도 여기에 도움이 됩니다.

네이티브 모바일 앱은 오랫동안 모바일 UX의 황금 표준이었습니다. 그들은 여전히 ​​(최소한 어떤 면에서는) 있지만 PWA는 이제 브라우저에서 직접 느낌과 기능의 대부분을 일치시킬 수 있습니다.

예를 들어 PWA는 다음을 수행할 수 있습니다.

• 오프라인 또는 열악한 네트워크 조건에서 작업(다음에 자세히 설명)
• 사용자의 장치에 설치되고 기본 앱과 같은 홈 화면 아이콘을 통해 액세스
• 기기의 잠금 화면에 푸시 알림 보내기(안타깝게도 Android에서만)
• 기본 앱을 모방한 탐색 구조로 전체 화면의 "몰입형" 경험을 제공하도록 개발
• 네이티브 앱처럼 애니메이션 활용
• 카메라 및 GPS와 같은 장치의 하드웨어에 액세스할 수 있도록 개발

초기 모바일 웹은 꽤 거칠었습니다. 데스크톱 브라우저의 오래된 패러다임은 실제로 맞지 않는 스마트폰에 "붙여 고정"되었습니다. 반응형 디자인 시대는 이를 크게 개선했지만 항상 부족한 점이 있었습니다.

네이티브 앱은 스마트폰용으로 명확하게 구축되었습니다. 그들은 항상 장치의 경험에 더 잘 맞았습니다. PWA는 이 경계를 흐리게 했지만 경험의 측면에서 구분하기 어려울 수 있습니다.

예를 들어 – Instagram Lite, Google Maps Go 또는 Twitter Lite를 사용한 적이 있습니까?

Google Play 스토어에서 다운로드하여 확인할 수 있으며 다른 기본 앱과 같은 느낌을 받을 수 있습니다.

이러한 기본 기본 앱의 더 가볍고 간결한 버전이라고 가정하면 용서받을 수 있습니다. 당신이 짐작할 수 있듯이 – 그들은 프로그레시브 웹 앱입니다.

이것은 우리 모두가 알고 사랑하는 기본 앱 경험을 재현하기 위한 PWA의 잠재력을 보여줍니다. 잠시 후에 예제에 대해 알아보면 우리가 의미하는 바를 정확히 알 수 있을 것입니다!

참고: 이러한 PWA가 Google Play 스토어에 게시되어 있음을 눈치채셨을 것입니다. Google은 2019년 초에 PWA에 Play 스토어를 열었습니다! 이것은 진정한 크로스 플랫폼 애플리케이션으로서 PWA의 미래에 대해 그들이 얼마나 확신하고 있는지를 보여줍니다. 거기에 PWA를 설치하려면 몇 개의 고리를 건너뛰어야 하지만 확실히 가능합니다. 현재로서는 이것이 iOS 앱 스토어에서 가능할지에 대한 Apple의 정보는 없습니다.

PWA는 신뢰할 수 있습니다.

우리 모두는 불안정한 모바일 연결에서 웹 사이트 또는 웹 앱을 사용하려고 시도한 경험이 있습니다. 재미없어

브라우저가 로컬로 캐시해야 하는 대상을 구체적으로 정의하는 서비스 작업자에게 다시 한 번 감사드립니다. PWA는 사용자의 연결 상태가 좋지 않은 경우에도 빠르고 완전한 경험을 제공하도록 구축할 수 있습니다.

이것은 또한 한 단계 더 나아갈 수 있습니다. 전체 응용 프로그램이 처음 방문할 때 다운로드되어 저장되는 "사전 캐싱"을 통해 PWA도 완전히 오프라인으로 작동할 수 있습니다!

얼마나 많은 사람들이 여전히 시골 지역에 살고 있고 서비스가 열악한 지역에 살고 있으며 수십억 명 정도가 향후 몇 년 동안 처음으로 온라인에 접속하는 것을 고려할 때 이것은 정말 중요합니다.

PWA는 안전하고 효율적이며 적응 가능합니다.

서비스 작업자가 작업을 수행하려면 웹사이트가 HTTPS로 완전히 안전 해야 합니다 .

바라건대 이미 하고 있지만 PWA를 구축하지 않으면 사이트를 100% 안전하게 만드는 데 필요한 모든 작업을 수행해야 합니다.

PWA도 매우 효율적 입니다. 사람들이 기본 모바일 앱을 다운로드하지 못하게 하는 핵심 요소는 장치의 사용 가능한 저장 공간입니다. The PWA Book의 저자들은 다음과 같이 말했습니다.

“그들은 카메라, 컴퓨터, 메모장, 보조 장치와 같은 모바일 장치를 가장 중요하게는 기억의 보고처럼 취급합니다. 앱을 다운로드하는 것이 소중한 사진이나 메시지를 희생해야 한다는 의미라면 세 번 생각하고 예를 클릭합니다.”

PWA는 사람들에게 그렇게 어려운 결정을 내리도록 강요하지 않습니다. 기본 앱보다 훨씬 가벼우며 설치 프로세스의 마찰이 적습니다(버튼을 한 번 탭하면 홈 화면에 바로 가기가 생성됨). PWA는 장치에서 약간 의 공간을 차지하지만 비교하면 무시할 수 있습니다.

이러한 효율성을 주도하는 서비스 작업자는 서버 부하를 줄이고 성능 저하 및 집중 기간 동안 충돌 위험을 최소화하는 책임도 있습니다.

프로그레시브 웹 앱도 적응력이 뛰어납니다. 웹 기반이므로 기본 모바일 앱보다 쉽게 ​​유지 관리, 업데이트할 수 있습니다.

빠르게 이동할 수 있는 항목을 변경하거나 업데이트하려는 경우 App Store 게이트키퍼를 처리하거나 사용자가 수동으로 업데이트하도록 요구하거나 전문 네이티브 앱 개발자와 계약할 필요가 없습니다.

오늘날 사이트를 업데이트하는 것만큼 쉽습니다. 업데이트(서버에 배포)는 사용자가 거의 즉시 사용할 수 있습니다.

PWA를 사용하면 푸시 알림으로 사용자의 참여를 유도할 수 있습니다.

우리는 수년 동안 푸시 알림의 힘에 대해 이야기해 왔습니다. 모바일에서 청중과 소통하고 소통할 수 있는 가장 좋은 방법입니다. 이를 사용하여 사용자를 업데이트하고, 앱으로 다시 유도하고, 제안 및 제품을 홍보하고, 일반적으로 바쁜 삶에서 가장 먼저 염두에 둘 수 있습니다.

다음은 다양한 비즈니스에서 푸시 알림을 사용하는 방법에 대한 몇 가지 예입니다.

• 뉴스 게시자

"속보, X와 Y가 방금 일어났습니다!"

푸시 알림은 디지털 게시자에게 적합하며 트래픽을 다시 주요 뉴스로 유도하고 시간에 민감한 속보로 사용자에게 알릴 수 있습니다.

• 전자 상거래 상점

"특별 제안 / 장바구니를 버리셨습니다 / 상품이 발송되었습니다"

푸시는 전자 상거래에서 훌륭하게 작동합니다. 쇼핑 앱은 정기적으로 알림을 보내 사용자에게 제안 및 신제품에 대해 알리고, 배송 프로세스를 최신 상태로 유지하고, 앱 전용 특별 쿠폰 코드를 제공합니다.

• 소셜 플랫폼 및 커뮤니티

"친구가 방금 메시지를 보냈습니다/친구 요청/답장을 보냈습니다"

우리 모두는 이전에 소셜 플랫폼에서 푸시 메시지를 경험했을 것입니다. 소셜 앱이 플랫폼으로 다시 돌아가 다른 사용자와 소통하고 상호 작용하는 데 사용하는 비밀 요소입니다.

다음은 몇 가지 사용 사례입니다. 그러나 실제로 푸시 알림은 모든 비즈니스에 큰 도움이 될 수 있습니다. 그것들은 네이티브 앱을 구축해야 하는 가장 강력한 이유 중 하나였습니다.

다시 한 번 우리 친구 서비스 직원에게 감사드립니다. 푸시 알림을 보내기 위해 더 이상 기본 앱이 필요하지 않습니다. 웹사이트에서 보낼 수 있습니다(PWA로 전환하는 경우).

푸시 알림은 남용되지 않고 적절하게 사용해야 하지만 많은 이점을 가져올 수 있으며 PWA를 구축하는 데 큰 이점이 있습니다.

예를 들어 PWA를 구축한 후 Lancome은 푸시 알림을 탭한 소비자의 8%가 구매를 하고 푸시 알림을 통해 회수된 장바구니의 전환율을 12% 향상시키는 것을 확인했습니다.

또 다른 하나는 사우디 아라비아의 선도적인 전자 소매업체인 eXtra Electronics입니다. eXtra는 웹 푸시를 통해 도착하는 사용자로부터 100% 더 많은 매출을 올렸고 푸시 알림을 선택한 사용자는 4배 더 자주 반품하고 2배 더 많은 시간을 사이트에서 보낸다는 사실을 알아냈습니다. 최고 비즈니스 개발 책임자 Mujeed Hazzaa는 다음과 같이 말했습니다.

“푸시 알림은 모바일 참여 전략의 큰 부분입니다. 고객과 소통하는 보다 개인적인 방법입니다. 이는 우리의 수익에 매우 중요합니다.”

사이트를 프로그레시브 웹 앱으로 전환하면 비즈니스에서도 강력한 결과를 얻을 수 있습니다. 한 가지 큰 주의 사항이 있습니다. Android에서만 사용할 수 있습니다. iOS는 지원하지 않으며 지원 여부는 누구나 짐작할 수 있습니다. 푸시 알림이 중요하고 모든 사용자에게 푸시 알림을 보내려면 기본 모바일 앱을 빌드해야 합니다.

프로그레시브 웹 앱은 귀하의 비즈니스를 성장시킬 것입니다

귀하의 사이트를 프로그레시브 웹 앱으로 전환하는 가장 중요한 이점을 살펴보았습니다.

결론은 웹 사이트가 있는 모든 비즈니스에 완전히 의미가 있다는 것입니다. 이를 통해 전체 웹 UX를 업그레이드하고 주요 지표 개선이 거의 보장되는 빠르고 현대적인 경험을 제공할 수 있습니다.

PWA 구축의 단점은 무엇입니까?

건물을 짓는 데 투자해야 하는 시간과 돈을 제외하고는 아무 것도 없습니다. 그럼에도 불구하고 PWA는 상대적으로 저렴하고 시간이 지남에 따라 비용을 지불할 가능성이 매우 높습니다. 특히 사이트가 광고, 전자 상거래 또는 멤버십을 통해 모든 종류의 수익에 연결되어 있는 경우에 그렇습니다.

여전히 설득력이 필요하십니까?

몇 가지 예를 들어 모든 것을 연결해 보겠습니다. 우리는 인터넷에서 최고의 프로그레시브 웹 앱 예제 50개를 강조 표시하고 지금까지 논의한 내용을 직접 보여드릴 것입니다.

프로그레시브 웹 앱의 예: 2020년 인터넷 상의 50가지 최고의 PWA

인상적인 PWA를 개발하려는 경우 첫 번째 단계는 영감을 얻기 위해 성공적인 프로그레시브 웹 앱 예제를 살펴보는 것입니다.

영감을 주기 위한 사명의 일환으로 현재 최고의 PWA 모델 예 50개를 수집했습니다. 자신의 비즈니스와 가장 관련이 있는 섹션으로 이동하거나, 눈에 띌 때까지 목록을 훑어보거나, 모든 프로그레시브 웹 앱 예제를 읽고 좋은 개요를 얻을 수 있습니다!

최고의 PWA 사례 50가지를 살펴보겠습니다.

전자 상거래 및 소매

스타벅스

세계에서 가장 인기 있는 커피 체인 중 하나인 Starbucks는 충성도 프로그램과 간편한 주문 프로세스를 제공하여 고객 참여를 강화하기 위해 PWA를 개발했습니다.

이 앱은 기기에 관계없이 더 나은 참여를 유지하기 위해 기존 모바일 앱을 대체하도록 설계되었습니다.

사용자는 먼저 고객이 스마트폰을 통해 주문할 때 무료 음식과 음료, 생일 선물, 리필 및 지불 옵션을 사용할 수 있는 리워드 섹션을 볼 수 있습니다.

나머지 앱 페이지에는 맞춤 주문, 매장 가용성, 배송 세부 정보 및 앱 메뉴가 있습니다.

바리스타에게 주문하는 것처럼 좋아하는 음료를 주문하면 크기, 추가 기능 및 샷 옵션을 사용자 지정할 수 있습니다. 스타벅스는 또한 식단을 모니터링하는 사람들을 위해 영양 정보, 성분 및 알레르겐 섹션을 추가합니다.

이 전자 상거래 PWA에서 우리가 좋아하는 점:

• 약한 네트워크 연결에서도 잘 작동
• Spotify, Lyft 및 Ford와 같은 다른 브랜드의 다른 플랫폼 및 서비스와 완전히 통합됨
• 원활한 모바일 결제 및 결제 프로세스
• 매우 사용자 친화적인 디자인

주미아

알리바바가 중국이라면 주미아는 아프리카다. 이 성공적인 온라인 마켓플레이스는 2012년 나이지리아에서 처음 출시된 후 빠르게 아프리카의 전자 상거래 산업을 인수했습니다.

2016년에는 사하라 사막 이남 지역의 불안정한 인터넷 연결에 대한 해답으로 PWA를 출시했습니다. PWA를 통해 데이터 캡이 있는 2G 네트워크에 의존하는 시장의 상당 부분을 차지할 수 있었습니다.

PWA를 도입한 것은 큰 데이터 대역폭을 사용하지 않고도 앱과 같은 사용자 경험을 제공할 수 있는 완벽한 솔루션이었습니다.

결과? Google에 따르면 이 회사는 전환율을 33% 높이고 사용자를 12배 더 늘렸습니다(네이티브 앱에 비해). 또한 반송률과 사용자 장치 스토리지 요구 사항을 크게 줄였습니다.

이 전자 상거래 PWA에서 우리가 좋아하는 점:

• 안정적인 오프라인 액세스
• 빠른 검색 기능
• 빠른 로딩 프로세스
• 쉬운 설치

OLX.in

온라인 마켓플레이스용 PWA에 관해서는 인도의 광고 광고 회사인 OLX.in을 신뢰하십시오. 부동산에서 패션에 이르는 강력한 카테고리를 통해 판매자와 구매자는 회사의 PWA와 더 잘 어울립니다.

사용자는 특정 제품을 검색하거나 판매자로부터 좋은 거래를 얻을 때 앱 사용의 용이성을 쉽게 알 수 있습니다.

OLX는 Google에서 보고한 바와 같이 PWA로 전환한 이후 광고에서 더 높은 CTR과 이탈률이 80% 크게 감소했다고 밝혔습니다.

이 전자 상거래 PWA에서 우리가 좋아하는 것:

• 오프라인 모드에서도 푸시 알림
• 판매자를 위한 손쉬운 카메라 통합 기능
• 검색 기록 기능

플립카트

인도 전자 상거래 분야의 또 다른 경쟁자는 Flipkart가 PWA를 통해 온라인 쇼핑 경험을 계속 재정의하고 있습니다.

사용자가 앱을 아래로 스크롤하면 고객이 앱을 탐색하고 더 많은 시간을 보내도록 유도하기 위해 제품 범주, 제한된 제안, 베스트셀러 및 할인이 표시됩니다.

Flipkart의 PWA는 Flipkart Lite를 통해 2015년에 시작되었습니다. 이 회사는 대부분의 지역에서 인터넷 연결이 끊긴 경우에도 인디언들이 보다 쉽게 ​​쇼핑할 수 있도록 하고 싶었습니다.

이 전자 상거래 PWA에서 우리가 좋아하는 것:

• 최신 뉴스 및 업데이트에 대한 푸시 알림은 일관적입니다.
• 온라인 구매 프로세스 간소화
• 검색 기능이 정확합니다.

순수한 공식

건강 보조 식품 시장이 그 어느 때보 다 경쟁이 치열 해짐을 깨닫고 미국 기반 Pure Formulas는 자체 PWA 출시와 관련하여이 업계의 개척자로 간주됩니다.

웹사이트와 모바일 앱이 느린 체크아웃 프로세스로 인해 매우 높은 이탈률을 겪고 있음을 발견한 후 회사는 완전한 처리를 제공하는 PWA를 개발했습니다.

더 높은 전환율과 평균 주문 가치(AOV) 증가를 보고했습니다.

이 전자 상거래 PWA에서 우리가 좋아하는 점:

• 매우 편리한 체크 아웃 프로세스
• 미니멀리즘 디자인
• 매우 가벼운 장치 저장 요구 사항
• 매우 안전한 거래

알리 익스프레스

응답성이 뛰어난 PWA를 갖춘 Ali Express는 오늘날 B2C 거래에 가장 수요가 많은 앱 중 하나로 간주됩니다.

회사의 광범위한 제품 범주 덕분에 사용자는 PWA를 사용하여 페이지 로딩 속도를 늦추지 않고 수천 가지 옵션을 탐색할 수 있습니다.

출시 이후 AliExpress는 PWA 덕분에 더 나은 재참여 및 전환 통계를 경험했다고 발표했습니다.

이 전자 상거래 PWA에서 우리가 좋아하는 점:

• 간편한 제품 탐색
• 더 빠른 로딩 시간
• 사용자 친화적인 레이아웃

알리바바

Jack Ma의 Alibaba Group은 Alibaba PWA의 성공에 대해 더 이상 소개할 필요가 없습니다. B2B 전자 상거래 앱은 모든 PWA에 이상적인 모델입니다. 빠르고, 반응이 빠르고, 가벼우며 매우 매력적입니다.

Alibaba는 모바일 웹 및 모바일 앱 출시 측면에서 성공했습니다. 그러나 개선된 참여를 통해 시장의 큰 부분을 차지해야 했습니다. 그리고 회사의 PWA는 이에 대한 완벽한 솔루션이었습니다.

Google에 따르면 총 전환수가 76% 증가했다고 보고했습니다.

이 전자 상거래 PWA에서 우리가 좋아하는 점:

• 간편한 제품 탐색
• Feeds, Messenger 및 My Alibaba 계정과 같은 웹사이트 도구와 통합
• 더 빠른 로딩 시간

표적

경쟁업체에 뒤지지 않기 위해 미국에서 8번째로 큰 소매 체인인 Target은 고객 분석 연구에 신속하게 대응했습니다. 2015년에 고객이 모바일 장치에서 여정을 시작한 다음 컴퓨터를 사용하여 구매한다는 사실을 발견했습니다.

경영진은 PWA 도입을 생각했고 그 이후로 앱 사용자가 엄청나게 증가했으며 다양한 장치에서 사용자를 소외시키지 않고 온라인 거래가 크게 개선되었습니다.

이 전자 상거래 PWA에서 우리가 좋아하는 점:

• 간편한 장바구니 추가 옵션
• 크기에 관계없이 빠른 로딩 이미지

월마트

원활한 앱 경험을 위해 Walmart의 PWA는 앱 개발자의 긴 체크리스트를 충족합니다. 수천 가지 제품을 제공하는 이 거대 소매업체는 각 거래에 대한 온라인 구매 및 픽업/배달 선택을 통합할 수 있습니다.

지역 추적 기능은 사용자 영역에서 가장 많이 팔리는 품목을 모니터링하여 앱이 이러한 목록을 기반으로 추천을 제공할 수 있도록 합니다.

마지막으로 푸시 알림을 효과적으로 사용함으로써 회사는 충성도 높은 팬층에게 훌륭한 거래와 새로운 발견을 알릴 수 있습니다.

이 전자 상거래 PWA에서 우리가 좋아하는 점:

• 피드백 섹션
• 지리 추적 기능
• 매우 반응이 빠른 인터페이스
• 불안정한 네트워크에서 원활한 성능

메이시스

고급 소매 브랜드인 Macy's는 PWA를 출시할 때 수백만 명의 월간 방문자에게 최고의 경험을 제공한다는 목표를 염두에 두었습니다.

앱 사용자의 성장을 인식한 이 회사의 PWA는 고객이 매장 진열대의 새로운 소식을 계속 주시하도록 소비자 도구에 추가된 환영할만한 기능이었습니다.

이 전자 상거래 PWA에서 우리가 좋아하는 점:

• 신뢰할 수 있는 매장 찾기 도구
• 체계적인 제품 레이아웃

랑콤

프랑스 럭셔리 화장품 브랜드 Lancom은 온라인 판매에서 장애물에 직면했습니다. 모바일 사용자는 증가했지만 전환은 감소했습니다.

이 문제를 이해하기 위해 회사는 고객 행동을 조사한 결과 모바일 앱에서 열악한 사용자 경험을 갖고 있음을 알아냈습니다.

브랜드는 로딩 시간을 줄이고 앱의 접근성을 높이기 위해 PWA로 전환했습니다. Google에 따르면 푸시 알림은 전환에 12%를 기여했으며 모바일 세션은 51%로 급증했습니다.

이 전자 상거래 PWA에서 우리가 좋아하는 점:

• 빠른 검색 결과
• 쉬운 탐색

소식

파이낸셜 타임즈

The Financial Times PWA is considered as one of the best PWAs in the news industry. Covering business and global markets, the app takes a similar look and feel of the paper with its traditional salmon-colored background.

The publication is one of the first news sites to abandon its native app and transition to a PWA. It works well even on slow networks, making news easily accessible for business people on the go.

What we like about this News Publisher PWA:

• Reliable offline
• Very fast loading time
• Real-time updates on content
• Seamless video content experience

Infobae

This Buenos Aires-based news website has proven to be successful in the PWA scene thanks to its Spanish readers. According to Google, the Latin American audience contributed to three times more page views compared to its old mobile site, and spent more sessions on the app as well.

Infobae switched from its mobile site to PWA in 2017 to improve the speed of access among its mobile users. This was influenced by the huge drop in session duration (3 minutes on mobile compared to 27 minutes on desktop).

What we like about this news publisher PWA:

• Very fast loading time
• High-quality visuals loading seamlessly
• 쉬운 탐색

Nau.ch

One of Switzerland's leading news websites became extremely popular when it began flashing content in public areas such as terminals and petrol stations.

Nau (an abbreviation for “new”) was founded in 2007 with the goal of prominently displaying news in public transport to reach millions of commuters on their daily route.

To improve its reach, the company launched its PWA and has achieved 400 times more installations than its old mobile site in the first two days.

What we like about this news publisher PWA:

• 인상적인 사용자 인터페이스
• 쉬운 탐색
• Content loads much faster relative to other news-related PWAs

Nikkei

Regarded as the world's largest financial newspaper (more than 3 million in daily circulation), Nikkei launched its PWA in 2017 with the goal of reducing load time, improve reader interaction and boost engagement.

Realizing that their website was not mobile-friendly (even taking more than 20 seconds to be fully interactive), the company assembled a team of five front-end engineers who worked on launching a PWA.

The result was truly impressive: improved loading speed, higher interactivity as well as better user experience with offline support according to Google.

What we like about this news publisher PWA:

• Prefetch feature (instant page navigation)
• Preloaded key requests
• Optimized JavaScript bundles
• 최적화된 이미지
• Enabled HTTP caching

The Washington Post

As a global authoritative news organization, The Washington Post has released one of the most responsive PWAs to reach out to a wider audience on mobile.

Launched in March 2016, the paper's goal is to provide “frictionless, uninterrupted reading.” This comes after its readers expressed their concerns over slow load times on its old mobile app.

With more than 1,000 articles published daily, they have announced that an 88% improvement in load times was initially observed. This has contributed to an increase in retention rate and longer readership according to Google.

What we like about this news publisher PWA:

• Fast loading time
• Real-time live updates
• Same look and feel as the website

중간

With social journalism becoming a necessity for readers and publishers alike, Medium has made a mark in the online publishing industry with its 120 million readers.

Medium's initial goal in 2012 was to reinvent the blogging platform through small stories that matter to any type of audience.

Now that it has grown into subscription-based service, its loyal users can follow exclusive content and audio narrations through its PWA even when working offline.

What we like about this news publisher PWA:

• 반응형
• Seamless functionality even on an unstable connection

Wired

When tech publisher Wired launched its PWA in 2017, its main objective was to increase its app's page speed and reach out to its 11 million users.

And true enough, it did. Not only did it result in higher readership but also more impressions per session, leading other Conde Nast publications to follow suit through what its chief of technology refers to as Alien Web Apps (AWA).

What we like about this news publisher PWA:

• Fast loading time
• 높은 반응성
• Reliable background caching

Forbes

With almost a 50% lift in sessions, triple the rise in scroll depth and 100% boost in engagements according to Google, Forbes has definitely reaped the benefits of launching its fully functional PWA in 2017.

Its Chief Product Officer, Lewis Dvorkin, wanted a no-friction experience for its users to have content served to their devices the way they want.

In addition, Dvorkin states that the more people stay longer on their app, the more they view ads, thanks to increased personalization that yields better engagement.

What we like about this news publisher PWA:

• Stunning visual content
• 빠른 로딩 시간
• Unique number of readers infographic

The Guardian

To make its online content more accessible, UK's leading news and media outlet, The Guardian, launched its PWA in 2017.

The app features high-quality images, interactive multimedia, and thousands of new content without compromising loading time and user experience.

The company also created a US-based innovation team called The Guardian Mobile Innovation Lab, which operated from 2015 to 2018, which explored mobile tools and chat apps to improve user experience.

What we like about this news publisher PWA:

• Customizable sections
• News alert feature
• 오프라인 액세스

Sports Mole

Sports fans – football, F1, tennis, rugby, cricket, golf and even snooker – are able to enjoy Sports Mole's website features right in their own devices through the site's PWA.

Video clips, real-time scores and game schedules are just some of the exciting features in the PWA.

The result of this move led to higher readership rate and increased session time on the app.

What we like about this news publisher PWA:

• Search functionality
• Seamless video playback
• 실시간 업데이트
• No lag on page transitions

The Weather Channel

Since the 1980s, The Weather Channel has been a trusted companion by travelers and households when it comes to providing an average of 40 billion daily weather forecasts.

While its previous native app was used by half of its total users through mobile web, the company found out that there are still users who don't enjoy reliable connections or are not equipped with advanced smartphones.

Through its PWA, The Weather Channel is able to cater to millions of its global users in 62 languages. Google reports that it has improved its page load time by 80% through the app.

What we like about this news publisher PWA:

• Search functionality
• Multiple language availability
• 푸시 알림

MyNet

Offering a wide range of content from news to sports, travel to education, and weather to finance, MyNet is one of Turkey's largest web portals.

Its old mobile site was plagued with complaints, most especially very slow loading speed. This led the company to develop a PWA to deliver fast and a highly engaging website.

Google reports that introducing PWA to MyNet's readers influenced a 15% rise in average views per session and a 23% drop in bounce rate.

What we like about this news publisher PWA:

• 실시간 업데이트
• 검색 기능

예배 규칙서

코파

이전에 PadPiper로 알려졌던 Kopa는 가구가 비치된 아파트와 세입자를 위한 시장입니다. 임대인과 임대 호스트 모두에게 인증을 제공하므로 일치시키는 것이 더 안전합니다.

PadPiper는 처음에 PWA를 시작하여 학생들이 학기 중 또는 인턴십을 시작하면 적절한 숙소를 찾을 수 있도록 했습니다. 또한 학생들을 연결하고 더 쉬운 룸메이트 매칭을 위해 근처에서 일하는 사람을 찾을 수 있는 기회를 활용하는 것도 고려했습니다.

이 디렉토리 PWA에 대해 우리가 좋아하는 것:

• 빠른 검색 결과
• 임대 호스팅 기능
• 미니멀리즘 디자인

렌티오

이 카메라 및 가전 렌탈 마켓 플레이스는 이러한 품목이 일시적으로 필요한 사람들에게 솔루션입니다.

사용자는 온라인으로 주문하고 당일 배송되기를 기다립니다. 대여 기간이 끝나면 사용자는 항목을 반환하거나 구매를 선택해야 합니다.

Rentio의 PWA(일본어 또는 영어)는 탐색하기 쉬운 인터페이스, 빠른 검색 결과, 다양한 범주 및 빠른 응답 시간을 제공합니다.

이 디렉토리 PWA에 대해 우리가 좋아하는 것:

• 검색 기능
• 빠른 거래 프로세스
• 편리한 탐색

조피

개발자 모집 플랫폼인 Joppy는 인재를 찾는 회사와 기술 구직 기회에 가장 적합한 일부 지원자에게 서비스를 제공합니다.

이 플랫폼은 지원자의 선호도를 채용 담당자가 설정한 요구 사항과 일치시키는 데 중점을 둡니다. 그러나 다른 온라인 구인 게시판과 달리 구직자는 자신의 프로필을 익명으로 설정할 수 있으므로 아무도 원치 않는 제안으로 그들을 귀찮게 할 수 없습니다.

Joppy의 PWA는 모집자와 지원자(주로 바르셀로나에 거주) 모두를 위해 명확하게 설계되어 지원 절차를 보다 간소화합니다.

이 디렉토리 PWA에 대해 우리가 좋아하는 것:

• 빠른 응답 시간
• 빠른 매칭 프로세스

오픈렌트

영국 임대 부동산 시장을 검색하는 것은 올바른 온라인 도구 없이는 골칫거리가 될 수 있습니다. OpenRent의 PWA를 사용하면 세입자와 집주인이 사용 가능한 부동산에 관한 적절한 적합성을 편리하게 검색할 수 있습니다.

PWA는 빠른 응답과 실시간 업데이트를 제공합니다. OpenRent는 잠재적 임차인을 좌절시키는 유령 광고를 피하기 위해 목록을 게시하는 즉시 삭제하기 때문에 사이트에 매우 중요합니다.

이 디렉토리 PWA에 대해 우리가 좋아하는 것:

• 결과 필터 기능
• 손쉬운 속성 추가
• 빠른 응답 시간

자동차 판매

PWA의 온라인 자동차 마켓플레이스인 Carsales는 호주 자동차 구매자에게 가장 인기 있는 목적지 중 하나이며 사용자에게 많은 편의를 제공합니다.

구매자는 차체 유형, 브랜드, 가격, 특별 제안에 따라 자동차를 검색할 수 있습니다. 반면에 판매자는 자동차 평가를 요청할 수 있으며 나머지는 Carsales에서 처리합니다.

PWA는 또한 리뷰, 권장 사항 및 자동차 관리에 대한 조언을 통해 전문가의 조언을 제공합니다.

우리가 이 디렉토리 PWA에 대해 좋아하는 것 :

• 뛰어난 모바일 우선 경험
• 모든 화면 크기에 대응
• 간편한 오프라인 경험

카리가미

Carigami는 공급업체와 임차인을 연결하는 프랑스 자동차 소매 브로커입니다. PWA는 도시, 운전자의 연령, 날짜 및 시간에 대한 사용자의 검색 선호도에 따라 신뢰할 수 있는 자동차 가격 비교를 제공합니다.

앱은 각 렌터카의 모든 세부 정보가 포함된 검색 결과를 몇 초 이내에 반환합니다.

이 디렉토리 PWA에 대해 우리가 좋아하는 것:

• 빠른 로딩 시간
• 정확한 검색 결과
• 검색 필터

빛나는

Shine은 2008년에 설립된 인도에서 두 번째로 높은 직업 포털입니다. 다양한 산업 분야의 15,000개 이상의 회사와 후보자를 연결합니다.

PWA는 직업 매칭 사이트에 가장 적합한 것 중 하나입니다. 예를 들어, 특정 직업 검색은 기술, 직위, 부서, 산업, 위치 및 학력에 따라 쉽게 필터링할 수 있습니다.

작업 알림은 사용자의 장치에도 원활하게 전달됩니다.

이 디렉토리 PWA에 대해 우리가 좋아하는 것:

• 푸시 알림
• 완전 접근 가능
• 맞춤 오프라인 페이지

소셜 또는 커뮤니티

부싯깃

Tinder가 데이트 장면 시장을 혼란에 빠뜨렸을 때 많은 사용자는 중매에 대한 혁신적인 접근 방식으로 인해 앱을 사랑하게 되었습니다.

2017년에는 개발 3개월 만에 자체 PWA에 투자했다. 이점은 즉시 관찰되었습니다. 첫째, 데이터 투자를 기본 앱의 30MB에서 PWA의 2.8MB로 줄일 수 있었습니다.

또한 페이지 로딩 속도가 빨라지고 사용자 참여도가 향상되었다고 보고했습니다(스와이프, 메시징, 구매 및 지출 세션 측면에서).

이 소셜 PWA에서 우리가 좋아하는 점:

• 푸시 알림
• 사용의 용이성
• 최적화된 성능(경로 기반 코드 분할)

핀터레스트

인기 있는 이미지 공유 및 소셜 미디어 플랫폼인 Pinterest는 3개월 동안 국제 사용자 기반을 확장하기 위해 PWA를 구축했습니다. Google에 따르면 650KB의 이전 모바일 사이트와 비교하여 PWA의 150KB 크기는 사용자에게 깊은 인상을 주기에 충분했습니다.

Pinterest 가입자는 이제 UI를 사용할 수 있을 때까지 5.6초만 기다릴 수 있습니다. 이전 모바일 앱에서는 이전 23초였습니다.

PWA로의 전환 초기 결과는 유망했습니다. 앱 사용 시간 40% 이상 증가, 사용자 생성 광고 44% 증가, 광고 클릭률 50% 증가, 핵심 참여 60% 개선.

이 소셜 PWA에서 우리가 좋아하는 점:

• 푸시 알림
• 낮은 대역폭 사용량
• 인상적인 오프라인 지원

전보

Telegram은 2013년에 다양한 장치와 호환되는 클라우드 기반 도구를 제공하여 인스턴트 메시징 서비스를 혼란에 빠뜨렸습니다.

이 글을 쓰는 현재 4억 명 이상의 월간 활성 사용자가 이 플랫폼 간 보안 서비스를 사용하여 문자 메시지, 사진, 비디오 및 오디오 파일을 교환하고 있습니다.

기본 모바일 앱과 동일한 기능을 제공하기 위해(그러나 더 가벼운 크기로) PWA가 출시되었을 때 회사는 사용자당 세션이 증가하고 유지 시간이 50% 증가했다고 보고했습니다.

이 소셜 PWA에서 우리가 좋아하는 점:

• iOS 및 Android에 설치 가능
• 오프라인 지원
• 명백한

트위터

출시된 최초의 PWA 중 하나는 2017년에 Twitter Lite PWA 방식으로 Twitter에서 출시되었습니다. 나중에 앱 개발자는 웹 및 기본 앱 기능을 보다 이상적인 모바일 앱으로 통합하기 위한 모델로 사용했습니다.

Google에 따르면 PWA의 목표는 매일 평균 4번 계정을 확인하는 250,000명의 일일 사용자의 재참여를 개선하는 것이었습니다.

데이터 소비를 줄이고 인스턴트 로딩(3G 네트워크에서 5초)을 개선하고 사용자 참여를 개선함으로써 회사는 세션당 페이지 뷰가 65% 증가하고 전송된 트윗이 75% 증가했으며 이탈률이 20% 급감했다고 보고했습니다. .

이 소셜 PWA에서 우리가 좋아하는 점:

• 브라우저 최적화(경로 기반 코드 분할)
• 대역폭 사용 감소
• 빠른 업데이트

인스 타 그램

Instagram은 후자의 앱이 출시되자마자 PWA를 제공한다는 Twitter의 전략을 따랐습니다. 2020년 초 Instagram은 Windows 10 앱을 다이렉트 메시징이 포함된 완전한 PWA로 업데이트했습니다.

기본 앱은 여전히 ​​판매되지만 장치의 모바일 브라우저에 있는 사이트는 동일한 기능과 사용자 경험을 제공합니다. 사용자는 데스크톱 및 모바일 앱에서 오랫동안 즐겨온 동일한 기능을 사용할 수 있습니다.

이 소셜 PWA에서 우리가 좋아하는 점:

• 푸시 알림
• 즉시 로딩 시간
• 빠른 반응

여행 및 예약

에어비앤비

에어비앤비는 전 세계에서 임대 및 관광 경험을 위한 편리한 준비를 제공하는 온라인 플랫폼입니다. 2008년에 회사는 추가 방을 임대하려는 주택 소유자와 저렴한 숙박 시설을 찾는 여행자를 연결하기 시작했습니다.

10년 후 PWA는 Windows 10 모바일의 Edge와 잘 작동하도록 업그레이드되었습니다. 그 결과 고객에게 보다 원활한 즉각적인 페이지 전환이 가능합니다. 현재까지 에어비앤비에는 매달 8천만 명 이상의 방문자가 있으며 대부분이 앱에 있습니다.

이 PWA에 대해 우리가 좋아하는 것:

• 푸시 알림
• 빠른 반응
• 몇 초 안에 로드되는 고품질 이미지

트리보

온라인 예약 업계의 또 다른 리더는 호텔 예약 플랫폼인 트리보(Treebo)입니다. 인도의 165개 이상의 도시에서 숙박 시설을 선택할 수 있으므로 사용자는 최상의 거래를 위해 선택 사항을 비교할 수 있습니다.

Google에 따르면 PWA는 3G 네트워크를 통해 단 4초 만에 로드됩니다. 이 사이트는 또한 클릭률이 5배 증가하고 전환율이 3배 증가했다고 보고합니다.

이 PWA에 대해 우리가 좋아하는 것:

• 서버 측 렌더링
• 빠른 대화형 시간
• 프로그레시브 렌더링(HTML 스트리밍)

우리는 간다

아시아 태평양 및 중동 지역에서 가장 큰 여행 관련 사이트로 불리는 Wego는 PWA를 설계할 때 소비자의 행동을 염두에 두었습니다.

대부분의 여행자는 사진을 저장하기 위해 휴대폰에 의존하기 때문에 저장 공간이 쉽게 부족할 수 있습니다. 또한 느리고 불안정한 인터넷 연결로 인해 다른 장소로 여행하는 것이 답답할 수 있습니다.

사용자가 호텔 객실과 항공편을 편리하게 예약할 수 있도록 PWA가 구축되었습니다. Wego는 Google에 따르면 페이지 로드 시간을 12초에서 3초 미만으로 단축했다고 발표했습니다.

이 PWA에 대해 우리가 좋아하는 것:

• 매우 빠른 응답
• 미니멀리즘 디자인
• 정확한 검색 결과
• 경량

메이크마이트립

인도 최고의 온라인 여행사 중 하나인 MakeMyTrip은 월 800만 명의 방문자에게 더 나은 서비스를 제공하기 위해 PWA 밴드왜건에 합류했습니다.

네이티브 앱에서 성공을 경험한 후, 회사는 열등한 스마트폰의 데이터 제한으로 인해 국가에서 제한된 연결이 사용자 액세스를 매우 실망스럽게 만들 수 있음을 발견했습니다.

또한 방문자가 기본 앱보다 웹사이트에서 더 많은 시간을 보내는 것으로 나타났습니다. 따라서 동일한 경험을 복제하는 것은 휴대폰 사용자에게 매우 중요합니다.

그 결과 Google에 따르면 고객 세션이 160% 증가하고 이탈률이 20% 급감했습니다. 또한 처음 쇼핑하는 사람들은 이전에 기본 앱을 사용한 사람들보다 전환율이 3배 더 높았습니다.

이 PWA에 대해 우리가 좋아하는 것:

• 쉬운 탐색
• 모든 OS에 설치 가능
• 빠른 로딩 시간

여행 시작

온라인 시장의 성공을 활용하여 Jumia는 Jumia Travel과 함께 여행 산업에 도전했습니다. Google에 따르면 PWA는 트래픽을 12배 늘리고 전환율을 33% 높이는 데 중요한 역할을 했습니다.

Jumia Travel은 여행 업계에서 가장 큰 플랫폼 중 하나를 만들기 위해 2019년 Travelstart에 인수되었습니다. Jumia Travel의 모바일 사용자는 항공편, 호텔 숙박 및 렌터카를 예약할 수 있는 PWA에서도 Travelstart로 리디렉션됩니다.

이 PWA에 대해 우리가 좋아하는 것:

• 빠른 로딩 시간
• 간단한 인터페이스

트리바고

한 달에 1억 2천만 명의 방문자를 수용하기 위해 독일의 기술 회사인 Trivago는 더 많은 사용자가 여행을 떠나기 전에 호텔 가격을 검색하고 비교할 수 있도록 PWA를 출시했습니다.

거의 200개의 예약 사이트를 포괄하는 이 앱은 가격 비교 생성 측면에서 빠르게 작동합니다. 또한 사용자는 Trivago 지도, 실제 호텔 리뷰를 편리하게 사용하고 이전 검색을 참조하여 시간과 대역폭을 절약할 수 있습니다.

Google 보고서에 따르면 55개국의 50만 명이 넘는 사용자가 PWA를 홈 화면에 추가하여 참여도가 150% 증가하고 호텔 거래에 대한 클릭이 97% 증가했습니다.

이 PWA에 대해 우리가 좋아하는 것:

• Android 및 iOS에 설치 가능
• 뛰어난 오프라인 지원
• 빠른 반응
• 검색 필터
• 다국어 지원

우버

Uber의 PWA는 오늘날 가장 독특하게 설계된 앱 중 하나입니다. 라이드 헤일링 회사는 2019년 7월에 처음 출시된 PWA를 위해 2018년에 Window 10 앱을 이면에 배치했습니다.

기본 모바일 앱과 비교할 때 Uber의 PWA는 50KB의 저장 공간만 차지합니다. 매우 빠르게 로드되므로 네트워크가 약한 영역에 갇혀 있을 때 매우 편리합니다.

위치에 따라 Uber는 모바일 장치를 탭하여 차량 호출 서비스, 음식 배달, 자전거 및 스쿠터 대여, 항공 차량 공유 서비스를 제공합니다.

이 PWA에 대해 우리가 좋아하는 것:

• 빠른 로딩 시간
• 오프라인 지원
• 경량
• 매우 빠른 예약 프로세스

리프트

2012년에 설립된 Uber의 경쟁자인 Lyft는 미국과 캐나다에서 라이더 및 드라이버 기반을 확장했습니다.

더 저렴한 요금(단골 승객을 위한 구독 계획 측면에서)을 제공하는 이 회사는 한때 Uber가 지배했던 엄청난 시장 점유율을 차지했습니다. 2016년에 PWA를 도입했습니다.

신규 사용자를 위해 PWA는 기본 앱으로 알려진 간편한 등록 절차와 예약 서비스를 제공합니다.

이 PWA에 대해 우리가 좋아하는 것:

• 빠른 응답 시간
• 안정적인 실시간 업데이트

타자왈

UAE에서 매우 인기 있는 항공편 및 호텔 예약 앱인 Tajawal은 여행자를 위해 450개 이상의 항공사와 수천 개의 호텔에 액세스할 수 있는 완벽한 솔루션을 제공합니다.

PWA는 매우 빠르게 작동하며 간소화된 프로세스를 통해 손쉬운 예약 솔루션을 제공합니다. 인터페이스는 간단하며 주로 예약에 중점을 둡니다.

이 PWA에 대해 우리가 좋아하는 것:

• 매우 빠른 페이지 로딩
• 보안 거래

플라이 위켄드

이 독특한 여행 예약 회사는 2017년 암스테르담에서 설립되었습니다. 목표는 사용자에게 주말 전용 여행 일정을 제공하여 시스템 권장 사항에 따라 비행기를 타고 2일 간의 휴양을 경험할 수 있도록 하는 것입니다.

FlyWeeked 사용자는 현재 위치를 입력하고 휴식을 취하고 싶은 주말을 선택하기만 하면 됩니다. 그런 다음 시스템은 사용자가 관심이 없는 경우 "스와이프"하거나 대신 여행을 예약하도록 선택할 수 있는 클릭 가능한 도시 목록을 제공합니다.

PWA는 사용하기 쉽고 독특한 개념으로 인해 더 높은 참여를 보장합니다.

이 PWA에 대해 우리가 좋아하는 것:

• 빠른 응답 시간
• 빠른 페이지 로딩

멋진 사촌

당신의 관심사를 공유하는 현지인이 당신의 여행을 안내해 줄 때 외국 방문은 더 흥미진진해질 수 있습니다. Cool Cousin을 통해 방문자는 사용하기 쉬운 플랫폼에서 신뢰할 수 있는 지역 도시 가이드를 선택할 수 있습니다.

소위 "사촌"은 외과 의사에서 음악가에 이르기까지 다양하지만 모두 고향에서 관광객을 호스트하는 데 대한 동일한 열정을 공유합니다.

PWA는 사용자들에게 보다 빠르고 원활한 액세스 경험을 제공하기 위해 2018년에 출시되었습니다. 공식 업데이트에서 회사는 앱이 로딩 시간을 25% 단축하고 사용자의 다른 온라인 소스에 대한 액세스를 줄였다고 발표했습니다.

이 PWA에 대해 우리가 좋아하는 것:

• 빠른 응답 시간
• 쉬운 탐색

오락

사운드슬라이스

기타, 피아노, 색소폰 또는 밴조 연주 방법을 배우는 것은 이제 실제 오디오와 악보를 동기화하는 앱인 Soundslice를 사용하여 더 쉬워졌습니다.

사운드슬라이스의 PWA는 모바일 장치를 사용한 독학 세션에 적합합니다. 사용자가 피치를 변경하고 섹션을 반복하고 음악을 기보할 수 있습니다. 반면에 음악 교사는 도구를 사용하여 대화형 세션을 개발할 수 있습니다.

샘플 "슬라이스"를 사용하면 악보에서 움직이는 수직선 안내선과 함께 오디오를 재생할 수 있습니다.

이 PWA에 대해 우리가 좋아하는 것:

• 인터랙티브 디자인
• 빠른 로딩 시간

스포티 파이

디지털 음악 스트리밍 서비스 Spotify의 경우 더 많은 가입자를 확보하기 위해서는 PWA를 통한 라이트 앱 활용이 필수입니다.

Spotify의 데스크톱 및 모바일 앱은 PWA에 복제되어 청취자에게 오프라인으로 청취할 때도 동일한 편의성을 제공합니다. PWA 로드 속도가 훨씬 빨라지고 배경 색상이 앨범 장르에 맞게 조정되어 더욱 개인화됩니다.

이 PWA에 대해 우리가 좋아하는 것:

• 적응형 UI
• 오프라인 지원
• 인터랙티브 디자인

1튜너

대중적인 믿음과 달리 라디오는 죽지 않았습니다. 1Tuner를 사용하면 모든 사용자가 라디오 방송국(단어의 모든 위치)과 팟캐스트를 들을 수 있습니다.

재생 목록을 만들 수도 있으므로 브라질 방송이나 런던 지역 방송국에서 재생되는 최고의 트랙을 놓치지 않도록 할 수 있습니다.

PWA도 완벽하게 작동합니다. 특정 라디오 방송국을 선택하면 실시간으로 방송을 들을 수 있습니다. 반면에 팟캐스트는 뛰어난 오디오 품질로 전달됩니다.

이 PWA에 대해 우리가 좋아하는 것:

• 사용자 정의 테마
• 수많은 콘텐츠 추천

9개그

9GAG 출시 이후 온라인 유머는 예전 같지 않습니다. 인터넷 밈, 비디오 및 전 세계 사용자가 공유하는 이미지로 사이트는 엔터테인먼트의 원천이 되었습니다.

그러나 특히 인기 있는 콘텐츠에 많은 비디오가 포함된 경우 이전 기본 앱을 로드하는 데 더 오랜 시간이 필요하다는 것을 곧 깨달았습니다.

9GAG는 페이지 로딩 속도를 줄이고 더 나은 사용자 참여를 장려하기 위해 PWA로 전환했습니다. 이 사이트는 사용자가 기본 앱에 비해 앱에 25% 더 오래 머물렀다고 밝혔습니다.

이 PWA에 대해 우리가 좋아하는 것:

• Android 및 iOS에 설치 가능
• 오프라인 지원
• 빠른 로딩 시간

Lotto.de

이 PWA의 최신 유로 로또 결과에 대한 대조된 실시간 정보는 플레이어로부터 편리한 리소스를 제공합니다.

PWA는 매우 빠르게 로드되며 저가형 장치 및 열악한 인터넷 연결에서 잘 작동합니다. 최신 결과를 알고 싶어 하는 로또 플레이어에게 이 PWA는 편리한 동반자입니다.

이 PWA에 대해 우리가 좋아하는 것:

• 부드러운 사용자 경험
• 독일어 및 영어로 제공

50가지 최고의 PWA 예제 요약

이 프로그레시브 웹 앱 예제가 이 가이드에서 만든 주요 요점 중 일부를 강조했기를 바랍니다.

이러한 브랜드는 모바일 UX에 투자하여 혜택을 얻었습니다. 그들의 발자취를 따라 자신의 비즈니스를 위한 인상적인 프로그레시브 웹 앱으로 "모바일 우선"으로 갈 수 있고 또 그래야 합니다. 방법을 알려 드리겠습니다. 먼저 "네이티브 앱은 어떻습니까?"라는 핵심 질문에 답할 것입니다.

iOS 및 Android 앱을 직접 구축하는 아이디어를 가지고 놀다가 대신 PWA를 살펴보게 되었을 수도 있습니다. 아마도 당신은 App Store에서 출시하는 것에 대해 그다지 신경을 쓰지 않고 훨씬 더 나은 웹사이트를 원할 것입니다.

어느 쪽이든 – 우리는 "네이티브 대 PWA" 논쟁을 간략하게 다루고 PWA가 최소 이고 PWA + 네이티브 앱이 최적이라고 생각하는 이유를 설명할 것입니다.

어떤 종류의 앱을 만들어야 할까요? 프로그레시브 웹 앱과 네이티브 앱

프로그레시브 웹 앱과 네이티브 앱이 라이벌이라는 생각이 떠돌고 있습니다. 그 PWA는 네이티브 앱을 부적절하고 불필요하게 만듭니다. 해당 기업은 PWA 구축과 기본 앱 구축 중 하나를 선택하고 항상 후자를 선택할 것입니다.

이 내러티브는 잘못된 이분법인 둘 중 하나 또는 선택으로 네이티브 앱 대 PWA를 제시합니다. 사실 PWA와 기본 앱은 훌륭한 조합이며 함께 시너지 효과를 발휘합니다. 그들은 서로의 기반을 커버하고 채널에 관계없이 모든 사람 에게 최적의 사용자 경험을 제공할 수 있도록 합니다.

PWA는 웹의 도달 범위, 검색 가능성 및 편재성을 활용합니다. 그들은 유기적 인 트래픽을 끌어 들이고 빠르고 세련된 경험으로 첫 방문자에게 깊은 인상을 주어 사이트에서 더 많은 시간과 돈을 보내도록 설득합니다. 마찰과 게이트 키퍼를 줄이는 쉬운 설치 옵션을 제공하며 제한된 장치 저장 공간이 걱정되는 사람들에게도 어필할 수 있습니다.

그들은 새로운 방문자, 그리고 어떤 이유로든 기본 앱을 다운로드할 만큼 충분히 참여하지 않았지만 새로운 방문자와 연결을 구축할 수 있는 완벽한 수단을 제공합니다. PWA는 깔때기를 통해 사람들을 육성하는 완벽한 수단입니다.

반면에 기본 앱은 PWA에 비해 도달 범위와 가시성이 좋지 않습니다. 앱 스토어의 "벽으로 둘러싸인 정원" 뒤에 있으며 사용자가 앱을 설치하고 다운로드하려면 더 높은 수준의 노력이 필요합니다. 다른 한편으로, 기존 사용자 습관에 더 잘 부합하고 iOS 사용자에게 푸시 알림을 보낼 수 있으며 App Store에서 브랜드 부스트 가시성/존재감을 얻을 수 있습니다.

기본 앱은 핵심 독자/고객/사용자에게 적합합니다. 가장 충성도 가 높은 기반은 로그인 화면이나 페이월 뒤에서도 기본 앱을 다운로드하고 액세스하도록 권장되어야 합니다. 그래야 한 곳에서 앱을 수집하고 이해하고 참여하는 데 집중하여 LTV와 유지율을 최대한 극대화할 수 있습니다.

기본 앱은 열성 팬을 위한 훌륭한 "집"입니다.

구글은 이렇게 표현합니다.

“PWA는 기본 앱을 대체할 필요가 없습니다. 그들은 그들과 함께 일할 수 있습니다. 예를 들어 소매업체는 기본 앱을 사용하여 앱을 설치할 가능성이 더 높은 충성도 높은 사용자의 참여를 유도할 수 있지만 PWA를 사용하여 신규 사용자에게 쉽게 도달할 수 있습니다. PWA와 상호 작용하는 사용자는 나중에 모바일 앱을 다운로드하라는 메시지를 받을 수 있습니다."

우리의 권장 사항 - 둘 다 구축하십시오!

예산이 제한되어 있다면 PWA로 가십시오. 네이티브 앱이 있지만 PWA 가 없다면 최대한 빨리 하나를 구축해야 합니다. 최적의 모바일 우선 UX를 구축하는 데 전념하고 이를 달성하는 데 투자할 수 있다면 두 가지를 모두 구축하고 서로의 강점과 약점을 보완하도록 하세요.

MobiLoud로 훌륭한 기본 앱을 얻을 수 있습니다. 필요한 것은 웹사이트나 웹 앱뿐입니다. 자세한 내용은 당사 팀에 문의하세요!

프로그레시브 웹 앱을 구축하는 방법

이 가이드의 목적은 PWA에 대한 전체 수준의 개요를 제공하는 것입니다. 개발의 복잡성은 우리가 다룰 내용이 아니지만, 사용자가 직접 선택할 수 있도록 옵션을 배치할 것입니다.

"10분" 만에 PWA를 구축할 수 있는 방법에 대해 온라인에 떠도는 많은 콘텐츠가 있습니다. 기본 앱 느낌을 기존 웹 앱에 1시간 이내에 처음부터 모두 제공한다는 약속과 함께 이 튜토리얼에 쉽게 매료될 수 있습니다.

그래도 합법인가요?

예 및 아니오. 이러한 PWA "해킹"은 또한 HTTPS, 웹 매니페스트 및 서비스 작업자와 같은 절대 최소 기준 을 충족하기 위한 것입니다. 매우 기본적이고 기능적인 프로그레시브 웹 앱을 만드는 데 관심이 있다면 Microsoft의 PWABuilder를 사용해 볼 수 있습니다. 약간의 땜질과 기술적인 노하우로 괜찮은 것을 얻을 수 있습니다.

고유하고 최적화되고 기능이 풍부한 프로그레시브 웹 앱(잠재력을 실제로 실현하는)을 구축하려면 더 많은 투자가 필요합니다. 그 이유를 알아보기 위해 기본 단계를 세분화해 보겠습니다.

1. 호스팅 서비스를 통해 구성할 SSL 인증서 구매
2. 앱 셸 개발
3. 브라우저가 서비스 워커를 지원하는지 확인
4. 서비스 작업 파일 등록
5. 푸시 알림 및 웹 앱 매니페스트 추가
6. 설치 프롬프트 설정
7. 앱 기능 테스트
8. 앱 기반 Lighthouse의 체크리스트 감사
9. 버그 수정
10. 앱 실행

쉬워보이죠?

실제로 이 작업을 잘 수행하고 우수한 맞춤형 프로그레시브 웹 앱을 빌드하려면 복잡한 웹 앱 빌드 경험이 있는 프론트 엔드 개발자가 필요합니다.

서비스 작업자를 설정하고 최적의 성능을 위한 캐싱을 설정하는 중요한 작업은 복잡하고 실제 기술이 필요합니다. 그런 다음 요구 사항에 따라 기본 앱 사용자 경험과 이를 웹에 효과적으로 적용하는 방법을 이해하는 디자이너도 필요할 수 있습니다.

당신이 꽤 큰 회사가 아닌 이상, 당신이 무엇을 해야 할지 알려주기를 기다리는 재능 있는 프론트엔드 개발자가 많지 않을 것입니다. 그들을 찾고, 고용하고, 팀을 구성하고 관리해야 합니다. 이러한 일에 경험이 없다면 어려운 작업입니다. 우수한 프론트 엔드 개발자도 항상 수요가 있으며 계약률이 이를 반영합니다.

프로그레시브 웹 앱 구축 비용 및 기간

비용이 얼마나 들까요? 글쎄, 그것은 고전적인 "줄의 길이는 얼마입니까?"와 약간 비슷합니다.

빌드하려는 앱의 복잡성에 전적으로 달려 있습니다. The PWA Book의 저자에 따르면:

PWA를 처음부터 구축하려면 3400Wh(작은 앱의 경우)에서 9000Wh(우리가 수행한 전용 프로젝트)가 필요합니다. 이것은 $400K에서 $1백만 사이의 비용을 의미합니다. 클라우드 플랫폼을 사용하면 최소 75% 저렴해지고 출시 기간도 75% 단축됩니다(8-12개월 대신 2-3개월).

– 10장, PWA 책

이것은 값 비싼 것처럼 보이지만 위에서 본 것과 같은 주요 브랜드가 경험에 어떻게 투자하는지에 대한 아이디어를 제공합니다.

물론 사이트를 처음부터 구축하는 대신 PWA로 변환 하는 경우 대부분의 경우 더 저렴하고 쉽습니다. 대략적인 추정으로, 당신은 좋은 결과를 얻기 위해 최소 3개월, 그리고 $20,000에서 $50,000를 투자하는 것을 보고 있습니다.

개발자는 다양한 프로젝트 단계를 따르지만 대부분의 경우 발견, 설계, 수정, 예비 개발, 테스트, 버그 수정 및 최종 출시의 7단계로 이루어집니다.

PWA가 더 복잡한 경우 GPS, 소셜 미디어 지원 및 카메라 액세스와 같이 통합해야 하는 고급 기능을 고려하면 완료가 더 오래 지속됩니다.

즉, 간단한 PWA는 3개월 미만(또는 베어본인 경우 2주) 미만이 소요될 수 있습니다. 백엔드 관리 패널, 시각화 패턴 및 기타 통합과 같은 고급 기능을 사용하려면 6개월 이내에 PWA를 사용할 수 있습니다.

이것은 상당한 금액처럼 보일 수 있지만 맥락에 따라 보면 그 이상의 가치가 있습니다. 기본 앱보다 더 저렴하고 빠르게 구축할 수 있을 뿐만 아니라 속도와 향상된 사용자 경험은 장기적으로 그 자체로 비용을 지불하는 것 이상일 것입니다.

WordPress를 사용하는 경우 WordPress 사이트를 PWA로 전환하는 더 간단한 방법과 시도해 볼 수 있는 일부 WordPress PWA 플러그인이 있습니다.

귀하의 옵션에 대한 조언을 해드릴 수 있으며 귀하의 사이트가 적합하다면 당사의 맞춤형 플랫폼을 사용하여 표준 비용의 일부만으로 단 2주 만에 PWA로 전환할 수 있습니다. 비슷한 기간에 사이트에서 기본 iOS 및 Android 앱을 빌드할 수도 있으므로 2021년 이후에 모든 모바일 기반을 확보할 수 있습니다!

자세한 내용을 알아보려면 모바일 전문가에게 문의하세요.

당신의 손에 달려 있습니다 – 지금 바로 프로그레시브 웹 앱 구축을 시작하십시오!

지금쯤이면 프로그레시브 웹 앱의 특성과 성능에 대한 좋은 개요를 갖게 될 것입니다.

자세히 알아보려면 다음 리소스를 확인하세요.

• PWA 책
• web.dev 및 Google 개발자의 Google 리소스
• PWA 통계(흥미로운 지표 및 사례 연구)
• Google의 PWA 로드쇼(훌륭한 비디오 시리즈)
• Mozilla의 우수한 PWA 지침
• Jason Grigsby의 책 Progressive Web Apps
• 오늘날 웹은 무엇을 할 수 있습니까? (웹 기술이 어떻게 발전했는지 보여줌)
• 예, 해당 웹 프로젝트는 PWA(탁월한 가이드/기사)여야 합니다.
• 네이티브, 웹 및 하이브리드 앱의 차이점에 대한 가이드

이제 당신 차례입니다. 벅찬 작업처럼 보일 수 있지만 실제로 인상적이고 현대적이며 최적의 웹 존재를 갖기 위해서는 웹사이트를 점진적인 웹 앱으로 전환해야 합니다.

출시 준비가 되면 만족하실 것입니다. 보장합니다. 그리고 고객은 귀하의 비즈니스에 더 많은 시간, 관심 및 돈을 투자하여 귀하에게 보상할 것입니다.

우리가 언급했듯이 PWA는 기본 앱을 대체 하지 않습니다. PWA는 기본적으로 훨씬 더 나은 웹사이트입니다. 아직 익숙하지 않기 때문에 사용자가 장치에 설치하도록 하는 것이 어려울 수 있으며 iOS 사용자에게 푸시 알림을 보내고 앱 스토어에서 브랜드 인지도를 놓칠 수 있습니다.

네이티브 앱 도 빌드해야 하나요?

PWA는 필수이지만 기본 앱은 여전히 ​​최고의 모바일 사용자 경험입니다. 일부 사람들이 네이티브 앱의 전망에 대해 경계하거나 부정적인 유일한 이유는 큰 비용($50,000+)과 전통적으로 함께 제공되는 길고 힘든 개발 프로세스 때문입니다.

이러한 우려를 공유하지만 브랜드를 위한 iOS 및 Android 앱 구축에 관심이 있다면 당사 플랫폼인 News, 전자상거래용 Canvas 또는 Canvas를 확인해야 합니다. 어느 것이 나에게 적합하든지 $100/m의 비용으로 단 몇 주 만에 사이트 또는 웹 앱을 최고 품질의 기본 앱으로 변환할 수 있습니다.

당사 플랫폼은 모든 웹사이트를 모바일 앱으로 변환하는 데 사용할 수 있습니다. 귀하의 사이트가 무엇으로 구축되었는지는 중요하지 않습니다. MobiLoud는 다음을 구축하는 데 적합합니다.

• 워드프레스 앱
• 버블 앱
• 스퀘어스페이스 앱
• Wix 앱
• WooCommerce 앱
• 웹플로우 앱

그리고 그 사이에 있는 모든 것! Android 및 iOS 에서 무제한 푸시 알림을 설정하고 웹과 App Store에서 성공적인 크로스 플랫폼 입지를 구축하는 데 필요한 모든 기능을 갖게 됩니다.

우리는 또한 PWA로 당신을 도울 수 있으므로 앞으로 이상적인 모바일 콤보를 갖게 될 것입니다. 이것이 좋은 것 같으면 지금 연락하여 데모를 예약하십시오. 다른 길을 선택했다면 여행에 행운을 빕니다. PWA 예제를 즐기고 모바일에서 성공하는 데 도움이 되는 영감을 얻으셨기를 바랍니다!