Chrome 브라우저에서 deviceready 이벤트를 시작하는 방법 (phonegap 프로젝트 디버그 시도)

Chrome 브라우저에서 deviceready 이벤트를 시작하는 방법 (phonegap 프로젝트 디버그 시도)

---

PhoneGap 애플리케이션을 개발 중이며 전화가 아닌 Chrome에서 디버그 할 수 있기를 원합니다. 그러나 PhoneGap이 "deviceready"이벤트를 발생시킬 때 트리거되는 onDeviceReady () 함수에서 내 코드를 초기화합니다. Chrome이이 이벤트를 실행하지 않기 때문에 내 코드가 초기화되지 않습니다.

다음은 내 코드의 제거 된 버전입니다.

var dashboard = {};

$(document).ready(function() {
    document.addEventListener("deviceready", dashboard.onDeviceReady, false);
}); 

dashboard.onDeviceReady = function() {
    alert("hello!"); //this is never fired in Chrome
};

기본적으로 다음을 수행 하는 StopGap 코드를 사용해 보았습니다 .

var e = document.createEvent('Events'); 
e.initEvent("deviceready");
document.dispatchEvent(e);

하지만 Chrome 자바 스크립트 콘솔에서 해당 코드를 실행하면 "hello"경고가 여전히 트리거되지 않습니다. 내가 도대체 ​​뭘 잘못하고있는 겁니까? 아니면 Chrome은 deviceready와 같은 "맞춤"이벤트 실행을 지원하지 않습니까?

---

onLoad 핸들러 함수에 다음 코드를 추가합니다.

    if (navigator.userAgent.match(/(iPhone|iPod|iPad|Android|BlackBerry)/)) {
        document.addEventListener("deviceready", onDeviceReady, false);
    } else {
        onDeviceReady();
    }

"deviceready"이벤트는 cordova.js에서 발생하므로 응용 프로그램 코드에서이 이벤트의 존재를 감지하는 방법을 모릅니다.

---

결국 StopGap 코드를 꺼내 약간의 지연을 도입해야했습니다 (이 코드는 페이지 별 코드와는 별도의 스크립트에서 실행 됨).

window.setTimeout(function() {
    var e = document.createEvent('Events'); 
    e.initEvent("deviceready", true, false); 
    document.dispatchEvent(e);
}, 50);

---

Ripple 모바일 에뮬레이터를 사용하십시오. Chrome 웹 스토어에서 무료입니다. 설치되면 테스트하려는 페이지로 이동하여 페이지를 마우스 오른쪽 버튼으로 클릭하고 Ripple Mobile Emulator> 사용을 선택합니다. 메시지가 표시되면 PhoneGap을 선택합니다.

에뮬레이터는 훌륭하지만 아직 베타 버전이므로 모든 것이 아직 구현되지 않았습니다.

Ad @ m

---

내 모바일 사이트 및 모바일 앱의 경우 jQuery와 함께 다음 코드를 사용하고 있습니다.

function init() { ... };
if ("cordova" in window) {
    $(document).on("deviceready", init);
} else {
    $(init);
}

---

디버깅을 위해 Safari를 사용하고 다음을 수행합니다.

//my standard PG device ready
document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
//debug("onDeviceReady")
getDefaultPageSetup();

}

//then add this (for safari
window.onload = function () {
if(! window.device)
    onDeviceReady()
}

---

user318696은 내가 찾던 마법을 가졌습니다. "device"는 cordova에 정의되어 있으며 브라우저 (phoneGap 앱 래퍼가 아님)에서는 정의되지 않습니다.

편집 :

Cordova가 장치에서 초기화하는 데 꽤 오랜 시간이 걸리고 여기에서 "원래"답변이 더 이상 유효하지 않은 시나리오를 만났습니다. 브라우저에서 테스트를 실행할 때 URL에 매개 변수를 요구하는 것으로 이동했습니다. (예제에서는 원본 페이지의 URL에서 "testing ="을 찾고 있습니다)

$(document).ready(function () {

    // ALWAYS LISTEN
    document.addEventListener("deviceready", main, false);

    // WEB BROWSER
    var url = window.location.href;
    if ( url.indexOf("testing=") > -1 ) {
        setTimeout(main, 500);
    }

});

실물:

나는 이것을 얼마나 오래 신뢰해야하는지 충분히 알지 못했지만 [향후 릴리스에서 브라우저에서 "장치"를 정의하기 시작할 수 있을까?]하지만 적어도 2.6.0까지는 안전합니다.

