PhoneGap: पता लगाएँ कि क्या डेस्कटॉप ब्राउज़र पर चल रहा है


118

मैं एक वेब एप्लिकेशन विकसित कर रहा हूं जो PhoneGap का उपयोग करता है: एक मोबाइल संस्करण के लिए बनाएँ और 'डेस्कटॉप' और मोबाइल संस्करणों के लिए एक एकल कोडबेस रखना चाहते हैं। मैं यह पता लगाने में सक्षम होना चाहता हूं कि क्या फोनगैप कॉल काम करेगा (यानी, मोबाइल डिवाइस पर उपयोगकर्ता है जो फोनगैप का समर्थन करेगा)।

मैंने खोजा है और विश्वास नहीं कर सकता कि ऐसा करने का कोई सरल तरीका नहीं है। कई लोगों ने सुझाव दिए हैं;

जब तक आप ऐप के डेस्कटॉप संस्करण से PhoneGap जावास्क्रिप्ट फ़ाइल को नहीं हटाते हैं, जिसमें से कोई भी काम नहीं करता है, जो एक कोडबेस होने के मेरे लक्ष्य को हरा देता है।

अब तक एकमात्र समाधान जो मैं आया हूं वह है ब्राउज़र / उपयोगकर्ता एजेंट सूँघना, लेकिन यह कम से कम कहने के लिए मजबूत नहीं है। किसी भी बेहतर समाधान का स्वागत है!

संपादित करें: कुछ छोटे समय समाप्त होने के बाद फोनगैप फ़ंक्शन को कॉल करने का प्रयास करना एक बेहतर समाधान है - यदि यह काम नहीं करता है, तो मान लें कि उपयोगकर्ता डेस्कटॉप वेब ब्राउज़र पर है।


जब से आप बिल्ड का उपयोग कर रहे हैं, नीचे @ bt का उत्तर देखें: stackoverflow.com/a/18478002/241244 । लगता है कि यह स्वीकार किए जाते हैं और शीर्ष मतदान के जवाब से बेहतर हो सकता है।

मैं स्पष्ट बिल्ड-टाइम कॉन्फ़िगरेशन के पक्ष में रन-टाइम डिटेक्शन से बचता हूं क्योंकि यह 100% प्रभावी है। मैं केवल {isPhonegap: true} जैसे अपने index.jade टेम्पलेट के लिए एक स्थानीय संस्करण पास करता हूं, फिर टेम्पलेट में मैं सशर्त रूप से phonegap.js स्क्रिप्ट शामिल कर सकता हूं, और मैं चाहता हूं कि सभी phonegap विशिष्ट init करूं।
जेसी हट्टाबॉफ़

जवाबों:


115

मैं इस कोड का उपयोग करता हूं:

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

अपडेट करें

फ़ोनगैप ब्राउज़र पर चल रहा है या नहीं, यह पता लगाने के कई अन्य तरीके हैं, यहाँ एक और बढ़िया विकल्प है:

var app = document.URL.indexOf( 'http://' ) === -1 && document.URL.indexOf( 'https://' ) === -1;
if ( app ) {
    // PhoneGap application
} else {
    // Web page
}  

जैसा कि यहां देखा गया है: मोबाइल ब्राउज़र या फोनगैप एप्लिकेशन के बीच का पता लगाएं


इसके लिए धन्यवाद - लंबे समय तक इंतजार करने के बाद यह देखने के लिए कि अन्य लोगों ने क्या सुझाव दिया है, यह सबसे अच्छा समाधान लगता है। चीयर्स।
अरोनसनवेलवेल

35
यह सटीक नहीं है, क्योंकि अगर मैं डिवाइस के ब्राउज़ पर एक ही पृष्ठ खोलूंगा, तो onDiceiceReady () कभी भी कॉल नहीं करेगा। इसके अलावा अगर मैं ब्राउज़र (डिबग उद्देश्यों के लिए) में UserAgent को बदल दूंगा, onDeviceReady () कभी भी कॉल नहीं करेगा।
स्लाविक मेल्टरर

3
निश्चित नहीं है कि आप क्या कह रहे हैं - लेकिन ऐसा लगता है कि आप इसे लागू कर रहे हैं फोन ब्राउज़र का उपयोग करने में समस्या आएगी ... यह आपके डेस्कटॉप ब्राउज़र पर परीक्षण करने का एक समाधान है न कि आपके फोन।
बजे

7
डिवाइस ब्राउजर में ऐप खोलने पर यह मदद नहीं करता है। बेहतर समाधान: window.cordova के लिए जाँच करें। IPhone सिम्युलेटर (ब्राउज़र) या एंड्रॉइड डिवाइस (ब्राउज़र) पर परीक्षण करने पर भी PhoneGap का पता लगाना चाहिए। मेरे विकसित होने का यही तरीका है। लेकिन चीजों को प्राप्त करने की बहुत संभावनाएं हैं। ;-) अपने समाधान पोस्ट करने के लिए thx!
मारियो

मैं उलझन में हूँ, विंडोज़ फोन जैसे अन्य प्लेटफार्मों के बारे में क्या? क्या उनके पास एक उपयोगकर्ता है जो उस नियमित अभिव्यक्ति से मेल खाता है? एक त्वरित Google खोज का तात्पर्य है: madskristensen.net/post/Windows-Phone-7-user-agents.aspx
mooreds

49

मैंने कुछ दिन पहले इसके बारे में एक पोस्ट लिखी थी। यह सबसे अच्छा समाधान है जो आप पा सकते हैं (जब तक कि PhoneGap कुछ जारी करेगा, शायद या शायद नहीं), यह छोटा, सरल और सटीक है (मैंने इसे हर संभव तरीके और मंच पर जांचा है)।

यह कार्य 98% मामलों के लिए कार्य करेगा।

/**
 * Determine whether the file loaded from PhoneGap or not
 */
function isPhoneGap() {
    return (window.cordova || window.PhoneGap || window.phonegap) 
    && /^file:\/{3}[^\/]/i.test(window.location.href) 
    && /ios|iphone|ipod|ipad|android/i.test(navigator.userAgent);
}

