cordova Hosted WebApp에서 Plugin 연동하기
- 프로그래밍/하이브리드앱
- 2022. 6. 29.
원본
Cordova(코르도바) Hosted WebApp에서 Plugin 연동하기
https://bundw.tistory.com/64 Cordova(코르도바) Hybrid Hosted WebApp(하이브리드 웹앱) 베이스 만들기 이미 모바일 홈페이지가 있으며 앱으로 씌워서 스토어에 올리고자 할 경우, 웹앱의 기본이 되는 프로젝트
bundw.tistory.com
백업용
프로젝트의 www/js 폴더에 host.js 파일을 생성하고 아래 내용을 추가합니다.
var app = {
initialize: function() {
this.bindEvents();
},
bindEvents: function() {
document.addEventListener('deviceready', this.onDeviceReady, false);
},
onDeviceReady: function() {
app.receivedEvent('deviceready');
console.log("Cordova device plugin : " + device.uuid); // plugin function
},
receivedEvent: function(id) {
}
};
app.initialize();기능이 추가된 후 정상적으로 작동이 된다면 "Cordova device plugin : <UUID>"가 출력 될 것입니다.
프로젝트를 빌드합니다.
> cordova build android
웹앱은 이렇게 준비가 끝났습니다.
웹서버 설정
웹서버에서 Cordova의 js 파일을 업로드할 곳에 폴더를 생성합니다. 이 글에서는 cordova_js로 합니다.
www/js/host.js 파일을 웹서버 cordova_js/에 업로드합니다.
platforms/android/platform_www/의 모든 파일 및 폴더를 cordova_js/에 업로드합니다.
모바일 페이지가 열리는 모든 페이지의 body 마지막부분에 아래의 스크립트를 추가합니다. (index.html 등)
<body>
...
<script type="text/javascript" src="cordova_js/cordova.js"></script>
<script type="text/javascript" src="cordova_js/host.js"></script>
</body>
웹서버의 준비가 끝났습니다.
실행 및 결과 확인
Cordova Android를 실행합니다.
> cordova run android
Android Studio의 logcat 등에서 로그를 확인합니다.
...
io.cordova.hellocordova I/chromium: [INFO:CONSOLE(18)] "Cordova device plugin : 1934eff70945df88""Cordova device plugin : <UUID>"가 출력되었다면 정상적으로 Plugin이 연동된 것 입니다.
'프로그래밍 > 하이브리드앱' 카테고리의 다른 글
| cordova - 스플래시 (0) | 2022.06.29 |
|---|---|
| 안드로이드 앱 아이콘 크기 및 업로드용 필요 이미지 (0) | 2022.06.27 |
| cordova & web pull to refresh (0) | 2022.06.23 |
| cordova fcm The "chunk" argument must be of type string or an instance of Buffer or Uint8Array (0) | 2022.06.16 |
| 코도바3. cordova push (0) | 2022.06.16 |