프로그레시브 웹 앱(PWA)의 내부 및 외부 살펴보기

속지 마십시오. 프로그레시브 웹 애플리케이션은 간단한 기사를 읽은 후에 친구와 교양 있는 대화를 나눌 수 없는 미친 신기술이 아닙니다.

그들은 본질적으로 멋진 이름을 가진 현대화된 웹 애플리케이션입니다(Google Chrome 덕분에).

그러나 여전히 많은 조직이 PWA가 자신의 요구 사항에 더 적합하다고 결정하는 이유를 깨우쳤습니다. 기본 애플리케이션에 비해 PWA를 구축, 마케팅 및 유지 관리하는 것이 더 저렴할 뿐만 아니라 고객이 선호하는 것일 수도 있습니다.

고객에게 다음 호텔 예약이나 렌터카 예약을 위해 앱 스토어로 리디렉션되기를 원하는지 물어본 적이 있습니까? 아마도 그것은 다른 날을 위한 대화일 것입니다...

프로그레시브 웹 앱이란 무엇입니까?

네이티브 애플리케이션 또는 기존 웹 애플리케이션과 비교하여 프로그레시브 웹 앱을 빌드하는 사용 사례를 이해하기 전에 기본 사항을 살펴보겠습니다.

무엇보다 먼저 프로그레시브 웹 애플리케이션이 미래의 방식이기 때문에 이에 대해 알아야 합니다. JAX Enter에서 800명 이상의 기술자를 대상으로 한 독자 설문조사에 따르면 응답자의 46%가 PWA가 기본 또는 하이브리드 애플리케이션이 아니라 미래라고 생각한다고 말했습니다.

프로그레시브 웹 앱, 비프로그레시브 웹 앱 및 네이티브 앱의 차이점

시니어 개발자들조차 프로그레시브와 비프로그레시브를 혼동하거나 네이티브 애플리케이션과 비프로그레시브를 혼동하는 경향이 있습니다. 그러나 이러한 응용 프로그램 유형 간에는 뚜렷한 차이점이 있습니다.

원천

기본 응용 프로그램 은 특정 장치(스마트폰, 태블릿 등)에 대해 특정 언어로 빌드된 응용 프로그램이며 응용 프로그램 스토어에서 다운로드해야 합니다. 위의 예에서 Dish의 MyPay 앱은 Apple App Store에서 다운로드할 수 있고 iOS 기기용으로 제작되었기 때문에 기본 애플리케이션입니다. Google Play에서 Dish의 MyPay 앱을 다운로드할 수도 있지만 Dish는 실제로 이를 가능하게 하기 위해 두 번째 기본 애플리케이션을 개발해야 했습니다.

고객을 위해 두 개의 서로 다른 모바일 애플리케이션을 설계하고 개발해야 하므로 기본 앱 개발의 주요 단점을 볼 수 있습니다.

더 예산에 민감한 애플리케이션 유형? 비프로그레시브 웹 애플리케이션. 웹 애플리케이션의 초기 형태인 비프로그레시브 웹 애플리케이션은 앱 스토어에서 다운로드할 필요가 없는 애플리케이션입니다. 오히려 웹을 통해서만 액세스할 수 있습니다.

앱처럼 보이고 느껴지지만 실제로는 향상된 기능을 갖춘 웹사이트에 불과합니다. 위 이미지의 비프로그레시브 웹 앱 예인 Evolve Vacation Rentals는 안전하고 반응이 빠르며 매끄럽지만 PWA로 간주되지 않습니다.

실제로 웹 기반 응용 프로그램이 프로그레시브 웹 응용 프로그램으로 간주되기 위해서는 다음이 해당 응용 프로그램에 대해 충족되어야 한다고 Google은 말합니다.

