PWA와 네이티브 앱 : 어떤 것을 선택해야합니까?

작가: Randy Alexander

창조 날짜: 2 4 월 2021

업데이트 날짜: 6 할 수있다 2024

콘텐츠

PWA와 네이티브 앱 비교 : 차이점은 무엇입니까?
프로그레시브 웹 앱 : 웹 구축
PWA의 강점
PWA의 약점
네이티브 반응
React Native의 강점
React Native의 약점
NativeScript
NativeScript의 강점
NativeScript의 약점

앱을 빌드 할 때 어떤 접근 방식을 취해야합니까? PWA / 웹 기술 경로를 선택해야합니까? 아니면 네이티브로 이동하여 특정 플랫폼에 맞게 설계해야합니까? 두 옵션 모두 장단점이 있으며이 기사에서는 웹 및 네이티브 앱을 만드는 데 사용되는 몇 가지 인기있는 선택에 집중합니다.

PWA (Progressive Web Apps), 일명 웹 앱은 널리 사용되는 웹 기술 HTML, CSS 및 JavaScript로 구축되며 웹 브라우저에서 작동합니다. (빌드에 도움이되는 몇 가지 필수 HTML 태그를 확인하십시오.) PWA는 효과적으로 앱처럼 보이도록 설계된 모바일 웹 사이트이며 웹 API를 사용하면 네이티브 앱과 유사한 기능을 제공합니다.

앱 빌드에 대한 자세한 내용은 앱을 만드는 방법에 대한 게시물을 참조하거나, 만들고 싶은 사이트 인 경우 최고의 웹 사이트 빌더 및 웹 호스팅 서비스를 참조하세요.

PWA와 네이티브 앱 비교 : 차이점은 무엇입니까?

프로그레시브 웹 앱은 앱 스토어 없이도 장치에 설치할 수 있고 라이브라는 장점이 있습니다. 또한 프로세스의 일부는 개발자가 앱이 표시되는 방식과 시작되는 방식을 제어 할 수있는 웹 앱 매니페스트입니다. 또한 웹 디자이너 / 프런트 엔드 개발자는 즉시 구축을 시작하는 데 필요한 기술을 이미 갖추고 있습니다. 기본 앱과 달리 새로운 언어를 배울 필요가 없습니다.

네이티브 앱은 특정 OS를 염두에두고 구축됩니다. iOS 및 Android – 프레임 워크 또는 언어를 사용하여 그 목적을 달성합니다. iOS 애플리케이션은 일반적으로 Xcode 또는 Swift와 Android 앱인 JavaScript를 사용합니다. 그러나이 기사에서는 두 플랫폼 모두에서 작동하는 두 가지 JavaScript 기반 오픈 소스 프레임 워크 (React Native 및 NativeScript)에 중점을 둡니다.

기본 앱의 장점은 일반적으로 장치 하드웨어 및 소프트웨어를 더 잘 사용하고 더 빠르고 응답 성이 뛰어나며 앱 스토어의 등급을 통해 품질 보증을받을 수 있기 때문에 더 나은 기능을 제공한다는 것입니다. 그러나 특정 프레임 워크 나 라이브러리를 사용하는 방법을 배워야합니다.

여기서 우리는 앱 빌드를위한 세 가지 다른 옵션을 살펴 봅니다. 하나는 웹용 (PWA)이고 다른 하나는 네이티브 용 (React Native, NativeScript)입니다. 우리는 그들이 어떻게 작동하는지, 무엇을 할 수 있는지 살펴보고 그들의 강점과 약점을 살펴보고 앱을 구축하기 위해 어떤 옵션을 선택해야하는지 결정하는 데 도움을줍니다.

프로그레시브 웹 앱 : 웹 구축

PWA의 강점

앱은 브라우저에서도 작동합니다.
배포 : 브라우저, 엔터프라이즈 및 앱 스토어
React, Angular, Vue, vanilla 또는 기타 프레임 워크를 활용할 수 있습니다.

PWA의 약점

모든 기본 API에 액세스 할 수 없음
iOS 및 iPadOS의 기능 및 스토어 배포가 제한됩니다.
지속적인 진화

PWA는 HTML, CSS, JavaScript 및 브라우저의 API와 같은 웹 스택 만 사용하여 고성능 오프라인 설치 가능한 앱을 만드는 현재 디자인 패턴입니다. 서비스 워커와 웹 앱 매니페스트 사양 덕분에 이제 Android, iOS, iPadOS, Windows, macOS, Chrome OS 및 Linux 용 설치 후 최고 수준의 앱 환경을 만들 수 있습니다.

