티스토리 뷰
이미 모바일 홈페이지가 있으며 앱으로 씌워서 스토어에 올리고자 할 경우, 웹앱의 기본이 되는 프로젝트를 Cordova로 만들어 보겠습니다.
대상은 Cordova가 지원하는 Android, iOS이며 설명은 Android 기준으로 합니다.
별도로 아이콘 등의 요구 상황에 따라 이 베이스 프로젝트를 수정해서 사용하며, 이 글에서는 프로젝트 생성 및 세팅까지만 설명합니다.
요구사항
- Cordova CLI (https://cordova.apache.org/#getstarted 참고)
- Android경우 Android Studio 및 Java JDK 설치
- iOS경우 OSX환경에서 XCode 설치
- SSL이 적용된 HTTPS 모바일 홈페이지
설치
Cordova 프로젝트를 생성하고 플랫폼을 추가합니다.
> cordova create myapp com.domain.myapp
> cd myapp
> cordova platform add androidmyapp와 myapp.domain.com은 적절히 변경합니다.
프로젝트 수정
VSCode 등 IDE로 해당 프로젝트 폴더를 열어서 루트의 config.xml 파일에 allow-navigation내용을 추가합니다.
<widget id=...>
...
<allow-navigation href="https://mydomain.com" />
<platform name="android">
...
</widget>allow-navigation은 platform바로 윗 줄에 widget의 child로 추가하면 되며 mydomain.com을 홈페이지 주소로 변경합니다.
다음으로 www/index.html파일을 열어서 meta http-equiv내용을 교체합니다.
<meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://mydomain.com https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *">body의 내용을 모두 교체합니다.
<body>
Verifying connectivity..
<a id="bkpLink" href="https://mydomain.com">mydomain.com</a>
<div class="app">
<div id="deviceready" class="blink">
<p class="event listening">Connecting to Device</p>
<p class="event received">Device is Ready</p>
</div>
</div>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="js/index.js"></script>
</body>mydomain.com을 홈페이지 주소로 변경합니다.
www/js/index.js파일을 열어서 내용을 모두 교체합니다.
var app = {
initialize: function() {
this.bindEvents();
},
bindEvents: function() {
document.addEventListener('deviceready', this.onDeviceReady, false);
},
onDeviceReady: function() {
app.receivedEvent('deviceready');
var targetUrl = "https://mydomain.com";
var bkpLink = document.getElementById("bkpLink");
bkpLink.setAttribute("href", targetUrl);
bkpLink.text = targetUrl;
window.location.replace(targetUrl);
},
receivedEvent: function(id) {
var parentElement = document.getElementById(id);
var listeningElement = parentElement.querySelector('.listening');
var receivedElement = parentElement.querySelector('.received');
listeningElement.setAttribute('style', 'display:none;');
receivedElement.setAttribute('style', 'display:block;');
console.log('Received Event: ' + id);
}
};
app.initialize();마찬가지로 mydomain.com을 홈페이지 주소로 변경합니다.
실행
Android를 실행합니다.
> cordova run android
앱이 실행되고 모바일 홈페이지로 이동되었다면 정상적으로 세팅이 완료된 것입니다.
문제 해결
Android 빌드에 문제가 생긴다면 아래 글을 참조하세요.
Cordova(코르도바) Android(안드로이드) ANDROID_SDK_ROOT , JAVA_HOME, Gradle 빌드 오류
윈도우 환경에서 Cordova의 Android를 사용하기 위해 Android Studio와 JDK가 설치는 되어있지만 환경 미설정 등의 원인으로 오류가 발생되었을 때 해결방법을 알아보겠습니다. 사전 요구사항 - Android Stud
bundw.tistory.com
추가 기능
Cordova Hosted WebApp에서 Plugin 연동하기
https://bundw.tistory.com/64 Cordova(코르도바) Hybrid Hosted WebApp(하이브리드 웹앱) 베이스 만들기 이미 모바일 홈페이지가 있으며 앱으로 씌워서 스토어에 올리고자 할 경우, 웹앱의 기본이 되는 프로젝트
bundw.tistory.com
참고 사이트
Run Your Hosted Web App in an Apache Cordova App - Cordova
Run Your Hosted Web App in an Apache Cordova App
docs.microsoft.com
'SW개발 > Mobile-Hybrid' 카테고리의 다른 글
| Cordova(코르도바) Orientation(화면) 가로,세로 고정 및 회전 지정 (0) | 2021.12.08 |
|---|---|
| Cordova(코르도바) 실행 로딩화면 Splashscreen(스플래시 스크린) 적용 (0) | 2021.12.08 |
| Cordova(코르도바) Hosted WebApp에서 Plugin 연동하기 (0) | 2021.12.06 |
| Cordova(코르도바) Android(안드로이드) ANDROID_SDK_ROOT , JAVA_HOME, Gradle 빌드 오류 (0) | 2021.12.06 |
| Cordova(코르도바) VSCode 등에서 UnauthorizedAccess 오류 (0) | 2021.12.06 |