$(document).ready(function () {
    // call main from Cordova
    if ( window.device ) {
        document.addEventListener("deviceready", main, false);
    }

    // from browser
    else {
        main();
    }
});

---

user318696의 window.device 감지가 잘 작동합니다. Kendo UI Mobile 및 PhoneGap을 사용하는 경우 다음 스크립트는 PhoneGap 빌드 및 웹 브라우저 모두에서 기능을 활성화합니다. 이것은 Burke Holland의 Kendo UI Mobile 용 PhoneGap Build Bootstrap 프로젝트를 기반으로 하며 페이지 하단의 본문 닫기 태그 앞에 배치하도록되어 있습니다.

    <script type="text/javascript">
    var tkj = tkj || {};

    tkj.run = (function () {
        // create the Kendo UI Mobile application
        tkj.app = new kendo.mobile.Application(document.body);
    });

    // this is called when the intial view shows. it prevents the flash of unstyled content (FOUC)
    tkj.show = (function () {
        $(document.body).show();
    });

    (function () {
        if (!window.device) {
            //initialize immediately for web browsers
            tkj.run();
        }
        else if (navigator.userAgent.indexOf('Browzr') > -1) {
            // blackberry
            setTimeout(tkj.run, 250)
        } else {
            // attach to deviceready event, which is fired when phonegap is all good to go.
            document.addEventListener('deviceready', tkj.run, false);
        }
    })();
    </script>

---

Chemik 제안 향상. 다음 코드는 navigator.userAgent 문자열을 사용하여 클라이언트 브라우저가 모바일 플랫폼에 있는지 일반적으로 확인합니다.

데스크톱 브라우저에서 분리하는 목적은 Android apk를 컴파일 / 설치하기 전에 코드 확인을 허용하는 것입니다. 빠른 코드 변경, 이클립스에서 컴파일 및 Android에서로드하는 것보다 데스크톱 브라우저를 새로 고치는 것이 훨씬 빠릅니다. 또 다른 추가 보너스는 한 탭에서 weinre를 사용하고 다른 탭의 Android 자산에서 index.html을 사용할 수 있다는 것입니다 (그리고 방화범 사용).

추신 : 내 개인 VPS 정보 및 UUID가 있으므로 weinre 코드가 제외됩니다.

고마워!

<!-- Framework:jQuery -->
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.2, minimum-scale=1.0, maximum-scale=3.0, user-scalable=yes" >
<link  href="./framework/jquery/mobile/1.2.0/jquery.mobile-1.2.0.min.css" type="text/css" media="screen" rel="stylesheet" title="JQuery Mobile">
<script src="./framework/jquery/jquery-1.8.2.min.js"></script>
<script src="./framework/jquery/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>

<!-- Framework:Weinre -->

<!-- Framework:PhoneGap -->
<script src="./framework/phonegap/cordova-2.0.0.js" type="text/javascript" charset="utf-8"></script>

<script type="text/javascript" charset="utf-8">
    var mobile = false;
    if (navigator.userAgent.match(/(iPhone|iPod|iPad|Android|BlackBerry)/)) {
        document.addEventListener("deviceready", function(){mobile = true; onDeviceReady();}, false);
    } else {
        $(document).ready(onDeviceReady);   
    }
    function onDeviceReady() {
        setEvents();
        test();
        if (mobile) {
            navigator.notification.alert("Debugging-ready for\n" + navigator.userAgent);
        } else {
            alert("Debugging-ready for\n" + navigator.userAgent);
        }
    };
</script>

---

다음과 같은 이벤트를 시뮬레이션합니다.

const simulateEvent = (eventName, attrs = {customData:"data"}, time = 1000, target = document) => {
    let event = new CustomEvent(eventName, { detail:  attrs });    
    setTimeout(() => {
        target.dispatchEvent(event);
    }, time);
};

var divReady = document.querySelector('div#ready');

document.addEventListener('deviceready', (e) => {
 console.log("triggered with:", e.detail);
 divReady.innerHTML = `Ready! ${JSON.stringify(e.detail)}`;
});

simulateEvent('deviceready', {customData:"My custom data goes in event.detail"});

<div id="ready"> Wait for ready... </div>

참고 URL : https://stackoverflow.com/questions/6687099/how-to-fire-deviceready-event-in-chrome-browser-trying-to-debug-phonegap-projec