if ( isPhoneGap() ) {
    alert("Running on PhoneGap!");
} else {
    alert("Not running on PhoneGap!");
}

अन्य 2% मामलों को पूरा करने के लिए, इन चरणों का पालन करें (इसमें मूल कोड में थोड़ा बदलाव शामिल है):

स्रोत के साथ __phonegap_index.html नामक एक फ़ाइल बनाएँ :

<!-- __phonegap_index.html -->
<script type="text/javascript">
    function isPhoneGap() {
        //the function's content is as described above
    }

    //ensure the 98% that this file is called from PhoneGap.
    //in case somebody accessed this file directly from the browser.
    if ( isPhoneGap() )
        localStorage.setItem("isPhoneGap","1");

    //and redirect to the main site file.
    window.location = "index.html";
</script>

अब, मूल रूप से अपने सभी PhoneGap प्लेटफ़ॉर्म पर index.html से __phonegap_index.html पर प्रारंभ पृष्ठ को बदल दें। मान लीजिए कि मेरे प्रोजेक्ट का नाम उदाहरण है , आपको जिन फ़ाइलों को बदलने की आवश्यकता है वे हैं (फोनगैप संस्करण 2.2.0 के लिए)

  • iOS -CordovaLibApp/AppDelegate.m
  • Android -src/org/apache/cordova/example/cordovaExample.java
  • विंडोज 8 -example/package.appxmanifest
  • ब्लैकबेरी -www/config.xml
  • वेबओएस -framework/appinfo.json
  • बड़ा - src/WebForm.cpp(पंक्ति ५६)
  • विंडो 7 फोन - कोई विचार नहीं है (कोई अभी भी उस मंच पर विकसित कर रहा है ?!)

अंत में, आप इसे अपनी साइट पर कहीं भी उपयोग कर सकते हैं, यदि यह PhoneGap पर चल रहा है या नहीं:

if ( localStorage.getItem("isPhoneGap") ) {
    alert("Running on PhoneGap!");
} else {
    alert("Not running on PhoneGap!");
}

आशा करता हूँ की ये काम करेगा। :-)


4
यह उत्तर सबसे अच्छा मिला!
blong824

3
हाँ, यह काम करता है लेकिन कुछ बार कोड का अगला भाग सही नहीं होता है /^file:\/{3}[^\/]/i.test(window.location.href)लेकिन हम PhoneGap का उपयोग कर रहे हैं, उदाहरण के लिए जब index.html को किसी अन्य पृष्ठ से लोड किया जा रहा है, config.xml पर कुछ इस तरह से<content src="http://10.100.1.147/" />
vudduu

3
(cordova || PhoneGap || phonegap) यदि कोई भी वैरिएबल परिभाषित नहीं किया गया है तो अभिव्यक्ति एक रेफरेंस को फेंक देगी। आप के साथ परीक्षण करना चाहिए typeof cordova !== undefined, है ना?
रोबजफालो

1
@rblakeley आप सही हैं। मैंने पहली पंक्ति को स्विच किया:return ( typeof cordova !== undefined || typeof PhoneGap !== undefined || typeof phonegap !== undefined )
एथानिल

1
@rojobuffalo: ऐसा लगता है कि उत्तर को संशोधित किया गया है, जिससे यह फिर से अपेक्षित के रूप में काम करता है ( यानी यह उपसर्ग के ReferenceErrorकारण अब और नहीं फेंकता window)। बस सोचा था कि मैं इसे इंगित करूंगा, क्योंकि यह वास्तव में टिप्पणी श्रृंखला को पुराना बनाता है (और इस प्रकार, गलत)।
प्रियादु नीमरे

27

मुझे पता है कि यह कुछ समय पहले उत्तर दिया गया था, लेकिन "PhoneGap.available" अब मौजूद नहीं है। आपको उपयोग करना चाहिए:

if (window.PhoneGap) {
  //do stuff
}

या 1.7 के बाद से, पसंद करें:

if (window.cordova) {
  //do stuff
}

EDIT 2019: जैसा कि टिप्पणियों में कहा गया है, यह केवल तभी काम करता है जब आप अपने डेस्कटॉप ब्राउज़र बिल्ड में कॉर्डोबा लिब को शामिल नहीं करते हैं। और निश्चित रूप से आपके द्वारा लक्षित प्रत्येक डिवाइस के लिए केवल सख्त न्यूनतम जावास्क्रिप्ट / html / सीएसएस फ़ाइलों को शामिल करना एक अच्छा अभ्यास है


18
यह सच नहीं है, क्योंकि window.PhoneGap या window.cordova को तभी परिभाषित किया जाएगा जब आप स्क्रिप्ट कॉर्डोवा-xxxjs को शामिल करते हैं, भले ही यह ब्राउज़र पर लोड हो।
स्लाविक मेल्टसर

क्या आप मेरे साथ एक उदाहरण के लिए मदद कर सकते हैं। बस इंडेक्स को लोड करें। मैं क्या कर रहा हूं कि मैंने अपने स्थानीय सर्वर में www फ़ोल्डर के तहत सभी फाइलें अपलोड कर दी हैं, मैं index.html लोड कर रहा हूं। लेकिन डिवाइस को तैयार रखें निकाल नहीं है
नासिफ

5
यह अब सही उत्तर प्रतीत होता है (कॉर्डोवा 3.4 के साथ, कम से कम)। अन्य सभी विधियाँ केवल समय की बर्बादी हैं क्योंकि cordova.js को एक सरल <script type = "text / javascript" src = "cordova.js"> </ script> के साथ प्रयोग में लाया जाता है। आप वास्तव में वास्तविक फ़ाइल को इंगित नहीं करते हैं, इसलिए यह किसी ब्राउज़र में चलने पर लोड नहीं होता है। यह केवल एक कॉर्डोवा बिल्ड में है जो मोबाइल डिवाइस पर चल रहा है।
माइकल ओरील

ऐसा लगता है कि PhoneGap Build का उपयोग करते समय यह विशेष रूप से अच्छी तरह से काम करेगा।

4
@SlavikMe कॉर्डोवा स्क्रिप्ट को नॉन-कॉर्डोवा बिल्ड में शामिल न करें।
जैक्सन

