프로그레시브 웹 앱 (PWA)을 가장 친한 친구로 만들기

“PWA는 웹 개발의 혁명입니다. 최소한의 비용으로 웹 및 모바일 앱의 이점을 결합한 훌륭한 사용자 경험을 제공함으로써 생산성을 향상시키는 데 도움이됩니다.
악수는 좋은 습관입니다

PWA와의 동요는 고객의 참여를 유지합니다. 그리고 PWA는 항상 가장 친한 친구가 될 준비가되어 있는데 왜 PWA에 친구 요청을 보내지 않습니까?

PWA를 향한 좋은 발걸음을 내딛을 시간입니다. PWA와의 우정이 어떻게 유익한 지 설명하겠습니다!

PWA와 혼동하지 마십시오

어떤 이유로 PWA는 단일 페이지 응용 프로그램 (SPA)이라고 생각합니다.
이것은 실제로 잘못되었습니다 (상태 코드 400 ).

SPA는 PWA 일 수 있지만 PWA는 SPA 일 필요는 없습니다.

PWA는 모든 사람과 함께 일하는 것을 좋아합니다

ReactJs, Angular, VueJS와 같은 프레임 워크 또는 라이브러리에 구축 된 웹 사이트는 HTML로도 PWA가 될 수 있습니다.

가장 간단한 용어로, Progressive Web App은 '앱과 같은'느낌을주는 추가 기능을 갖춘 모바일 웹 사이트입니다. 브라우저 인스턴스를 사용하여 작동하며 안정적인 인터넷 연결 없이도 원활한 작동을 위해 서비스 워커를 사용합니다.

PWA가 Google 기술이라는 신화가 있다면 이러한 정보만으로도 신화를 정리할 수 있습니다. 프로그레시브 웹 애플리케이션은 웹 표준을 기반으로합니다. 모든 브라우저 및 모든 플랫폼에서 작동합니다.

따라서 웹 사이트이지만 시작 화면, 맞춤 로딩 화면, 부드러운 애니메이션, 푸시 알림 및 탐색 표시 줄이없는 기본 모바일 앱처럼 느껴집니다. 일반 최종 사용자는이를 모바일 앱이라고 부를 수 있습니다.

프로그레시브 웹 응용 프로그램은 세 가지 기술 요구 사항을 충족해야하는 웹 사이트입니다.

  • HTTPS를 사용하여 제공해야 함 (보안)
  • 최소한의 특정 아이콘 세트가있는 유효한 웹 매니페스트 파일이 있어야합니다.
  • 유효한 서비스 작업자 및 최소 오프라인 지원을 등록해야합니다

이러한 요구 사항 중 어느 것도 웹 사이트가 JavaScript를 사용해야한다고 말하는 것은 없습니다. 간단히 말해서 클라이언트 측 JavaScript를 사용하여 서비스 워커를 등록해야합니다.

PWA는 다음과 같은 기능을 지원합니다.

  • 홈 화면에 고정 — 홈 화면에 웹앱 아이콘을 추가 할 수 있습니다.
  • 푸시 알림 — 웹용 푸시 API 및 알림 API를 통해 기본 앱에서와 같이 푸시 알림을 통합 할 수 있습니다.
  • 스플래시 화면 — 매니페스트 파일은 기본 앱과 같은 도달 범위 참여를 위해 PWA의 스플래시 화면을 관리합니다.
  • 지리적 위치 — 지리적 위치 API를 통해 사용자의 현재 위치에 액세스 할 수 있습니다
  • 오프라인 작업 모드 — 캐싱 메커니즘을 관리하는 서비스 직원으로 인해 인터넷이 없어도 풍부한 사용자 경험을 얻을 수 있습니다.
  • 미디어 기능에 액세스 — 마이크, 비디오 및 카메라 장치에 액세스 할 수 있습니다. 또한 WebRTC API를 사용하여 화상 및 음성 통화 기능을 구현하십시오.

PWA 기능으로 요구 사항이 충족되는 경우 동일한 프로젝트를 위해 별도의 모바일 앱을 개발할 필요는 없습니다. 이는 PWA가 여전히 일부 기본 앱 기능을 제공하기 위해 고심하고 있음을 의미합니다.

네, 웹 개발자에게는 정말 좋은 순간입니다. 다른 유용한 기능은 이미 진행 중입니다. PWA는 이미 기본 앱과 같은 기능을 제공하기를 기대하고 있습니다. 우리에게 실제로 도움이 될 기능을 살펴 보겠습니다.

