PWA: 이것이 모바일 앱의 미래 모습입니까?

"프로그레시브 웹 앱"은 디자이너 Frances Berriman과 Google Chrome 엔지니어 Alex Russell이 2015년에 최근에 만든 용어입니다. PWA는 탄생 이후 상당한 성공을 거두었으며 주요 기업에서도 채택했습니다.

그러나 우리가 다음을 가리키는 예언을 들을 때 약간의 눈썹이 치켜 올라갑니다. 앱 스토어의 일수와 우리가 알고 있는 네이티브 앱의 일수는 숫자로 표시됩니다.

회의 준비에서 친구 연락, 온도 조절기 끄기, 자동차 잠금 해제에 이르기까지 문자 그대로 우리의 삶을 운영하는 앱이 아직 초기 단계에 있는 기술로 곧 대체될 것이라는 사실을 짐작하기 어렵습니다.

그렇다면 상상할 수 없는 일이 실제로 가능하거나 로마 제국이 시간의 시험을 살아남을 수 있습니까?

두 가지 분기된 경로 중에서 선택하려면 먼저 PWA가 무엇인지 알아야 합니다. PWA는 어떤 기술에서 실행됩니까? 기본 앱에 비해 PWA의 장점은 무엇입니까? 단점은 무엇입니까?

다음은 선도적인 PWA 개발 회사 가 답변한 이 기술에 대해 알아야 할 모든 것입니다.

PWA는 무엇입니까?

최고의 웹과 최고의 앱에 복제 자식이 있다면 바로 PWA입니다.

프로그레시브 웹 앱(PWA)은 이름에서 알 수 있듯이 본질적으로 웹 애플리케이션이지만 기본 모바일 애플리케이션처럼 사용자에게 나타납니다. 즉, PWA는 웹 앱처럼 쉽게 액세스하고 검색할 수 있으며 모바일 앱의 편리함을 제공한다는 두 가지 장점을 모두 가지고 있습니다.

기본 모바일 애플리케이션과 달리 PWA는 다른 웹사이트와 마찬가지로 웹에 존재합니다. 여기서 유일한 예외는 사용자의 홈 화면에 직접 추가할 수 있다는 것입니다. 그때부터 PWA는 기본 앱이 제공하는 모든 이점을 제공합니다. 신뢰성, 회상 및 더 높은 참여.

그렇다면 개발자들이 웹과 모바일 앱 사이의 스위트 스폿을 찾는 데 도움이 된 것은 무엇일까요? 아래로 스크롤하여 PWA를 만드는 데 관련된 기술에 대해 알아보세요.

PWA 뒤에 숨겨진 소스?

PWA의 기반이 되는 3가지 기본 기술 기둥이 있으며 각각은 아래에 설명되어 있습니다.

명백한
웹 앱 매니페스트 는 개발자에게 앱에 대한 모든 정보(예: 이름, 작성자, 아이콘, 설명)를 메타데이터로 저장할 수 있는 중앙 집중식 위치를 제공하는 간단한 JSON 파일입니다.

매니페스트의 목적은 장치의 홈 화면에 웹 응용 프로그램을 설치하는 것입니다. 사용자가 기본 모바일 앱 경험을 기대할 수 있는 위치(예: 시작 아이콘, 홈 화면 모양 등)에서 앱 모양을 제어할 수 있습니다.

서비스 워커
여기에서 진정한 마술이 일어납니다. 서비스 워커 는 웹과 모바일의 장점을 모두 PWA로 가져오는 데 도움을 줍니다.
기술적으로 서비스 작업자는 네트워크와 장치 사이에 있으며 프로그래밍 방식으로 HTTP 요청을 관리하여 콘텐츠를 제공합니다.
안정적이고 지능적인 캐싱을 처리하고 백그라운드 동기화를 유지하며 푸시 알림을 제공하며 가장 중요한 것은 이전에 방문한 사이트의 오프라인 검색을 가능하게 합니다.

애플리케이션 셸 아키텍처
앱 셸 모델 은 빠른 로딩을 위해 사용되는 아키텍처 접근 방식으로, 기본 앱을 시작하는 동안 사용자가 기대할 수 있는 것입니다.

기본 UI가 정적 프레임으로 저장되는 캐싱 메커니즘으로, 콘텐츠를 점진적으로 로드할 수 있어 사용자가 다양한 웹 연결 수준에도 불구하고 앱에 참여할 수 있습니다.
그렇다면 PWA를 훨씬 더 매력적으로 만드는 것은 무엇입니까? PWA가 해결한 웹사이트 또는 모바일 앱에 존재했던 주요 문제 몇 가지를 살펴보겠습니다.

PWA의 장점

이 섹션은 웹사이트와 기본 모바일 앱의 단점과 PWA가 이러한 문제를 해결하는 방법에 대해 각각 하나씩 두 부분으로 나눴습니다.