21

अगर हम एक कॉर्डोवा / फोनगैप एप्लिकेशन में हैं, तो यह बताने के लिए सबसे भरोसेमंद तरीका यह है कि इस कॉन्फिडेंस एपेन्डेसर्जेंट का उपयोग करके कॉर्डोवा एप्लिकेशन के उपयोगकर्ता एजेंट को संशोधित किया जाए

में config.xmlजोड़ने:

<preference name="AppendUserAgent" value="Cordova" />

फिर कॉल करो:

var isCordova = navigator.userAgent.match(/Cordova/i))

क्यों?

  1. window.cordovaऔर document.addEventListener('deviceready', function(){});रेसिंग की स्थिति के अधीन हैं
  2. navigator.standaloneजब <content src="index.html" />एक वेबसाइट है तो काम नहीं करती है (उदाहरण: <content src="https://www.example.com/index.html" />या कॉर्डोवा-प्लगइन-रिमोट-इंजेक्शन के साथ )
  3. यह सुनिश्चित करने के लिए कि यह एक वास्तविक ब्राउज़र है, श्वेतसूची उपयोगकर्ता एजेंटों की कोशिश करना बहुत जटिल है। एंड्रॉइड ब्राउज़र अक्सर कस्टम वेब साक्षात्कार होते हैं।

2
और हम वहां एप्लिकेशन संस्करण भी जोड़ सकते हैं! (आदर्श रूप से कुछ स्वचालित संस्करण टक्कर तर्क के साथ) पूर्व; Cordova AppName/v0.0.1<3 इस तरह, आप किसी भी तरह से ट्रैकिंग के लिए इसका उपयोग कर सकते हैं (लेकिन ध्यान दें कि कोई भी अपने उपयोगकर्ता को संशोधित कर सकता है ताकि सुरक्षा महत्वपूर्ण सत्यापन के लिए इस पर भरोसा न करें)
गैबेलरॉक्स

यह सबसे मूर्खतापूर्ण तरीका लगता है। दूसरा रनर अप दस्तावेज़ URL में http: // या https: // की अनुपस्थिति के लिए परीक्षण कर रहा है, लेकिन मैं उन संभावित परिदृश्यों की कल्पना कर सकता हूं जहां यह काम नहीं करेगा।
जेडी स्मिथ

14

मुझे लगता है कि यह सबसे सरल है: var isPhoneGap = (location.protocol == "file:")

संपादित करें कुछ लोगों के लिए जो काम नहीं करते थे। तब आप कोशिश कर सकते हैं (परीक्षण नहीं किया गया है)

var isPhoneGap = ! /^http/.test(location.protocol);

1
मैंने सोचा था कि PhoneGap ने सभी डिवाइसों के लिए एक आंतरिक सर्वर चला दिया है?
अनारोनोसवेल

मुझें यह पसंद है। लोकलहोस्ट पर विकसित करते समय, यह सबसे अच्छा समाधान है। (बहुत कोशिश करने के बाद, मुझे उम्मीद है कि यह सभी परिदृश्यों में काम करेगा, उम्मीद है कि) Thx!
मारियो

1
जब मैं किसी दूरस्थ फ़ाइल का परीक्षण कर रहा हूँ तो यह
रिपल

WP8 में भी काम नहीं करता है, प्रोटोकॉल "x-wmapp0:" है। भविष्य में उपयोग किए जाने वाले कुछ अन्य "प्रोटोकॉल" के लिए नहीं जान सकते।
एड्रियन

ठीक है, तुम भी --try सकता हैvar isPhoneGap = ! /^http/.test(document.location.protocol)
युवाल

8

यह मेरे लिए काम करता है (1.7.0 चल रहा है)

if (window.device) {
  // Running on PhoneGap
}

डेस्कटॉप क्रोम और सफारी पर परीक्षण किया गया।


3
यह लगभग 'देवशिल्पी' घटना के लिए बाध्यकारी के समान है। यदि window.device परिभाषित नहीं है, तो आप यह नहीं बता सकते हैं कि लोडिंग में फोनगैप / कॉर्डोवा धीमा है या यदि घटना कभी भी चालू नहीं होती है।
'10

8
window.device को "deviceready" ईवेंट ट्रिगर होने से पहले परिभाषित नहीं किया गया है।
स्लाविक मेल्टरर

2
और प्रार्थना करें कि किसी अन्य प्रोग्रामर को "डिवाइस" नामक एक नए वैश्विक संस्करण को परिभाषित करने का सुखद विचार नहीं है।
मिस्टर स्मिथ

7

मूल पोस्टर की तरह, मैं फोनगैप बिल्ड सेवा का उपयोग कर रहा हूं। दो दिनों और लगभग 50 परीक्षण के बाद, मैं एक सुंदर समाधान के साथ आया हूं जो मेरे लिए बहुत अच्छा काम करता है।

मैं यूए सूँघने का उपयोग नहीं कर सकता क्योंकि मैं मोबाइल ब्राउज़र में परीक्षण और चलाना चाहता था। मैं मूल रूप से कोबरेबॉय की काफी कार्यात्मक तकनीक पर बस गया था। यह मेरे लिए काम नहीं किया क्योंकि "howPatientAreWe: 10000" देरी / समय बहुत ब्राउज़र के विकास के लिए एक उपद्रव के बहुत अधिक था। और इसे किसी भी निचले स्तर पर सेट करना कभी-कभी ऐप / डिवाइस मोड में परीक्षण को विफल कर देगा। एक और तरीका होना था ...

फोनगैप बिल्ड सेवा को phonegap.jsआपके ऐप की फ़ाइलों को सेवा में सबमिट करने से पहले फ़ाइल को आपके कोड भंडार से छोड़ा जाना चाहिए। इसलिए मैं यह निर्धारित करने में सक्षम हूं कि किसी ब्राउज़र बनाम ऐप में चल रहा है या नहीं।

