Android용 PWA 또는 하이브리드 웹앱 개발 시작하기
이 가이드는 웹 및 디바이스 플랫폼(Android, iOS, Windows)에서 사용할 수 있는 단일 HTML/CSS/JavaScript 코드베이스를 사용하여 Windows에서 하이브리드 웹앱 또는 PWA(프로그레시브 웹앱)를 만드는 데 도움이 됩니다.
적절한 프레임워크와 구성 요소를 사용하여 웹 기반 애플리케이션은 사용자에게 기본 앱과 매우 유사한 방식으로 Android 디바이스에서 작동할 수 있습니다.
Android 디바이스에 설치할 수 있는 웹앱에는 두 가지 주요 유형이 있습니다. 주요 차이점으로, 애플리케이션 코드가 하이브리드에서는 앱 패키지에 포함되며 PWA에서는 웹 서버에 호스팅됩니다.
하이브리드 웹앱: 코드(HTML, JS, CSS)는 APK로 패키징되며 Google Play 스토어를 통해 배포할 수 있습니다. 보기 엔진은 사용자의 인터넷 브라우저와 분리되어 세션이나 캐시 공유가 없습니다.
PWA(프로그레시브 웹앱): 코드(HTML, JS, CSS)는 웹에 있으며 APK로 패키징할 필요가 없습니다. 리소스는 서비스 작업자를 사용하여 필요에 따라 다운로드 및 업데이트됩니다. Chrome 브라우저는 앱을 렌더링하고 표시하지만 기본적으로 표시되며 일반 브라우저 주소 표시줄 등을 포함하지 않습니다. 브라우저와 스토리지, 캐시 및 세션을 공유할 수 있습니다. 이는 기본적으로 특수 모드에서 Chrome 브라우저에 대한 바로 가기를 설치하는 것과 같습니다. PWA는 신뢰할 수 있는 웹 작업을 사용하여 Google Play 스토어에 나열할 수도 있습니다.
PWA 및 하이브리드 웹앱은 다음과 같은 점에서 기본 Android 앱과 매우 유사합니다.
- App Store(Google Play 스토어 및/또는 Microsoft Store)를 통해 설치할 수 있습니다.
- 카메라, GPS, 블루투스, 알림 및 연락처 목록과 같은 기본 디바이스 기능에 액세스
- 오프라인으로 작업(인터넷 연결 없음)
PWA에는 다음과 같은 몇 가지 고유한 기능도 있습니다.
- 웹에서 직접 Android 홈 화면에 설치할 수 있습니다(App Store 사용 안 함).
- Google Play 스토어를 통해 신뢰할 수 있는 웹 작업을 사용하여 추가로 설치할 수 있습니다.
- 웹 검색을 통해 검색하거나 URL 링크를 통해 공유할 수 있습니다.
- 네이티브 코드를 패키징할 필요가 없도록 서비스 작업자에 의존
하이브리드 앱 또는 PWA를 만드는 데 프레임워크가 필요하지 않지만 PhoneGap(Cordova 사용) 및 Ionic(Cordova 또는 Capacitor 사용, Angular 또는 React 사용)을 포함하여 이 가이드에서 다룰 몇 가지 자주 사용되는 프레임워크가 있습니다.
Apache Cordova는 플러그 인을 사용하여 기본 WebView에 있는 JavaScript 코드와 기본 Android 플랫폼 간의 통신을 단순화할 수 있는 오픈 원본 프레임워크입니다. 이러한 플러그 인은 코드에서 호출할 수 있고 기본 Android 디바이스 API를 호출하는 데 사용할 수 있는 JavaScript 엔드포인트를 노출합니다. Cordova 플러그 인의 몇 가지 예에는 배터리 상태, 파일 액세스, 진동/벨소리 등과 같은 디바이스 서비스에 대한 액세스가 포함됩니다. 이러한 기능은 일반적으로 웹앱이나 브라우저에서 사용할 수 없습니다.
Cordova에는 두 가지 자주 사용되는 배포판이 있습니다.
PhoneGap: Adobe에서 지원을 중단했습니다.
Ionic은 각 플랫폼(Android, iOS, Windows)의 디자인 언어와 일치하도록 앱의 사용자 인터페이스(UI)를 조정하는 프레임워크입니다. Ionic을 사용하면 Angular 또는 React를 사용할 수 있습니다.
Ionic으로 PWA 또는 하이브리드 웹앱 구축을 시작하려면 먼저 다음 도구를 설치해야 합니다.
Ionic 에코시스템과 상호 작용하기 위한 Node.js. Windows용 NodeJS를 다운로드하거나 WSL(Linux용 Windows 하위 시스템)을 사용하여 NodeJS 설치 가이드를 따릅니다. 여러 프로젝트 및 NodeJS 버전으로 작업하는 경우 nvm(노드 버전 관리자) 사용을 고려할 수 있습니다.
코드 작성을 위한 VS Code. Windows용 VS Code 다운로드. Linux 명령줄을 사용하여 앱을 빌드하려는 경우 WSL 원격 확장을 설치할 수도 있습니다.
기본 설정하는 명령줄 인터페이스(CLI) 작업을 위한 Windows 터미널. Microsoft Store에서 Windows 터미널을 설치합니다.
버전 제어를 위한 Git. Git 다운로드.
명령줄에 다음을 입력하여 Ionic 및 Cordova를 설치합니다.
npm install -g @ionic/cli cordova
다음 명령을 입력하여 "탭" 앱 템플릿을 사용하여 Ionic Angular 앱을 만듭니다.
ionic start photo-gallery tabs
앱 폴더로 변경:
cd photo-gallery
웹 브라우저에서 앱을 실행합니다.
ionic serve
자세한 내용은 Ionic Cordova Angular 문서를 참조하세요. 앱을 하이브리드에서 PWA로 이동하는 방법을 알아보려면 Ionic 문서의 Angular 앱을 PWA로 만들기 섹션을 방문합니다.
명령줄에 다음을 입력하여 Ionic 및 Cordova-Res를 설치합니다.
npm install -g @ionic/cli native-run cordova-res
"Tabs" 앱 템플릿을 사용하고 다음 명령을 입력하여 Capacitor를 추가하여 Ionic Angular 앱을 만듭니다.
ionic start photo-gallery tabs --type=angular --capacitor
앱 폴더로 변경:
cd photo-gallery
앱을 PWA로 만들기 위해 구성 요소를 추가합니다.
npm install @ionic/pwa-elements
src/main.ts
파일에 다음을 추가하여 @ionic/pwa-elements를 가져옵니다.
import { defineCustomElements } from '@ionic/pwa-elements/loader';
// Call the element loader after the platform has been bootstrapped
defineCustomElements(window);
웹 브라우저에서 앱을 실행합니다.
ionic serve
자세한 내용은 Ionic Capacitor Angular 문서를 참조하세요. 앱을 하이브리드에서 PWA로 이동하는 방법을 알아보려면 Ionic 문서의 Angular 앱을 PWA로 만들기 섹션을 방문합니다.
명령줄에 다음을 입력하여 Ionic CLI를 설치합니다.
npm install -g @ionic/cli
다음 명령을 입력하여 React로 새 프로젝트를 만듭니다.
ionic start myApp blank --type=react
앱 폴더로 변경:
cd myApp
웹 브라우저에서 앱을 실행합니다.
ionic serve
자세한 내용은 Ionic React 문서를 참조하세요. 앱을 하이브리드에서 PWA로 이동하는 방법을 알아보려면 Ionic 문서의 React 앱을 PWA로 만들기 섹션을 방문합니다.
Android 디바이스에서 Ionic 앱을 테스트하려면 디바이스를 플러그 인하고(먼저 개발용으로 사용하도록 설정되어 있는지 확인) 명령줄에 다음을 입력합니다.
ionic cordova run android
Android 디바이스 에뮬레이터에서 Ionic 앱을 테스트하려면 다음을 수행해야 합니다.
필수 구성 요소인 JDK(Java Development Kit), Gradle 및 Android SDK를 설치합니다.
Android 가상 디바이스(AVD) 만들기: [Android 개발자 가이드]](https://developer.android.com/studio/run/managing-avds.html)를 참조하세요.
Ionic에 대한 명령을 입력하여 앱을 빌드하고 에뮬레이터에 배포합니다(
ionic cordova emulate [<platform>] [options]
). 이 경우 명령은 다음과 같아야 합니다.
ionic cordova emulate android --list
자세한 내용은 Ionic 문서에서 Cordova 에뮬레이터를 참조하세요.
Windows developer 피드백
Windows developer은(는) 오픈 소스 프로젝트입니다. 다음 링크를 선택하여 피드백을 제공해 주세요.