PWA를 생성하려면 서버 측, 바닐라 JavaScript, React, Vue, Angular 또는 기타 클라이언트 측 프레임 워크에서 모든 아키텍처를 사용할 수 있습니다. 단일 페이지 응용 프로그램 또는 다중 페이지 웹 응용 프로그램 일 수 있으며 오프라인 상태에서 사용자를 지원하는 방법을 정의합니다.

이 접근 방식에서는 앱의 리소스를 패키징하고 서명 할 필요가 없습니다. 웹 서버에서 파일을 호스팅하기 만하면 서비스 워커가 클라이언트에서 파일을 캐싱하고 설치 후에 제공합니다. 이는 또한 앱에 업데이트가 필요한 경우 서버에서 파일을 변경하기 만하면 서비스 워커의 로직이 사용자 또는 앱 스토어 개입없이 사용자의 기기에서 파일을 업데이트 할 책임이 있음을 의미합니다.

배포 측면에서 가장 일반적인 방법은 브라우저입니다. 사용자는 홈 화면에 추가 또는 설치 메뉴 항목을 사용하거나 설치 초대를 수락하거나 호환되는 플랫폼에서 사용자 정의 웹 앱 사용자 인터페이스를 사용하여 브라우저에서 앱을 설치합니다. Apple이 App Store에 게시 된 순수 PWA를 거부하고 웹 개발자가 Safari를 통해 배포하도록 권장한다는 점은 주목할 가치가 있습니다.

사용자 인터페이스는 순전히 웹 런타임에 의해 관리되므로 웹 디자이너가 화면에 각 컨트롤을 렌더링해야합니다. Ionic과 같은 UI 프레임 워크 또는 머티리얼 디자인 라이브러리를 사용하는 경우 HTML 및 CSS는 Android 또는 iOS의 기본 인터페이스를 모방하지만 필수는 아닙니다.PWA를 수행 할 때 좋은 사용자 경험을 유지하려면 웹 성능 기술을 적용해야합니다.

기능 측면에서 PWA는 해당 플랫폼의 브라우저 엔진에서 사용할 수있는 API에만 액세스 할 수 있으며 앱 스토어 PWA 배포를 제외하고 네이티브 코드로 확장 할 수 없습니다. 이 문제에서 iOS 및 iPadOS는 PWA에 대해 더 제한된 플랫폼 인 반면 Chrome (Android 및 데스크톱 OS 용)은 더 많은 가용성을 제공하며 Fugu 프로젝트를 통해 가능한 모든 API를 JavaScript에 추가하기 위해 열심히 노력하고 있습니다.

최고의 클라우드 스토리지 : 적합한 옵션을 선택하십시오.

네이티브 반응

React Native의 강점

React.js와 동일한 패턴
일부 웹 API가 노출됨
웹 및 데스크탑 지원

React Native의 약점

웹 UI 구성 요소를 재사용 할 수 없습니다.
네이티브 브리지에는 약간의 작업이 필요합니다.
반응 경험이 필요합니다

React Native는 Facebook이 후원하는 오픈 소스 JavaScript 기반 구성 요소 프레임 워크로, React 디자인 패턴과 JavaScript 언어를 사용하여 하나의 소스 코드에서 iOS, iPadOS 및 Android 용 네이티브 앱을 컴파일합니다.

그러나 렌더링에는 HTML 요소가 허용되지 않습니다. 다른 기본 구성 요소 만 유효합니다. 따라서 렌더링하는 대신 div> 와 함께 p> 그리고 입력> JSX로 요소를 렌더링하면 보기> 와 함께 텍스트> 그리고 TextInput>. 스타일 구성 요소의 경우 여전히 CSS를 사용하고 레이아웃은 Flexbox를 통해 정의됩니다.

사용자 인터페이스는 브라우저의 DOM에서 렌더링되지 않지만 Android 및 iOS의 기본 사용자 인터페이스 라이브러리를 사용합니다. 따라서 버튼> ReactNative에서 iOS의 UIButton 인스턴스가되고 android.widget.Button Android의 수업; React Native와 관련된 웹 런타임이 없습니다.

그러나 모든 자바 스크립트 코드는 기기의 자바 스크립트 가상 머신에서 실행되므로 앱을 컴파일 할 때 자바 스크립트에서 실제 네이티브 코드로의 변환이 없습니다. Fetch API, WebSockets 및 브라우저의 타이머와 같이 웹 개발자를위한 잘 알려진 API 세트가 있습니다 : setInterval 및 requestAnimationFrame. 다른 기능은 애니메이션과 같은 사용자 지정 API를 통해 플랫폼에 배포됩니다.