एक अन्य चेतावनी, मैं jQueryMobile का भी उपयोग कर रहा हूं, इसलिए किसी भी कस्टम स्क्रिप्टिंग को शुरू करने से पहले jQM और phonegap दोनों को आरंभ करना था। निम्न कोड मेरे कस्टम index.js फ़ाइल की शुरुआत में ऐप के लिए रखा गया है (jQuery के बाद, jQM से पहले)। इसके अलावा फोनगैप बिल्ड डॉक्स <script src="phonegap.js"></script>को HTML में कहीं रखने के लिए कहा जाता है । मैं इसे पूरी तरह से छोड़ देता हूं और इसके अस्तित्व के परीक्षण की सुविधा के लिए $ .getScript () का उपयोग करके इसे लोड करता हूं।

isPhoneGap = false;
isPhoneGapReady = false;
isjQMReady = false;

$.getScript("phonegap.js")
.done(function () {
    isPhoneGap = true;
    document.addEventListener("deviceready", function () {
        console.log("phonegap ready - device/app mode");
        isPhoneGapReady = true;
        Application.checkReadyState();
    }, false);
})
.fail(function () {
    console.log("phonegap load failed - browser only");
    isPhoneGapReady = true;
    Application.checkReadyState();
});

$(document).bind("mobileinit", function () {
    Application.mobileInit();
    $(document).one("pageinit", "#Your_First_jQM_Page", function () {
        isjQMReady = true;
        Application.checkReadyState();
    });
});

Application = {
    checkReadyState: function () {
        if (isjQMReady && isPhoneGapReady) {
            Application.ready();
        }
    },
    mobileInit: function () {
        // jQM initialization settings go here
        // i.e. $.mobile.defaultPageTransition = 'slide';
    },
    ready: function () {
        // Both phonegap (if available) and jQM are fired up and ready
        // let the custom scripting begin!
    }
}

6

दिलचस्प है, कई जवाब, लेकिन वे इन तीन विकल्पों में शामिल नहीं हैं:

1 - कॉर्डोवा.जेएस कॉर्डोवा ऑब्जेक्ट को वैश्विक दायरे में सेट करेगा। यदि यह वहां है तो आप एक कॉर्डोवा दायरे में चलने की सबसे अधिक संभावना है।

var isCordovaApp = !!window.cordova;

2 - कॉर्डोवा आपका एप्लिकेशन चलाएगा क्योंकि आप अपने डेस्कटॉप से ​​एक HTML डॉक्यूमेंट खोलेंगे। HTTP प्रोटोकॉल के बजाय यह FILE का उपयोग करेगा। इसका पता लगाने से आपको यह मानने का मौका मिलेगा कि आपका ऐप स्थानीय रूप से लोड किया गया था।

var isCordovaApp = document.URL.indexOf('http://') === -1
  && document.URL.indexOf('https://') === -1;

3 - संदर्भ का पता लगाने के लिए कॉर्डोवा स्क्रिप्ट के लोड इवेंट का उपयोग करें। शामिल स्क्रिप्ट को बिल्ड प्रक्रिया में आसानी से हटाया जा सकता है या स्क्रिप्ट लोडिंग केवल एक ब्राउज़र में विफल हो जाएगी। ताकि यह ग्लोबल वैरिएबल सेट न हो।

<script src="../cordova.js" onload="javascript:window.isCordovaApp = true;"></script>

क्रेडिट Adobe से डेमियन एंटिपा को जाता है


5

मैं इस विधि का उपयोग करता हूं:

debug = (window.cordova === undefined);

debugहो जाएगा trueब्राउज़र पर्यावरण पर, falseडिवाइस पर।


4

यह व्यवहार्य प्रतीत होता है और मैंने इसका उपयोग उत्पादन में किया है:

if (document.location.protocol == "file:") {
    // file protocol indicates phonegap
    document.addEventListener("deviceready", function() { $(initInternal);} , false);
}
else {
    // no phonegap, start initialisation immediately
    $(initInternal);
}

स्रोत: http://tqcblog.com/2012/05/09/detecting-phonegap-cordova-on-startup/


3

समस्या का सार यह है कि जब तक कॉर्डोवा.देविस अपरिभाषित है, तब तक आपका कोड सुनिश्चित नहीं हो सकता है क्योंकि कॉर्डोवा ने स्थापित किया है कि आपका डिवाइस समर्थित नहीं है, या यदि यह है क्योंकि कॉर्डोवा अभी भी खुद को तैयार कर रहा है और डिसइरएडी बाद में आग लगाएगा (या तीसरा विकल्प: कॉर्डोवा ने ठीक से लोड नहीं किया)।

एकमात्र समाधान एक प्रतीक्षा अवधि को परिभाषित करना है, और यह तय करना है कि इस अवधि के बाद आपके कोड को यह मान लेना चाहिए कि डिवाइस समर्थित नहीं है। काश कॉर्डोवा यह कहने के लिए एक पैरामीटर सेट करती कि "हमने एक समर्थित डिवाइस खोजने की कोशिश की और छोड़ दिया", लेकिन ऐसा लगता है कि ऐसा कोई पैरामीटर नहीं है।

एक बार यह स्थापित हो जाने के बाद, आप उन स्थितियों में कुछ विशिष्ट कार्य करना चाहते हैं, जहाँ कोई समर्थित उपकरण नहीं है। मेरे मामले में डिवाइस के ऐप बाजार से लिंक छिपाने की तरह।

मैंने इस फ़ंक्शन को एक साथ pieced किया है जिसमें हर स्थिति को बहुत अधिक कवर करना चाहिए। यह आपको एक डिवेसरी हैंडलर, एक डिवाइस-कभी-तैयार हैंडलर और एक प्रतीक्षा समय को परिभाषित करने देता है।