• 프로그레시브 . IE 또는 Chrome뿐만 아니라 모든 브라우저 유형에서 작동해야 합니다.
• 반응형 . 앱은 모든 최신 휴대전화, 태블릿 및 미래의 기술 기기에 맞아야 합니다.
• 독립 . 오프라인 또는 약한 네트워크 연결에서 작동할 수 있는 용량이 있어야 합니다.
• 앱식 . 응용 프로그램은 앱 스타일 탐색 및 스타일 지정을 사용합니다.
• 신선한. 항상 최신 상태입니다.
• 안전한. 전송 계층 보안을 통해 사용자에게 제공되거나 더 일반적으로 HTTPS URL이라고 합니다.
• 발견 가능. 검색 엔진을 사용하여 찾을 수 있습니다.
• 재참여 가능. 플랫폼을 통해 애플리케이션 사용자를 다시 참여시키는 기능(예: 푸시 알림).
• 설치 가능. 사용자는 앱 스토어를 통해 홈 화면에 앱을 설치하여 쉽고 편리하게 액세스할 수 있습니다.
• 연결 가능. URL을 사용하여 앱을 다른 사람과 공유할 수 있습니다.

프로그레시브 웹 앱의 기능

Google에는 웹 애플리케이션을 프로그레시브 웹 애플리케이션으로 만드는 요소에 대한 분류가 있지만 체크리스트를 준비하지 않고 웹 애플리케이션이 프로그레시브인지 여부를 어떻게 결정할 수 있는지 궁금할 것입니다. 이를 수행하기 위해 PWA의 주요 기능을 살펴보겠습니다.

보안 컨텍스트(HTTPS)

최신 데이터 보안 표준을 준수하지 않는 애플리케이션을 프로그레시브 애플리케이션이라고 하기는 어렵습니다. 보안 컨텍스트는 웹 사이트 사용자에게 신뢰 수준을 제공하는 보안 표준으로, 사용 중인 웹 애플리케이션이 안전한 방식으로 콘텐츠를 제공하고 있음을 나타냅니다.

2020년의 모든 웹사이트에 대한 모범 사례와 마찬가지로 PWA의 주요 기능은 TSL/SSL로 암호화되어 안전한 컨텍스트를 보장한다는 것입니다. 웹 애플리케이션의 보안 여부를 빠르게 확인하려면 페이지 URL에서 HTTPS를 찾으면 됩니다.

HTTPS 연결이 없는 웹 애플리케이션을 사용하는 경우 PWA로 간주할 수 없습니다.

원천

서비스 워커

기술 용어로 서비스 직원은 테이크아웃 음식을 건네주는 사람이 아닙니다. 하지만 그 비유를 따르도록 합시다!

식당에 있는데 전원이 꺼졌다고 가정해 봅시다. 여느 때와 같이 배가 고프면 샐러드나 차가운 수프를 먹다가 막힙니다. 그러나 서비스 워커가 하는 일은 캐시를 사용하여 사용자의 경험이 결코 문제가 되지 않도록 하는 것입니다. 또는 서비스 직원이 여전히 따뜻한 식사를 할 수 있는지 확인합니다.

PWA 사용자 경험 관점에서 이것이 의미하는 바는 앱을 탐색하다가 인터넷 연결이 끊기더라도 눈치채지 못할 것입니다. 또는 이전에 해당 PWA에 이미 가본 적이 있다면 저녁 식사를 미리 주문한 것처럼 매우 빠르게 로드됩니다.

이것이 어떻게 가능한지? 약간의 JavaScript 파일로 모든 것입니다. 고급 서비스 작업자는 푸시 API에 연결할 수도 있으므로 PWA가 사용자의 참여를 유지하기 위해 푸시 알림을 보낼 수 있습니다.

매니페스트 파일

보다 맞춤화된 사용자 경험을 만들기 위해 PWA는 종종 매니페스트 파일을 활용합니다. 간단히 말해서 매니페스트 파일은 단일 단위의 일부인 파일 그룹에 대한 메타데이터를 포함하는 파일입니다.

