PWA 대 React Native: 자세히 살펴보기

PWA 및 Flutter와 마찬가지로 PWA 및 React Native는 현재 크로스 플랫폼 애플리케이션을 개발하는 데 가장 널리 사용되는 접근 방식 중 하나입니다. 그리고 이 주제에 대해 조사할 때 비즈니스에 적합한 개발 경로를 결정하려고 할 때 혼란스러워하는 것은 당연합니다. 이 기사에서 우리는 각 개발 접근 방식에 대한 세부 사항, 즉 정의, 사용 사례 및 각 개발 접근 방식이 비즈니스에 어떻게 도움이 될 수 있는지에 대한 세부 사항에 대해 설명합니다.

간략한 세부정보

다음은 각 개발 접근 방식과 사용 사례에 대한 간략한 요약입니다.

프로그레시브 웹 앱(PWA)

정의

프로그레시브 웹 앱(PWA)은 웹 기반 애플리케이션 개발을 위한 최신 솔루션입니다. 기본적으로 PWA는 푸시 알림, 오프라인 가용성, 설치 가능성 등과 같이 이전에 앱에 독점적이었던 기능을 포함하는 앱과 유사한 경험을 제공하기 위해 서비스 워커 및 웹 앱 매니페스트에 의존합니다.

사용 사례 및 예

웹 기반 특성으로 인해 PWA는 더 매력적이고 연결에 독립적인 경험을 제공하는 것이 주요 관심사인 웹 사이트 또는 단순히 더 넓은 범위의 청중에게 다가가고자 하는 웹 사이트에 가장 적합합니다.

현재 PWA는 구매 전환율을 높이고 충성도가 높은 고객 기반을 구축하기 위해 푸시 알림 및 오프라인 가용성과 같은 기능이 필요한 전자 상거래 산업에서 널리 채택되고 있습니다.

 추천 자료: 2021년 PWA(프로그레시브 웹 앱)의 12가지 모범 사례

네이티브 반응

정의

React Native는 크로스 플랫폼, JavaScript 기반의 진정한 네이티브 애플리케이션 을 개발하기 위한 프레임워크입니다. React Native로 빌드된 앱은 React의 선언적 UI 패러다임 및 JavaScript를 통해 기본 API와 상호 작용할 수 있습니다. 즉, 단일 React 코드베이스를 사용하여 사용자 경험을 손상시키지 않고 두 개의 플랫폼(iOS 및 Android)을 유지 관리할 수 있습니다.

사용 사례 및 예

React Native는 인기 있는 소셜 미디어 앱(예: Facebook, Instagram, Pinterest 등) 또는 디지털 커뮤니케이션 앱(예: Skype, Discord 등)과 같은 다양한 유형의 앱을 빌드하는 데 사용되기 때문에 특정 사용 사례를 정의하기 어렵습니다. , 텐센트 QQ 등). React Native로 빌드된 앱 목록은 React Native 앱 쇼케이스를 확인하세요.

구체적으로 들어가면

다음 부분에서는 각 개발 접근 방식의 세부 사항과 각 개발 접근 방식이 비즈니스 계획에 어떻게 부합할 수 있는지에 대한 통찰력을 얻을 것입니다.

언어

PWA는 웹 기술에 의존하여 앱과 같은 경험을 제공합니다. 따라서 HTML, CSS 및 JavaScript와 같은 웹 언어는 여전히 PWA를 구성하는 핵심 언어인 반면 React Native 앱은 React.js(JavaScript 라이브러리)를 핵심 언어로 사용합니다.

이것이 React Native 앱의 코드를 파헤칠 때 웹 언어와 몇 가지 유사점을 공유한다는 것을 확인해야 하는 이유입니다. 유일한 주요 차이점은 React Native 앱 이 웹 구성 요소 대신 기본 구성 요소 를 사용하여 사용자 인터페이스를 생성한다는 것입니다.

사용자 인터페이스

PWA는 웹 기술을 기반으로 하고 브라우저 엔진에서 실행되기 때문에 일반적인 PWA의 사용자 UI는 훈련된 눈에 기본적으로 보이지 않을 수 있습니다. 그러나 일반 사용자의 경우 PWA의 앱과 유사한 UI와 진정한 네이티브 앱 UI의 차이는 기껏해야 미미합니다.