//Deals with the possibility that the code will run on a non-phoneGap supported
//device such as desktop browsers. Gives several options including waiting a while
//for cordova to load after all.
//In:
//onceReady (function) - performed as soon as deviceready fires
//patience 
//  (int) - time to wait before establishing that cordova will never load
//  (boolean false) - don't wait: assume that deviceready will never fire
//neverReady 
//  (function) - performed once it's established deviceready will never fire
//  (boolean true) - if deviceready will never fire, run onceReady anyhow
//  (boolean false or undefined) - if deviceready will never fire, do nothing
function deviceReadyOrNot(onceReady,patience,neverReady){

    if (!window.cordova){
            console.log('Cordova was not loaded when it should have been')
            if (typeof neverReady == "function"){neverReady();}
        //If phoneGap script loaded...
        } else {
            //And device is ready by now...
            if  (cordova.device){
                callback();
            //...or it's loaded but device is not ready
            } else {
                //...we might run the callback after
                if (typeof patience == "number"){
                    //Run the callback as soon as deviceready fires
                    document.addEventListener('deviceready.patience',function(){
                        if (typeof onceReady == "function"){onceReady();}
                    })
                    //Set a timeout to disable the listener
                    window.setTimeout(function(){
                        //If patience has run out, unbind the handler
                        $(document).unbind('deviceready.patience');
                        //If desired, manually run the callback right now
                        if (typeof neverReady == 'function'){neverReady();}
                    },patience);
                //...or we might just do nothing
                } else {
                    //Don't bind a deviceready handler: assume it will never happen
                    if (typeof neverReady == 'function'){neverReady();} 
                    else if (neverReady === true){onceReady();} 
                    else {
                       //Do nothing
                    }
                }
            }
    }

}

3

जिस तरह से मैं इसके साथ कर रहा हूं वह एक वैश्विक चर का उपयोग कर रहा है जो कॉर्डोवा.जेएस के केवल ब्राउज़र संस्करण द्वारा अधिलेखित है। आपकी मुख्य html फ़ाइल में (आमतौर पर index.html) मेरे पास निम्नलिखित स्क्रिप्ट होती हैं जो क्रम-निर्भर होती हैं:

    <script>
        var __cordovaRunningOnBrowser__ = false
    </script>
    <script src="cordova.js"></script> <!-- must be included after __cordovaRunningOnBrowser__ is initialized -->
    <script src="index.js"></script> <!-- must be included after cordova.js so that __cordovaRunningOnBrowser__ is set correctly -->

और cordova.jsमेरे अंदर बस:

__cordovaRunningOnBrowser__ = true

मोबाइल डिवाइस के लिए निर्माण करते समय, cordova.js का उपयोग नहीं किया जाएगा (और इसके बजाय प्लेटफ़ॉर्म-विशिष्ट cordova.js फ़ाइल का उपयोग किया जाएगा), इसलिए इस विधि को प्रोटोकॉल, userAgents, या लाइब्रेरी की परवाह किए बिना 100% सही होने का लाभ है चर (जो बदल सकते हैं)। ऐसी अन्य चीजें भी हो सकती हैं, जिन्हें मुझे cordova.js में शामिल करना चाहिए, लेकिन मुझे नहीं पता कि वे अभी तक क्या हैं।


बहुत दिलचस्प दृष्टिकोण।

हालाँकि, आपको वास्तव में प्रारंभिक स्क्रिप्ट की आवश्यकता नहीं है। तुम बस इसके लिए परीक्षण सब पर स्थापित किया जा रहा सकता है: if ( typeof __cordovaRunningOnBrowser__ !== 'undefined' ) { stuff(); } ..right?

सही, यह अपरिभाषित होने के कारण कुछ और गलत हो सकता है।
बीटी

3

एक और तरीका, स्लाविकमे के समाधान पर आधारित है:

बस index.htmlअपने PhoneGap स्रोत से पारित क्वेरी पैरामीटर का उपयोग करें। यानी, Android में, के बजाय

super.loadUrl("file:///android_asset/www/index.html");

उपयोग

super.loadUrl("file:///android_asset/www/index.html?phonegap=1");

SlavikMe के पास अन्य प्लेटफार्मों पर ऐसा करने के लिए एक महान सूची है।

फिर आपका index.htmlबस यह कर सकता है:

if (window.location.href.match(/phonegap=1/)) {
  alert("phonegap");
}
else {
  alert("not phonegap");
}

1
मैं कॉर्डोवा 3.4.1 का उपयोग कर रहा हूं और यह और भी सरल है: आपको केवल <content src="index.html" />config.xml फ़ाइल में विकल्प को बदलना होगा <content src="index.html?cordova=1" />। अब तक यह काम करने लगता है और अब तक का सबसे अच्छा समाधान है।
मार्टिन एम।

2

एक कोडबेस रखने के लिए, "प्लेटफ़ॉर्म" जिस कोड में चल रहा है, उसकी रुचि क्या है। मेरे लिए यह "मंच" तीन अलग-अलग चीजें हो सकती हैं:

  • 0: कंप्यूटर-ब्राउज़र
  • 1: मोबाइल-ब्राउज़र
  • 2: फोनगैप / कॉर्डोवा

मंच के लिए जाँच करने का तरीका:

var platform;
try {
 cordova.exec(function (param) {
   platform = 2;
  }, function (err) {}, "Echo", "echo", ["test"]);
} catch (e) {
  platform = 'ontouchstart' in document.documentElement ? 1 : 0;
}