기본적으로 메타파일은 특정 장치에서 열릴 때 PWA 앱이 어떻게 작동해야 하는지 웹 브라우저에 알려주는 데 자주 사용됩니다. 개발자는 PWA용 매니페스트 파일을 생성하여 기본 앱 아이콘 또는 시작 화면 색상을 설정할 수 있습니다. 개발자는 또한 특정 장치에서 보다 '앱과 유사한' 경험을 만들기 위해 응용 프로그램이 전체 화면 브라우저 창으로 열리도록 할 수 있습니다.

원천

PWA의 장점

물론 모든 유형의 응용 프로그램에는 장점이 있습니다. Spire Digital의 애자일 제품 개발 이사인 Bart Deferme는 다음과 같이 말합니다.

"다양한 유형의 응용 프로그램은 다양한 조직의 다양한 사용 사례에서 유리합니다. 기본 응용 프로그램은 사용자가 PWA 또는 비프로그레시브 웹 응용 프로그램보다 기본 응용 프로그램을 선호한다는 것을 알고 있는 조직에 이상적입니다. 그러나 개념 증명을 얻으려는 기업가에게는 린 MVP를 시작함으로써 비프로그레시브 웹 애플리케이션 또는 PWA가 보다 비용 친화적인 경로입니다."

다양한 유형의 애플리케이션이 최상의 솔루션인 사용 사례가 항상 있다는 점을 염두에 두고 다음은 다른 유형의 애플리케이션보다 프로그레시브 웹 애플리케이션을 사용하는 일반적인 장점입니다.

발견 가능

Google은 하루에 35억 건의 검색을 수행하여 세계에서 가장 큰 검색 엔진이 되었습니다. 사람들이 문제나 질문이 있을 때 Google에 문의한다고 해도 과언이 아닙니다. 이는 앱 스토어 외에도 웹에서 사용할 수 있기 때문에 PWA를 배포하는 조직에 좋은 기회를 제공합니다. 이것은 사람들이 다른 응용 프로그램에 비해 PWA를 더 쉽게 찾을 수 있도록 합니다.

PWA의 검색 가능성은 사용자가 가장 많이 검색하는 곳을 검색하고, 답변을 얻고, 한 곳에서 모든 작업을 완료할 수 있도록 해주기 때문에 큰 이점입니다. PWA를 사용하면 전체 애플리케이션을 다운로드하는 과정을 건너뛰고 앱 스토어 다운로드 휠이 천천히 '100%, 다운로드 완료'로 롤링되는 것을 볼 필요가 없습니다.

설치 가능

사용자가 PWA 사용을 정말 좋아하거나 단순히 자주 사용하는 경우 비프로그레시브 웹 응용 프로그램처럼 컴퓨터와 휴대 전화 브라우저에 북마크를 추가할 필요가 없습니다. 앱 스토어와 사용자로의 간단한 여행을 통해 사용자는 일반적인 기본 애플리케이션과 동일한 시간에 즐겨찾는 PWA에 액세스할 수 있습니다.

연결 가능

친구에게 '앱 스토어에서 해당 앱을 검색하세요'라고 말하는 것보다 좋아하는 앱에 대한 링크를 친구와 공유하는 것이 훨씬 쉽습니다. 링크는 이메일, 소셜 미디어 dms 등을 통해 쉽게 공유할 수 있습니다. 연결 가능성과 검색 가능성은 동기화되어 작동하는 두 가지 PWA 장점으로, 처음 사용자가 애플리케이션에 액세스하는 데 걸리는 시간을 줄이고 양을 줄입니다. 슈퍼 유저가 친구나 잠재 사용자와 앱을 공유하는 데 걸리는 시간.

네트워크 독립

네트워크 shmetwork. 우리는 우리가 세계 어디를 가든지 완전한 바를 얻을 수 없을 것입니다. 하지만 다시 PWA를 작동하기 위해 전체 막대가 필요하지 않습니까?

프로그레시브 웹 애플리케이션을 통해 사용자는 터널을 통과하는 도중에 좋아하는 음악을 계속 들을 수 있으며 통신 작업자는 도시 전체에 정전이 발생했을 때 정전이 발생했음을 알릴 수 있습니다. 항상 강력한 네트워크 연결이 필요하지 않은 PWA는 모든 사용자 그룹에 보다 안정적인 사용자 경험을 제공합니다.