대신 React Native 앱은 기본 구성 요소를 사용하여 진정한 기본 경험 을 제공할 수 있습니다. 여기에는 iOS용 <DatePickerIOS> 및 <ProgressViewIOS> 또는 <ViewPagerAndroid> 및 <ToastAndroid> 와 같은 플랫폼별 구성 요소가 포함됩니다. 안드로이드용.

성능

성능은 이것의 진실에 도달하기 어렵기 때문에 민감한 주제입니다. 그러나 이후 두 개발 접근 방식 모두 JavaScript를 많이 사용하므로 모든 끝에서 성능이 매우 유사할 것으로 기대할 수 있습니다. React Native는 사용 중인 시스템과 더 긴밀하게 통합되고 브라우저를 통해 통신할 필요가 없기 때문에 약간의 이점이 있습니다.

그러나 PWA 가 브라우저 환경에 있다는 사실이 실제로 일반적인 웹사이트처럼 작동한다는 의미는 아닙니다. PWA에 사용된 고급 캐싱 방법 덕분에 일반 웹사이트/웹 앱에서 볼 수 있는 것처럼 페이지 사이를 로드할 때 더 이상 가끔 딸꾹질이 발생하지 않습니다. PWA가 본질적으로 향상된 단일 페이지 응용 프로그램이라는 사실과 함께 PWA의 인지된 성능은 얻을 수 있는 진정한 기본 앱 경험에 가깝습니다.

이것의 한 예는 일회용품 산업의 쿠웨이트 기반 브랜드인 Temoorst입니다. SimiCart를 솔루션 제공업체로 선택한 이 브랜드는 최상의 ROI를 위해 기본 앱과 PWA를 모두 선택했으며 PWA의 성능 측면은 여전히 ​​브랜드가 예상하지 못한 것입니다. 블라인드 테스트에서 PWA와 React Native 앱 간의 성능 및 시각적 차이를 찾기가 어려울 것입니다.

React Native 앱과 PWA 간의 성능 차이를 테스트하려면 Temoorst 앱을 사용해 보는 것이 좋습니다. 앱 자체는 잘 최적화된 React Native 앱 또는 PWA가 최대로 푸시될 때 어떻게 보일 수 있는지에 대한 평가입니다.

• React Native 앱 : Google Play 스토어 | 애플 앱스토어
• PWA : https://temoorst.com/

보안

사용 중인 장치와의 높은 수준의 통합으로 인해 React Native 애플리케이션은 자연적으로 더 안전하고 취약성에 덜 취약합니다. React Native 앱에 더 많은 보안 계층을 추가하기 위해 개발 프로세스 중에 다음과 같은 다양한 접근 방식을 사용할 수 있습니다.

• SSL 고정: 앱과 서버 간 연결을 보호하기 위해
• 키체인/민감한 정보: 생체 인식/얼굴 인증과 함께 안전한 로컬 저장소 제공
• Jscrambler: 자기 방어 계층을 추가하여 코드 변조 방지

PWA가 브라우저 환경에 존재하고 대부분의 기능에 대해 브라우저를 활용하기 때문에 대부분의 보안 작업은 브라우저 자체에서 수행됩니다. 일반 웹 사이트와 비교하여 PWA는 PWA의 핵심 구성 요소인 서비스 작업자가 HTTPS를 통해서만 실행되기 때문에 더 안전합니다. 즉, 클라이언트 측과 서버 측 간의 통신은 항상 암호화됩니다.

서비스 워커는 HTTPS를 통해서만 실행됩니다. 서비스 작업자는 네트워크 요청을 가로채고 응답을 수정할 수 있으므로 "중간자" 공격이 매우 나쁠 수 있습니다.

서비스 워커 소개

발견 가능성

이것이 PWA가 빛나는 곳입니다. PWA는 웹에서 사용할 수 있고 검색 엔진에 노출될 뿐만 아니라 실제로 앱 스토어에도 게시할 수 있습니다. 구글, 마이크로소프트, 심지어 삼성까지 모두 재패키지된 PWA를 앱 스토어에 수용함으로써 더 많은 PWA 채택을 추진하기 위한 대열에 합류했습니다. 예를 들어 Microsoft Store는 한 단계 더 나아가 자체 Bing 크롤러에 의해 인덱싱된 고품질 PWA로 앱 스토어를 자동으로 다시 채울 계획입니다.