PWA는 앞으로 다음과 같은 기능을 지원할 것입니다.

  • Bluetooth — 웹 Bluetooth API가 개발 중이며 곧 웹 플랫폼에서 Bluetooth에 액세스 할 것입니다.
  • 센서 — 센서는 오늘날의 개발 시대에서 매우 중요한 부분으로, 주변 광 센서, 근접 센서, 가속도계 센서, 자력계 센서 및 자이로 스코프 센서와 같은 일부 센서의 액세스는 이미 개발 중에 있습니다.
  • 기본 공유 — 웹 공유 API의 일부로 장치의 기본 공유 메커니즘을 호출 할 수 있습니다.
  • 지문 센서 — 웹 인증 API를 사용하여 지문 센서를 통해 사용자를 인증 할 수 있습니다. 그러나 보안상의 이유로 여전히 개발 중입니다.

요즘 모두 왜 PWA를 채택합니까?

PWA를 채택한 대기업에 대한 일부 통계를 읽은 후 PWA의 힘을 알고 모든 사람이 PWA를 원하는 이유를 명확하게 이해할 수 있습니다.

다음은 유명한 회사의 PWA 사례 연구에서 얻은 데이터입니다.

  • 트위터는 2017 년 4 월 트위터 라이트 프로그레시브 웹 앱을 개발했으며 그 결과 트위터 세션 당 페이지 수가 65 % 증가했으며, 트윗 수가 75 % 증가하고 이탈률이 20 % 감소했습니다.
  • 인도 최대의 전자 상거래 사이트 인 Flipkart는 2015 년에 앱 전용 전략을 중단하기로 결정했습니다. 그 후 PWA로 구동되는 Flipkart Lite가 제공되었으며 훌륭한 결과를 읽음으로써 놀라게 될 것입니다. 사용자는 사이트에 더 많은 시간을 3 배의 비율로 보냈으며 재 참여율은 40 % 더 높았으며 홈 화면에 추가 화면을 통해 도착한 사람들의 전환율은 70 % 더 높았으며 기본 앱에 비해 데이터 사용량이 3 배 더 낮았습니다.
  • Alibaba.com, 세계 최대 온라인 B2B 거래 플랫폼. Alibaba.com은 신규 방문자와 재 방문자 모두에게 훌륭한 사용자 경험을 제공하기 위해 PWA라는 새로운 전략을 도입했습니다. 그들의 새로운 전략은 놀라운 결과를 낳았습니다. Alibaba.com은 브라우저에서 76 % 더 높은 전환율을 얻었으며 iOS에서 월별 활성 사용자는 4 %, Android에서는 30 %, 홈 화면에 추가에서 상호 작용 률은 4 배 증가했습니다.

예, 믿기지 않으며 Progressive Web App의 아름다움을 받아 들여야합니다. PWA를 가장 친한 친구로 만들도록 강요하는 이유를 이해했습니다.

Play 스토어에서 PWA를 게시 할 준비가되었습니다.

예 예 예! Play 스토어와 PWA는 이제 친구가되었습니다. 이제 TWA (Trusted Web Activities)를 사용하여 PWA를 Play 스토어에 게시 할 수 있습니다. Chrome 72는 URL 또는 브라우저 관련 요소를 표시하지 않고 전체 화면 웹보기를 지원하기 위해 신뢰할 수있는 웹 활동을 추가했습니다. 따라서 웹앱의 APK를 생성하고 Android 스튜디오의 도움과 안드로이드 개발에 대한 지식으로 상점을 재생하기 위해 업로드 할 수 있습니다.

TWA에 대한 자세한 지식을 얻으려면 아래 비디오를 시청하는 것이 좋습니다.

Facebook Lite, Instagram Lite, Flipkart Lite 및 Twitter Lite와 같은 PWA의 존재는 대부분 WebView를 사용하며 앱과 같은 느낌을줍니다. 그러나 Apple은 여전히 ​​TWA를 지원하지 않습니다.

결국 PWA는 웹 앱을 개발하기위한 훌륭하고 비용 효율적인 방법이라고 말할 수 있습니다. 확실히 웹 개발의 미래입니다. 앞으로도 PWA가 앞으로 더 많은 서비스를 제공하기를 바랍니다.

박수 박수 박수! 박수는 좋은 습관이기 때문에