ध्यान दें:

  • इसे कॉर्डोवा.जेएस लोड होने के बाद ही चलाया जाना है (बॉडी ऑनलोड (...), $ (डॉक्यूमेंट पहले से ही (...))।

  • document.documentElement में 'ontouchstart' उन लैपटॉप और डेस्कटॉप मॉनिटर में मौजूद होगा जिनमें टच-सक्षम स्क्रीन होती है, इसलिए यह डेस्कटॉप होते हुए भी मोबाइल-ब्राउज़र को रिपोर्ट करेगा। अधिक सटीक जांच करने के लिए अलग-अलग तरीके हैं लेकिन मैं इसका उपयोग करता हूं क्योंकि यह अभी भी 99% मामलों की देखभाल करता है जिनकी मुझे आवश्यकता है। आप हमेशा उस लाइन को कुछ और मजबूत बना सकते हैं।


1
मैं typeof cordova !== 'undefined'एक अपवाद के लिए मछली पकड़ने के बजाय उपयोग करने का सुझाव देता हूं ।
कर्काटो

1

हारून, कोशिश

if (PhoneGap.available){
    do PhoneGap stuff;
}

नहीं, मैंने नहीं। Phonegap-1.1.0.js स्रोत कोड देखें। PhoneGap.available = DeviceInfo.uuid! == अपरिभाषित;
जॉर्ज डब्ल्यू

1

जॉर्जडब्ल्यू का समाधान ठीक है, लेकिन असली डिवाइस पर भी, PhoneGap.available केवल तभी सही होता है जब PhoneGap की चीजें लोड की गई हों, जैसे onDeviceReady in document.addEventListener ('deviceready', onDeviceReady, false) कहा गया है।

उस समय से पहले, यदि आप जानना चाहते हैं, तो आप इस तरह कर सकते हैं:

runningInPcBrowser =
    navigator.userAgent.indexOf('Chrome')  >= 0 ||
    navigator.userAgent.indexOf('Firefox') >= 0

यह समाधान मानता है कि अधिकांश डेवलपर्स क्रोम या फ़ायरफ़ॉक्स का उपयोग करके विकसित होते हैं।


ओपी एक प्रोडक्शन वेबसाइट के लिए समाधान ढूंढ रहा है, न कि सिर्फ देव के लिए।
जेसी हट्टाबॉघ

1

मेरे साथ भी वही दिक्कत है।

मैं अपने वेब पेज में कॉर्डोवा क्लाइंट द्वारा लोड किए गए URL में # cordova = true को जोड़ने और location.hash.indexOf ("कॉर्डोवा = ट्रू")> -1 के लिए सही हूं।


अंत में, मैं अल रेनॉड द्वारा सुझाए गए मार्ग को अपने 4 वें बिंदु पर गया, और बिल्ड स्क्रिप्ट को तय करने दिया। यह एंड्रॉइड एसेट फ़ोल्डर में वेबसाइट कोड को कॉपी करते समय index.html में एक ध्वज को अक्षम करता है। // UNCOMMENT-ON-DEPLOY: window._appInfo.isCordova = true; जब निर्माण स्क्रिप्ट मेरी Android आस्तियों / www फ़ोल्डर में index.html अनुक्रमणिका कॉपी करती है, तो मैं // UNCOMMENT-ON-DEPLOY: string को हटाने के लिए इस पर एड चलाता हूं। # मालिश index.html यह बताने के लिए कि यह cordova ed "$ DEST / index.html" चल रहा है << - EOF 1, \ $ s / \ / / / UNCOMMENT-ON-DEPLOY: // wq EOF
Austin France

1

निम्नलिखित मेरे लिए सबसे हालिया PhoneGap / कॉर्डोवा (2.1.0) के साथ काम करता है।

यह काम किस प्रकार करता है:

  • अवधारणा में बहुत सरल है
  • मैंने उपरोक्त कुछ टाइमआउट समाधानों के तर्क को उल्टा कर दिया।
  • डिवाइस के लिए पंजीकृत करें (पहले से ही फोनगैप डॉक्स द्वारा अनुशंसित )
    • यदि इवेंट अभी भी टाइमआउट के बाद निकाल नहीं दिया गया है, तो ब्राउज़र को संभालने के लिए कमबैक करें।
    • इसके विपरीत, ऊपर दिए गए अन्य समाधान कुछ PhoneGap फीचर या अन्य का परीक्षण करने और उनके परीक्षण को तोड़ने पर निर्भर करते हैं।

लाभ:

  • PhoneGap- अनुशंसित device_ready घटना का उपयोग करता है।
  • मोबाइल ऐप में कोई देरी नहीं है। जैसे ही उपकरण_ पहले से ही आग लग जाती है, हम आगे बढ़ते हैं।
  • कोई उपयोगकर्ता-एजेंट सूँघने वाला नहीं (मुझे मोबाइल वेबसाइट के रूप में मेरे ऐप का परीक्षण करना पसंद है इसलिए ब्राउज़र सूँघना मेरे लिए कोई विकल्प नहीं था)।
  • अनिर्दिष्ट (और इसलिए भंगुर) पर कोई निर्भरता PhoneGap सुविधाओं / गुणों।
  • डेस्कटॉप या मोबाइल ब्राउज़र का उपयोग करते समय भी अपने कॉर्डोबा.जेएस को अपने कोडबेस में रखें। इस प्रकार, यह ओपी के प्रश्न का उत्तर देता है।
  • Wytze ने ऊपर कहा: 'काश कॉर्डोवा यह कहने के लिए एक पैरामीटर सेट करती कि "हमने एक समर्थित डिवाइस खोजने की कोशिश की और छोड़ दिया", लेकिन ऐसा लगता है कि ऐसा कोई पैरामीटर नहीं है।' इसलिए मैं यहां एक प्रदान करता हूं।

नुकसान:

  • टाइमआउट icky हैं। लेकिन हमारा मोबाइल-ऐप तर्क देरी पर निर्भर नहीं करता है; जब हम वेब-ब्राउज़र मोड में होते हैं, तो इसका उपयोग एक कमबैक के रूप में किया जाता है।

==

एक नया रिक्त PhoneGap प्रोजेक्ट बनाएँ। दिए गए नमूना index.js में, इसके साथ नीचे दिए गए "एप्लिकेशन" चर को बदलें:

var app = {
    // denotes whether we are within a mobile device (otherwise we're in a browser)
    iAmPhoneGap: false,
    // how long should we wait for PhoneGap to say the device is ready.
    howPatientAreWe: 10000,
    // id of the 'too_impatient' timeout
    timeoutID: null,
    // id of the 'impatience_remaining' interval reporting.
    impatienceProgressIntervalID: null,

    // Application Constructor
    initialize: function() {
        this.bindEvents();
    },
    // Bind Event Listeners
    //
    // Bind any events that are required on startup. Common events are:
    // `load`, `deviceready`, `offline`, and `online`.
    bindEvents: function() {
        document.addEventListener('deviceready', this.onDeviceReady, false);
        // after 10 seconds, if we still think we're NOT phonegap, give up.
        app.timeoutID = window.setTimeout(function(appReference) {
            if (!app.iAmPhoneGap) // jeepers, this has taken too long.
                // manually trigger (fudge) the receivedEvent() method.   
                appReference.receivedEvent('too_impatient');
        }, howPatientAreWe, this);
        // keep us updated on the console about how much longer to wait.
        app.impatienceProgressIntervalID = window.setInterval(function areWeThereYet() {
                if (typeof areWeThereYet.howLongLeft == "undefined") { 
                    areWeThereYet.howLongLeft = app.howPatientAreWe; // create a static variable
                } 
                areWeThereYet.howLongLeft -= 1000; // not so much longer to wait.

                console.log("areWeThereYet: Will give PhoneGap another " + areWeThereYet.howLongLeft + "ms");
            }, 1000);
    },
    // deviceready Event Handler
    //
    // The scope of `this` is the event. In order to call the `receivedEvent`
    // function, we must explicity call `app.receivedEvent(...);`
    onDeviceReady: function() {
        app.iAmPhoneGap = true; // We have a device.
        app.receivedEvent('deviceready');

        // clear the 'too_impatient' timeout .
        window.clearTimeout(app.timeoutID); 
    },
    // Update DOM on a Received Event
    receivedEvent: function(id) {
        // clear the "areWeThereYet" reporting.
        window.clearInterval(app.impatienceProgressIntervalID);
        console.log('Received Event: ' + id);
        myCustomJS(app.iAmPhoneGap); // run my application.
    }
};

app.initialize();

function myCustomJS(trueIfIAmPhoneGap) {
    // put your custom javascript here.
    alert("I am "+ (trueIfIAmPhoneGap?"PhoneGap":"a Browser"));
}

1

मैंने अपना ऐप शुरू करते समय कई महीने पहले इस समस्या पर ठोकर खाई है, क्योंकि हम चाहते थे कि ऐप " browser-compatible" भी हो (इस समझ के साथ कि कुछ कार्यक्षमता उस परिदृश्य में अवरुद्ध हो जाएगी: ऑडियो रिकॉर्डिंग, कम्पास, आदि)।

100%एप्लिकेशन निष्पादन संदर्भ यह निर्धारित करने के लिए PRE- निर्धारण का एकमात्र और (मैं 100-सौ-प्रतिशत स्थिति पर जोर देता हूं) था:

  • एक जेएस "ध्वज" चर को सच में आरंभीकृत करें, और जब एक ऑल-वेब संदर्भ में इसे गलत में बदल दें;

  • इसलिए आप कॉल का उपयोग कर सकते हैं जैसे " willIBeInPhoneGapSometimesInTheNearFuture()" (यह PRE-PG है, निश्चित रूप से आपको अभी भी POST-PG विधि की जाँच की आवश्यकता है यदि आप PG APIs को कॉल कर सकते हैं, लेकिन यह एक तुच्छ है)।

  • फिर आप कहते हैं: but how do you determine the execution context";"; जवाब है: "आप डॉन` टी "(क्योंकि मुझे नहीं लगता कि आप मज़बूती से कर सकते हैं, जब तक कि पीजी में उन शानदार लोग अपने एपीआई कोड में ऐसा नहीं करेंगे);

  • आप एक निर्माण स्क्रिप्ट लिखते हैं जो आपके लिए करता है: एक कोडबेस जिसमें दो वेरिएंट होते हैं।


1

वास्तव में इस सवाल का जवाब नहीं है , लेकिन जब मैं डेस्कटॉप ब्राउज़र में परीक्षण करता हूं, तो मैं ऐप लोड करने के लिए एक लोकलस्टोरेज वैल्यू सेट करता हूं, जिससे ऐप में आग लगने की संभावना न हो।

function main() {

    // Initiating the app here.
};

/* Listen for ready events from pheongap */
document.addEventListener("deviceready", main, false);

// When testing outside ipad app, use jquerys ready event instead. 
$(function() {

    if (localStorage["notPhonegap"]) {

        main();
    }
});

1

जब तक आप ऐप के डेस्कटॉप संस्करण से PhoneGap जावास्क्रिप्ट फ़ाइल को नहीं हटाते हैं, जिसमें से कोई भी काम नहीं करता है, जो एक कोडबेस होने के मेरे लक्ष्य को हरा देता है।

एक अन्य विकल्प मर्ज फ़ोल्डर का उपयोग करना होगा , नीचे स्क्रीनशॉट देखें।

आप प्लेटफ़ॉर्म-विशिष्ट फ़ाइलों को जोड़ सकते हैं / डिफ़ॉल्ट रूप से ओवरराइड कर सकते हैं।

(यह कुछ परिदृश्य में चाल करना चाहिए)

यहां छवि विवरण दर्ज करें


दूसरे शब्दों में: ब्राउज़र का पता लगाने के बजाय, आप केवल डेस्कटॉप बिल्ड के लिए कुछ फ़ाइलों को शामिल नहीं करते हैं / केवल iOS के लिए कुछ फाइलें संलग्न करते हैं।


1

डेस्कटॉप ब्राउज़र का पता लगाएं, भले ही इम्यूलेट डिवाइस सक्रिय हो

विंडोज और मैक मशीनों में काम करता है। लिनक्स के लिए एक समाधान खोजने की आवश्यकता है विवरण देखें

var mobileDevice = false;
if(navigator.userAgent.match(/iPhone|iPad|iPod|Android|BlackBerry|IEMobile/))
    mobileDevice = true; 

if(mobileDevice && navigator.platform.match(/Win|Mac/i))
    mobileDevice = false; // This is desktop browser emulator

if(mobileDevice) {
    // include cordova files
}

0

मुझे वास्तव में दो तकनीकों का एक संयोजन मिला है, यहां सूचीबद्ध तकनीकों ने सबसे अच्छा काम किया है, सबसे पहले यह जांच लें कि डिवाइस उपलब्ध होने पर कॉर्डोवा / फोनगैप को एक्सेस किया जा सकता है या नहीं। इस तरह:

function _initialize() {
    //do stuff
}

if (window.cordova && window.device) {
    document.addEventListener('deviceready', function () {
      _initialize();
    }, false);
} else {
   _initialize();
}

0

इस दृष्टिकोण का प्रयास करें:

/**
 * Returns true if the application is running on an actual mobile device.
 */
function isOnDevice(){
    return navigator.userAgent.match(/(iPhone|iPod|iPad|Android|BlackBerry)/);
}

function isDeviceiOS(){
    return navigator.userAgent.match(/(iPhone)/);
}

/**
 * Method for invoking functions once the DOM and the device are ready. This is
 * a replacement function for the JQuery provided method i.e.
 * $(document).ready(...).
 */
function invokeOnReady(callback){
    $(document).ready(function(){
        if (isOnDevice()) {
            document.addEventListener("deviceready", callback, false);
        } else {
            invoke(callback);
        }
    });
}

0

मैं जो जॉर्ज और mkprogramming का सुझाव दिया का एक संयोजन का उपयोग करें :

   if (!navigator.userAgent.match(/(iPhone|iPod|iPad|Android|BlackBerry)/)) {
      onDeviceReady();
   } else if (Phonegap.available){
      onDeviceReady();
   } else {
      console.log('There was an error loading Phonegap.')
   }

0

मुझे लगता है कि वे अलग हैं वे नहीं हैं किसी और में? हा हा ... मजाक नहीं। किसने नहीं सोचा था कि यह एक समस्या नहीं होगी? यहां आपके विचारों का सबसे सरल समाधान है। अपने सर्वर पर विभिन्न फ़ाइलों को पुश करें और फिर आप PhoneGap को करें। मैं अस्थायी रूप से http: चेक के ऊपर भी जा सकता हूं।

var isMobileBrowserAndNotPhoneGap = (document.location.protocol == "http:");

मेरी दिलचस्पी ब्राउज़रों को आगे बढ़ाने में है, इसलिए वास्तव में मैं अलग-थलग स्क्रिप्ट के टैग को हटा सकता हूं और [DW] में फिर से बना सकता हूं (वे वैसे भी तैनाती के लिए कुछ सफाई करेंगे, इसलिए यह उन कार्यों में से एक हो सकता है।) वैसे भी मुझे लगता है। यह एक अच्छा विकल्प है (बहुत ज्यादा उपलब्ध नहीं है) कुशलता से केवल मैन्युअल रूप से चीजों को टिप्पणी करने के लिए isMobileBrowserAndNotPhoneGap जब पीजी पर जोर दे रहा है)। मेरी स्थिति में मेरे लिए फिर से मैं (पृथक कोड) फ़ाइल के लिए टैग को हटा दूंगा जो एक मोबाइल ब्राउज़र होने पर नेवबार को ऊपर धकेलता है (यह बहुत तेज़ और छोटा होगा)। [हां, यदि आप उस अनुकूलित लेकिन मैन्युअल समाधान के लिए कोड को अलग कर सकते हैं।]