Bing 크롤러로 구동되는 Microsoft Store는 선택한 품질의 Progressive Web App을 자동으로 인덱싱합니다.

Microsoft Edge 및 Windows 10에 프로그레시브 웹 앱 도입

현재로서는 Apple App Store가 PWA가 도달할 수 없는 유일한 남아 있는 인기 있는 앱 마켓플레이스입니다. 이는 Apple이 검토 지침에서 앱이 승인되려면 "재패키지된 웹사이트를 넘어서" 있어야 한다는 점을 분명히 했기 때문입니다. 그들의 수익을 해치는 것을 두려워하는 웹.
PWA와 비교할 때 React Native로 빌드된 앱의 검색 가능성은 그다지 인상적이지 않지만 프레임워크의 플랫폼 간 특성은 단일 코드베이스로 Google Play 스토어와 Apple App Store 모두에서 앱을 계속 검색할 수 있음을 의미합니다. 그리고 일부 국가(미국 포함)에서는 iOS 사용자가 대다수이고 PWA를 Apple App Store에 게시할 수 없다는 점을 고려하면 대부분의 사용자는..

하드웨어 접근성

React Native 앱은 진정한 네이티브 애플리케이션이기 때문에 네이티브 API에 훨씬 더 폭넓게 액세스할 수 있습니다. 이는 장치의 하드웨어에 대한 낮은 수준의 액세스(예: NFC(Near Field Communication), 연락처 목록 등) 및 시스템 액세스(예: 시스템 설정, 로그 등에 대한 액세스)도 가능하고 활용할 수 있음을 의미합니다. 사용자 경험을 개선합니다.
그리고 PWA는 하드웨어 액세스 가능성을 위해 웹 API에 의존하기 때문에 PWA는 시스템 리소스를 활용하는 방법이 자연스럽게 더 제한 됩니다. 사용 중인 브라우저가 모든 최신 하드웨어 액세스 API를 지원하는 최상의 시나리오에서 PWA는 위치 정보, 카메라 및 마이크에 대한 액세스, 증강 현실(WebXR 사용 장치 API).

 추천 자료: PWA(프로그레시브 웹 앱) 및 하드웨어 액세스

개발 비용

개발 비용 측면에서 React Native 프로젝트는 관련된 높은 수준의 복잡성으로 인해 비용이 많이 드는 경향이 있습니다. 예를 들어 기본 React Native 프로젝트의 비용은 일반적입니다. 기본 PWA 프로젝트 비용은 약 $1000 – $10.000 에 불과한 반면, $15.000 이상입니다. 그러나 다른 기본 앱 프레임워크와 비교할 때 React Native는 플랫폼에 구애받지 않는 아키텍처 덕분에 여전히 비용 효율적인 솔루션입니다. 단일 React Native 코드베이스를 사용하여 앱을 Google Play Store와 Apple App Store에 게시할 수 있으므로 사용자 경험을 해치지 않으면서 총 개발 비용을 크게 줄일 수 있습니다.

일반적으로 React Native 프로젝트보다 저렴하지만 PWA 프로젝트의 개발 비용은 선택한 개발 경로에 따라 크게 달라질 수 있습니다. 예를 들어 헤드리스 아키텍처(기존 아키텍처에 비해 더 유연하고 확장 가능한 솔루션)를 사용하기로 결정한 경우 프로세스에 필요한 높은 수준의 기술 전문 지식으로 인해 PWA의 개발 비용이 크게 증가할 것으로 예상할 수 있습니다. .

결론

이들은 매우 특정한 요구를 위한 두 가지 개발 경로이기 때문에 React Native와 PWA 중에서 선택하는 것은 어려운 결정이 될 수 있습니다. PWA는 가벼우며 업데이트 및 설치 프로세스가 수월하며 PWA가 제공하는 기능은 일반 앱 사용자에게 충분해야 합니다. 그러나 현재 Apple이 App Store에 부과하는 제한 사항으로 인해 모바일 사용자의 대다수가 iPhone을 사용하는 경우 좋은 React Native 앱에 투자하는 것이 좋습니다.

크로스 플랫폼 React Native 앱 또는 헤드리스 PWA를 구축하려는 Magento 판매자를 위해 SimiCart에서 경쟁자보다 경쟁력을 확보하는 데 도움이 되는 비용 효율적인 솔루션을 제공합니다.