JQuery Mobile - PhoneGap apps

Building PhoneGap apps with jQuery Mobile

폰갭(PhoneGap)은 웹 기술로 된 native application 을 개발할 수 있도록 해 주는 HTML5 app 플랫폼 입니다. 애플리케이션은 일반 HTML 페이지로 빌드 됩니다. 이것을 UIWebView나 WebView 안에 넣은 native 어플리케이션 처럼 작동시키도록 package 되는 겁니다. 폰갭은 jQuery Mobile과 잘 어울려서 많이 사용 되고 있습니다. 폰갭과 함께 사용하는데 몇가지 팁을 제공해 드리려고 합니다.

local file:// URL로 폰갭 어픞피케이션에 의해 initial application document가 로드 됩니다. 이 의미는 여러분 회사의 remote server로부터 받은 페이지를 pull in 하고 싶으시다면 그 서버의 절대 URL 경로를 넣어야 한다는 겁니다. 왜냐하면 여러분의 document는 근본적으로 file://URL 형식이고 여러분의 remote 서버로부터 페이지나 assets들을 로딩하는 것은 특정 상황에서는 block 될 수 있는 cross-domain request 이기 때문입니다.

Phone Gap jQuery Mobile 어플리케이션 안에서 cross-domain 페이지들을 접근하는 것은 두가지 중요한 기능을 controll 해야 가능합니다. $.support.cors 와 $.mobile.allowCrossDomainPages 이 그것입니다. 이것은 추후에 폰갭이 버전업해서 기능 추가나 기능 변경이 있게 되면 영향을 받을 수 있습니다.


$.support.cors

jQuery core에는 $.support.cors boolean 이 있습니다. 이것은 cross-domain request를 위한 W3C의 Cross-Origin Resource Sharing 기능을 지원하는 브라우저인지 아닌지를 나타내는 겁니다.

jQuery Mobile은 jQuery core의 $ajax() functionality에 의존하고 있습니다. $.support.cors 는 $ajax에게 cross-domain 페이지들을 로드하라고 하기 위해 반드시 true로 세팅되어야 합니다. 블랙베리캍은 일부 플랫폼에서는 webviews가 지원되지만 $.ajax()가 cross-domain 을 할 수 없도록 $.support.cors 값이 false로 세팅되어 있는 경우가 있다는 report를 받았습니다. 이럴 경우는 페이지나 asset 들의 로딩이 fail 될 수 있습니다. $.support.cors를 true로 세팅해야 합니다.


$.mobile.buttonMarkup.hoverDelay

만약 버튼 down이나 hover 상태가 (lists,buttons,links etc) 약간 버벅거린다고 느껴지시면 $.mobile.buttonMarkup.hoverDelay 가 사용중일 가능성이 있습니다. 이렇게 되면 터치 이벤트와 관계된 클래스와의 작동 시간을 줄일 수도 있지만 동시에 그 클래스가 유저가 스크롤링할 때도 apply 될 수도 있습니다. (예. 긴 리스트의 링크가 있을 때)


$.mobile.allowCrossDomainPages

jQuery Mobile이 external page를 로드하려고 할 때 이 request는 $.mobile.loadPage()를 통해 run 됩니다. 이것은 $.mobile.allowCrossDomainPages confituration 옵션이 true로 세팅되었을 경우의 cross-domain request에서만 해당 도비니다. 왜냐하면 jQuery Mobile은 그 브라우저의 location hash내의 어떤 페이지가 view 되고 있는지를 track 하기 때문입니다. 그러면 cross-site scripting 공격이 가능할 수 있습니다. 질문 안의 XSS 코드가 hash를 조종할 수 있고 그 결과로 cross-domain URL을 세팅할 수 있기 때문입니다. 이것이 $.mobile.allowCrossDomainPages 의 디폴트 값을 false로 하는 주요 이유입니다.


그래서 폰갭 앱 에서는 원격 서버의 assets 로딩을 하게 되는 phone home 일 경우 이 $.support.cors 가 $.mobile.allowCrossDomainPages 반드시 true로 세팅되어 있어야 합니다. $.mobile.allowCrossDomainPages 옵션은 이런 cross-domain request 가 일어나기 전에 세팅되어 있어야 합니다. 그래서 저희는 이것을 mobileinit 핸들러에 wrapping 할 것을 권장합니다.


$( document ).bind( "mobileinit", function() {
    // Make your jQuery Mobile framework configuration changes here!

    $.mobile.allowCrossDomainPages = true;
});

PhoneGap White Listing

PhoneGap 1.0은 폰갭의 internal webview가  cross-domain request를 가능하게 하는 white-listing server에 대한 아이디어를 소개했습니다. 여기에 대한 정보는 PhoneGap wiki에서 보실 수 있습니다.

모든 플랫폼에서 이 white-listing feature 를 지원하는 것은 아닙니다. 그러니까 보다 자세한 사항은 PhoneGap 문서를 확인하세요. 폰갭 1.0 이전 버전은 어떤 서버에든 cross-domain request를 허용합니다.

Still having issues?

Here are a few more tips that aren't specifically related to PhoneGap but are good to know:

아래는 직접적으로 폰갭과 관련이 있지는 않지만 알아 두시면 도움이 될 사항들입니다.

앱을 인스톨 할 때 pushState feature 를 disabling하도록 추천합니다. 왜냐하면 이 기능이 있으면 원하지 않은 곳으로 navigation 하는 행위가 일어날 수 있기 때문입니다. webview 안에 URL이 보일 필요가 없다면 이 이 기능을 계속 able 상태로 놓아 둘 필요가 없습니다.

안드로이드에서는 웹뷰에서 loading 하는 시간이 길면 강제로 timeout 하게 합니다. 그런데 그 시간이 여러분이 필요로하는 시간보다 더 짧을 수 있습니다. 이 경우 이클립스 플러그인에서 Java class 가 generated 될 때 수정해서 timeout을 바꿀 수 있습니다.

super.setIntegerProperty("loadUrlTimeoutValue", 60000);