0

थोड़ा संशोधित, लेकिन मेरे लिए बिना किसी मुद्दे के पूरी तरह से काम करता है।

इरादा कॉर्डोवा को केवल तब लोड करना है जब एम्बेडेड डिवाइस पर, डेस्कटॉप पर नहीं, इसलिए मैं डेस्कटॉप ब्राउज़र पर कॉर्डोवा से पूरी तरह से बचता हूं। UI और MVVM का परीक्षण और विकास और फिर बहुत आरामदायक है।

इस कोड को डालें। फ़ाइल cordovaLoader.js में

function isEmbedded() {
    return  
    // maybe you can test for better conditions
    //&& /^file:\/{3}[^\/]/i.test(window.location.href) && 
     /ios|iphone|ipod|ipad|android/i.test(navigator.userAgent);
}

if ( isEmbedded() )
{
   var head= document.getElementsByTagName('head')[0];
   var script= document.createElement('script');
   script.type= 'text/javascript';
   script.src= 'cordova-2.7.0.js';
   head.appendChild(script);
}

फिर कॉर्डोवा जावास्क्रिप्ट को शामिल करने के बजाय कॉर्डोवालडरर.जेएस को शामिल करें

<head>
  <script src="js/cordovaLoader.js"></script>
  <script src="js/jquery.js"></script>
  <script src="js/iscroll.js"></script>
  <script src="js/knockout-2.3.0.js"></script>