반응형

Zoom 통화에 관심을 보이려고 노력하면서 친구와 함께 Words를 플레이하고 싶었던 적이 있습니까? Words with Friends가 기본 응용 프로그램이 아닌 PWA라면 그렇게 할 수 있습니다. PWA는 장치 또는 브라우저 유형에 관계없이 원활한 사용자 경험을 허용합니다. 즉, 좋아하는 기본 또는 비프로그레시브 애플리케이션을 사용하기 위해 항상 휴대전화나 노트북을 가지고 있을 필요가 없습니다.

응답성의 또 다른 이점은 조직이 여러 사용자 그룹에 대해 여러 응용 프로그램을 생성하지 않아도 된다는 것입니다. 랩톱 사용자와 휴대폰 사용자는 모두 PWA라는 단일 앱 배포에 만족할 수 있습니다. 이 이점은 조직의 IT 및 마케팅 지출을 절약하기 때문에 PWA의 베스트 셀링 포인트 중 하나가 되는 경향이 있습니다.

안전한

특히 금융, 건강 또는 보험 응용 프로그램을 사용할 때 사용자는 Caymans의 일부 친구가 자신의 개인 데이터에 액세스하지 않는다는 것을 알고 싶어합니다. 간단히 말해서 보안은 사용자와의 신뢰를 구축합니다. 보안 컨텍스트 및 URL 암호화를 통해 PWA는 사용자와 Google 검색 봇 모두에게 확신을 줄 수 있습니다.

앞서 언급했듯이 웹 응용 프로그램을 포함하여 조직의 모든 URL에 SSL 암호화를 사용하는 것이 가장 좋습니다. 웹 애플리케이션을 보호하지 않으면 Google은 검색 결과 페이지에서 웹 애플리케이션의 성능이 부정적인 영향을 받을 것이라고 일관되게 밝혔습니다.

원천

결론

생각해 보십시오. 세상은 곧 인간이 하루 24시간 소프트웨어에 연결되는 블레이드 러너 현실로 향하고 있습니다(아직 그렇지 않은 경우). 기술 곡선에서 앞서가고 최대의 ROI를 얻는다는 것은 가장 장기적인 가치를 지닌 소프트웨어에 투자하는 것을 의미합니다.

기본 응용 프로그램은 특정 언어로 된 특정 장치용으로 구축되어 응용 프로그램 경험이 응답하지 않고 코드 기반을 재사용할 수 없게 만듭니다. 비프로그레시브 웹 애플리케이션의 코드는 다른 애플리케이션 생성에 재사용할 수 있지만 비프로그레시브 웹 애플리케이션은 특정 브라우저용으로만 구축됩니다. 또한 앱 스토어에서 다운로드할 수 없습니다.

PWA는 다음과 같은 가장 미래 지향적인 애플리케이션 유형입니다.

• 웹 또는 앱 스토어를 통해 검색 가능
• 반응형 및 모든 브라우저에 대한 준비
• 네트워크 연결 독립
• 안전하고 암호화
• 그리고 더

이제 PWA에 대해 더 잘 이해했으므로 응용 프로그램 사용 사례를 더 잘 조사하고 조직의 요구 사항에 맞는 응용 프로그램 유형을 결정할 수 있습니다. 아직 결정하지 않았다면 고객과 대화하여 원하는 것과 요구 사항을 파악한 다음 조직에 가장 장기적인 가치를 제공할 애플리케이션을 선택하여 구축하십시오.

PWA가 귀사에 적합합니까? 누가 알아. 그러나 모든 응용 프로그램 옵션을 더 잘 이해하는 것은 결코 나쁜 생각이 아닙니다.

G2의 앱 개발 정보 허브에서 다른 앱 개발 통찰력을 더 철저히 이해하십시오.