기본 모바일 앱에 대한 이점

기본 모바일 앱은 사용성과 속도 면에서 최고의 표준이지만 특정 결함이 있습니다. 그리고 기술은 발전함에 따라 개선될 뿐이며 모든 결함은 항상 제거됩니다.

현재 앱의 가장 큰 결함은 액세스할 수 없다는 것입니다. 대부분의 모바일 앱은 다운로드가 1000회 미만 입니다.

그들은 흔적도 남기지 않고 에테르 속으로 사라지지만, 그 이유는 무엇입니까? 앱을 찾으려면 앱을 찾아야 하기 때문입니다. 구글이 종종 우리를 웹사이트로 데려가는 웹사이트의 경우와 달리, 우리는 실제로 검색하지 않았습니다.

모바일 앱 사용에 대한 또 다른 놀라운 통계에 따르면 다운로드에서 활성 사용으로 사용자 볼륨 이 20% 감소 했습니다. 따라서 앱을 찾고, 다운로드하고, 마지막으로 사용하는 것 사이의 어딘가에 있습니다. 사용자 5명 중 1명은 사라집니다.

여기에 웹 사이트와 함께 이상적으로는 Android와 iOS 모두에서 모바일 앱을 개발하고 유지 관리하는 것은 비용이 많이 든다는 사실을 추가합니다.

Progressive Web Apps는 위의 모든 단점에 대한 솔루션입니다.

웹 사이트처럼 웹에 존재 하므로 Google 검색 결과에서 찾을 수 있으므로 PWA에 대한 접근성과 검색이 훨씬 쉬워집니다.

PWA는 사용자가 앱 스토어에서 앱을 다운로드해야 하는 단계를 우회하여 마찰을 제거합니다. 그들은 장치의 홈 화면에 직접 추가하고 거기에서 액세스할 수 있습니다.
인터넷 검색을 통해 LA행 항공권을 예약하면 웹사이트 대신 기본 앱과 동일한 사용자 친화적인 인터페이스로 여행 앱에 즉시 액세스할 수 있다고 상상해 보십시오. 그게 바로 PWA가 당신을 위한 것입니다.

PWA는 본질적으로 모바일 앱의 모든 기능을 갖춘 웹사이트이기 때문에 플랫폼에 독립적 입니다. 따라서 PWA를 구축하고 유지 관리하는 데 비용이 적게 들고 더 빨리 출하할 수 있습니다.

웹사이트보다 유리한 점

웹 사이트의 주요 단점은 모바일 앱에 비해 느리고 불안정한 연결에서 액세스할 때 신뢰할 수 없다는 것입니다.

이것이 "웹 비만 위기"를 일으킨 원인입니다. 우리는 HD 비디오와 다채로운 애니메이션이 있는 웹페이지를 좋아하지만, 동시에 통계에 따르면 사용자의 40%는 로드하는 데 3초 이상 걸리는 웹사이트에서 이탈합니다.

이 외에도 웹 사이트는 항상 앱처럼 알림 트레이와 홈 화면의 위치를 ​​갈망했습니다.

PWA는 웹사이트를 오랫동안 괴롭혀온 이러한 문제에 적절한 조합을 제공합니다.

앞서 언급했듯이 PWA는 빠른 로딩을 보장하는 앱 셸 아키텍처를 사용합니다 . 다른 콘텐츠가 점진적으로 또는 동적으로 로드되는 첫 번째 로드에 대해 안정적으로 빠른 웹 구성 요소가 포함된 정적 프레임을 제공합니다.

PWA는 앱과 마찬가지로 장치에서 추가하고 액세스할 수 있습니다 . 하나를 추가하는 것은 앱을 다운로드하는 것보다 간단합니다. 여기에서 탐색하는 동안 "홈 화면에 추가" 프롬프트를 수락하면 PWA가 장치의 홈 화면에 추가됩니다.
다음에 장치의 홈 화면에서 실행하면 모든 브라우저 컨트롤이 숨겨지고 앱처럼 작동합니다.

보시다시피 PWA는 두 가지 장점을 결합합니다. 강력한 백엔드 프레임워크와 웹사이트 연결성을 갖춘 네이티브 앱의 속도와 유용성. 이것이 바로 내가 PWA를 네이티브 앱과 웹사이트의 클론 자식이라고 부르는 이유이며, 모두에게 프로그레시브 웹 앱 개발에 대한 투자를 기대하도록 권장합니다. 그러나 동시에 이 모바일 애플리케이션 개발 가이드 에서 언급한 바와 같이 모바일 앱 개발 프로젝트의 성공에 영향을 미치는 다른 요소와 함께 시장에서 기술과 그 범위를 완전히 숙지할 것을 제안합니다 .