</head> 

अपना काम आसान करो! :)



0

बस फोनगैप 3.x मोबाइल एप्लीकेशन डेवलपमेंट हॉटशॉट में जानकारी के लिए

var userLocale = "en-US";
function startApp()
{
// do translations, format numbers, etc.
}
function getLocaleAndStartApp()
{
    navigator.globalization.getLocaleName (
        function (locale) {
            userLocale = locale.value;
            startApp();
        },
        function () {
            // error; start app anyway
            startApp();
        });
}
function executeWhenReady ( callback ) {
    var executed = false;
    document.addEventListener ( "deviceready", function () {
        if (!executed) {
            executed = true;
            if (typeof callback === "function") {
                callback();
            }
        }
    }, false);
    setTimeout ( function () {
        if (!executed) {
            executed = true;
            if (typeof callback === "function") {
                callback();
            }
        }
    }, 1000 );
};
executeWhenReady ( function() {
    getLocaleAndStartApp();
} );

और YASMF ढांचे में

https://github.com/photokandyStudios/YASMF-Next/blob/master/lib/yasmf/util/core.js#L152


0

मैं खिड़की की वस्तुओं के साथ कोशिश कर रहा था, लेकिन यह काम नहीं किया क्योंकि मैं InAppBrowser में रिमोट यूआरएल खोल रहा था। इसे पूरा नहीं किया जा सका। तो इसे प्राप्त करने का सबसे अच्छा और आसान तरीका यह है कि आप स्ट्रिंग को url में जोड़ दें, जिसे आपको फोनगैप ऐप से खोलना होगा। फिर जांचें कि क्या डॉक्यूमेंट लोकेशन में स्ट्रिंग है।

नीचे इसके लिए सरल कोड है

var ref = window.open('http://yourdomain.org#phonegap', '_blank', 'location=yes');

आप देखेंगे कि एक स्ट्रिंग url "#phonegap" में जोड़ी गई है। डोमेन url में निम्नलिखित स्क्रिप्ट जोड़ें

if(window.location.indexOf("#phonegap") > -1){
     alert("Url Loaded in the phonegap App");
}
हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.