두 개의 무료 CLI (Expo 또는 더 고급 및 공식 ReactNative CLI)로 빠른 React Native 프로젝트를 시작할 수 있습니다. 공식 CLI를 사용하는 경우 iOS 및 iPadOS에서 동일한 작업을 수행하려면 Android 앱과 Xcode를 컴파일하고 테스트하는 데 Android Studio가 필요하므로 해당 플랫폼에 대한 macOS 컴퓨터가 필요합니다.

React Native는 iOS 및 Android 용 네이티브 앱을 컴파일합니다. 즉, 앱 배포는 공개 앱용 앱 스토어, 엔터프라이즈 배포 및 알파 / 베타 테스트와 같은 다른 네이티브 앱과 동일한 규칙을 따릅니다. 일반적으로 브라우저를 통해 앱을 배포 할 수 없지만 웹용 React Native 및 Windows 플랫폼 용 Microsoft의 React Native가 도움이 될 수 있습니다.

NativeScript

NativeScript의 강점

코딩 및 테스트를위한 좋은 도구
바로 플레이 할 수있는 광범위한 앱 갤러리
모든 Android 및 iOS API는 JS로 노출됩니다.

NativeScript의 약점

소규모 커뮤니티
웹 UI 구성 요소를 재사용 할 수 없습니다.
웹, 데스크톱 또는 React 지원 없음

NativeScript는 React Native만큼 잘 알려져 있지 않지만 JavaScript 및 웹 프레임 워크의 기본 iOS 및 Android 앱과 같은 분야에서 경쟁합니다. JavaScript 또는 TypeScript 및 XML 사용자 인터페이스 파일을 사용하여 네이티브 앱을 만들 수 있습니다. 또한 Angular와 Vue를 즉시 지원하므로 이러한 프레임 워크에 익숙한 개발자에게 훌륭한 솔루션입니다.

Angular 또는 Vue를 사용하면 NativeScript의 장점이 더 명확 해집니다. Angular의 경우 모든 데이터 바인딩을 포함하여 템플릿에 HTML 대신 XML을 사용하여 사용하던 것과 동일한 구성 요소를 만듭니다. XML에서 대신 div> 와 함께 p> 그리고 img>, 당신은 StackLayout> 와 함께 라벨> 그리고 이미지> 구성 요소.

CSS 및 Sass는 브라우저의 CSS와 유사한 스타일로 지원됩니다. 라우팅 및 네트워크 관리는 표준 Angular 서비스 구현을 통해 수행됩니다. Vue의 경우 유사합니다. HTML을 사용하는 대신 XML로 템플릿을 작성합니다. 템플릿> .vue 파일의 요소.

NativeScript에는 Android 또는 iOS 기본 컨트롤에 매핑되는 구성 요소 모음이 포함되어 있으므로 목록 또는 선택기를 렌더링 할 때 React Native와 동일한 아이디어를 사용하여 기본 앱이됩니다.

JavaScript 또는 TypeScript 코드 (트랜스 파일 됨)는 네이티브 환경과의 브리지가있는 온 디바이스 JavaScript 가상 머신에서 실행됩니다. 이 브리지에서 Android 또는 iOS / iPadOS의 전체 네이티브 API가 노출되므로 크로스 플랫폼 API에 액세스 할 수 있음에도 불구하고 JavaScript / TypeScript에서 Java 또는 Objective-C 코드를 인스턴스화하거나 호출 할 수 있으며 NativeScript는 데이터 유형을 마샬링합니다.

NativeScript는 VS 코드 플러그인, CLI, 핫 리로드 테스트 시스템 및 NativeScript 플레이 그라운드 앱을 포함하여 도구를 훌륭하게 지원하므로 테스트하는 동안 모든 종속성은 물론 온라인과 같은 여러 추가 서비스를 설치할 필요가 없습니다. 운동장.

마지막으로 NativeScript는 규칙, 엔터프라이즈 배포 및 알파 / 베타 테스트를 준수하는 경우 공식 배포 채널 및 앱 스토어에서 설치할 수있는 Android 및 iOS 용 앱만 컴파일합니다. 일반적으로 브라우저에서 앱을 배포 할 수있는 방법이 없으며이 플랫폼에 대한 데스크톱 앱 솔루션도 없습니다.

이 기사는 원래 325 호 웹 디자이너와 개발자를위한 세계에서 가장 많이 팔리는 잡지 인 net. 구입 325 호 또는 구독 그물에.