티스토리 뷰

SW개발/Mobile-Hybrid

Cordova(코르도바) Hybrid Hosted WebApp(하이브리드 웹앱) 베이스 만들기

sy.lukas 2021. 12. 6. 14:10
반응형

이미 모바일 홈페이지가 있으며 앱으로 씌워서 스토어에 올리고자 할 경우, 웹앱의 기본이 되는 프로젝트를 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 android

myapp와 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 빌드에 문제가 생긴다면 아래 글을 참조하세요.

https://bundw.tistory.com/63

 

Cordova(코르도바) Android(안드로이드) ANDROID_SDK_ROOT , JAVA_HOME, Gradle 빌드 오류

윈도우 환경에서 Cordova의 Android를 사용하기 위해 Android Studio와 JDK가 설치는 되어있지만 환경 미설정 등의 원인으로 오류가 발생되었을 때 해결방법을 알아보겠습니다. 사전 요구사항 - Android Stud

bundw.tistory.com

 

추가 기능

https://bundw.tistory.com/65

 

Cordova Hosted WebApp에서 Plugin 연동하기

https://bundw.tistory.com/64 Cordova(코르도바) Hybrid Hosted WebApp(하이브리드 웹앱) 베이스 만들기 이미 모바일 홈페이지가 있으며 앱으로 씌워서 스토어에 올리고자 할 경우, 웹앱의 기본이 되는 프로젝트

bundw.tistory.com

 

참고 사이트

https://docs.microsoft.com/en-us/previous-versions/visualstudio/cross-platform/tools-for-cordova/tips-workarounds/run-web-app-in-cordova?view=toolsforcordova-2017 

 

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
반응형