javascript - अपाचे कॉर्डोवा(फोनगैप) में संसाधन संरचना और फाइल सिस्टम से फ़ाइलों को लोड करना




android ios (3)

ऐसा लगता है कि कॉर्डोवा कैसे काम करता है इसके बारे में आप बहुत उलझन में हैं। अच्छी तरह से बनाया गया एसपीए एप्लीकेशन केवल कॉर्डोवा के साथ सुरक्षा और कॉर्डोवा बॉयलरप्लेट कॉन्फ़िगरेशन से संबंधित बहुत ही मामूली संशोधन के साथ काम करेगा।

स्थिर संसाधन लोड हो रहा है (छवियों, एचटीएमएल, सीएसएस)

इन संसाधनों को किसी अन्य स्थान पर रखने की आवश्यकता नहीं है, www स्थान। यदि आप एक्सएचआर अनुरोध करने के लिए सापेक्ष पथ का उपयोग करते हैं तो कॉर्डोवा एक्सएचआर अनुरोधों के साथ ठीक काम करता है। तो आपके www फ़ोल्डर में फ़ोल्डर संरचना होने की तरह

www
|
|- css
|   |- style.css
|- js
|   |- app.js
|- html
|   |- page.html
|
|- index.html

आपके index.html आप नियमित अनुरोध कर सकते हैं

$.get('page.html')

यह भी सुनिश्चित करें कि आपने अपने index.html में उचित सामग्री सुरक्षा नीति (सीएसपी) निर्धारित की है। उदाहरण के लिए नीचे देखें।

गतिशील संसाधन

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

कॉर्डोवा फ़ाइल प्लगइन में दस्तावेज कैसे ओएस विशिष्ट फ़ोल्डर के साथ प्रत्येक चर संरेखित। दस्तावेज़ों के फाइल अनुभाग को स्टोर करने के लिए देखें।

सुरक्षा

कॉर्डोवा में नवीनतम परिवर्तनों के लिए आपको अपने एचटीएमएल में सीएसपी नीति निर्दिष्ट करने की आवश्यकता है, अन्यथा आप बाहरी संसाधनों के साथ कोई संचार नहीं कर पाएंगे। आप स्पष्टीकरण के लिए सीएसपी पर एचटीएमएल 5 ट्यूटोरियल देख सकते हैं, और कॉर्डोवा व्हाइटलिस्ट प्लगइन डॉक्स उदाहरण के लिए कॉर्डोवा-विशिष्ट तरीके से सीएसपी को कॉन्फ़िगर कैसे करें।

हमारे पास एक जटिल जटिल जेएस वेबैप है जो ब्राउज़र में ऑनलाइन विभिन्न तरीकों (स्ट्रिंग, सरणी बफर, बेस 64, बाइनरी) ऑनलाइन विभिन्न संसाधनों (एचटीएमएल टेम्पलेट्स, अतिरिक्त जेएस / सीएसएस फाइलें, जेएसओएन डेटा, छवियों, वीडियो, ध्वनियों) लोड करता है (बस पढ़ने नहीं लिख रहे हैं)। अब हम कॉर्डोवा मोबाइल ऐप के रूप में अलग-अलग प्लेटफ़ॉर्म पर ऑफ़लाइन काम करने के लिए सबकुछ (संसाधन शामिल) करने के लिए इसमें बदलाव करना चाहते हैं।

समस्या # 1 - स्थानीय फाइल सिस्टम से फ़ाइलों को लोड करना

यह स्थानीय फ़ाइल के लिए एक्सएचआर अनुरोधों को बदलता है: // संसाधन हर जगह काम करते हैं लेकिन क्रोम के साथ अब एक शो स्टॉपर है क्योंकि एंड्रॉइड आंतरिक रूप से क्रोम की ओर संक्रमण कर रहा है।

ठीक है, अभी भी 2 अन्य विकल्प बाकी थे:

  1. जेएसओएनपी के भीतर जेपीओएनपी के भीतर नकली लोड सबकुछ, आईफ्रेम के साथ एचटीएमएल, आदि - जो वास्तव में अच्छा विकल्प नहीं है क्योंकि इसे संसाधनों में बदलाव की आवश्यकता होती है + इसकी तरह हैकी और यह हमें बहुत सारी कार्यक्षमता खर्च करती है (केवल स्ट्रिंग लोड जेएस / एचटीएमएल, सरणी बफर, बाइनरी, आदि)
  2. फ़ाइल एपीआई का प्रयोग करें

सादा वेनिला फ़ाइल एपीआई दुर्भाग्य से फ़ाइल संदर्भ प्लस आईई 10 एक नो-नो प्राप्त करने के लिए हमेशा उपयोगकर्ता इंटरैक्शन (इनपुट बॉक्स पर क्लिक की तरह) की आवश्यकता होती है । ठीक है, तो फोनगैप के लिए अनुकूलित फ़ाइल एपीआई प्लगइन का उपयोग करने का एकमात्र विकल्प है - जो हमें अगली समस्या लाता है।

फ़ोनगैप में समस्या # 2 - (क्रॉस-प्लेटफॉर्म?) फ़ाइल पथ

मुझे फोनगैप सीएलआई पसंद है - आप टर्मिनल में कुछ कमांड दर्ज करते हैं और यह आपके लिए विभिन्न प्लेटफार्मों के लिए फाइलों का प्रबंधन करता है और बनाता है। या यह करता है?

जहां तक ​​मैं फोनगैप के अनुसार बता सकता हूं, आपको डब्ल्यूडब्ल्यूडब्ल्यू फ़ोल्डर में सबकुछ रखना होगा - हालांकि (एक बार जब आप ऐप बनाते हैं), पागल चीज है - उन फ़ाइलों को पढ़ने का कोई आसान तरीका नहीं है (फाइल एपीआई प्लगइन के माध्यम से) जहां से फोनगैप उन्हें रखता है।

आपको लगता है कि fileSystem.root (LocalFileSystem) उस फ़ोल्डर को इंगित कर रहा है, लेकिन कम से कम आईओएस पर डब्ल्यूडब्ल्यूडब्ल्यू फ़ोल्डर आपके ऐप के अंदर है लेकिन fileSystem.root संदर्भ बाहरी दस्तावेज़ फ़ोल्डर को इंगित कर रहा है (अभी भी एंड्रॉइड पर इसका परीक्षण करना है लेकिन मैं फिर से कुछ अलग अनुमान लगा रहा हूँ)।

थोड़ी सी झुकाव के बाद मुझे पता चला कि डब्ल्यूडब्ल्यूडब्ल्यू फ़ोल्डर में कैसे जाना है, लेकिन इसकी लचीला, हैकी और ऐसा लगता है कि इसे काम नहीं करना चाहिए (केवल इस समय आईओएस):

window.requestFileSystem(LocalFileSystem.PERSISTENT, 0, function(fileSystem){
   fileSystem.root.getDirectory("../HelloWorld.app/www", {create: true}, function(entry) { 
      entry.getFile("test.json", {create: false}, function(fileEntry) {
         fileEntry.file(function(file){
            var reader = new FileReader();
            reader.onloadend = function(evt) {
               console.log(evt.target.result);
            };
            reader.readAsText(file);             
         }, fail);
      }, fail);
   });
}, fail);

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

लेकिन यह फिर भी अन्य प्लेटफार्मों पर कुछ अलग होगा।

मैं सैद्धांतिक रूप से आंतरिक डब्ल्यूडब्ल्यूडब्ल्यू फ़ोल्डर से बाहरी दस्तावेज़ फ़ोल्डर में छवियों को "डाउनलोड" कर सकता हूं लेकिन:

  1. एक 50 एमबी ऐप डाउनलोड करें और फिर आंतरिक रूप से अपने संसाधनों के 40 एमबी को किसी अन्य फ़ोल्डर में कॉपी करें ताकि इसे ठीक से एक्सेस किया जा सके, ऐसा लगता है कि मेरे लिए उचित नहीं है
  2. दस्तावेज उचित रूट फ़ोल्डर (आईओएस पर) बिल्कुल है?

समस्या # 3 - फोनगैप में स्थानीय संसाधनों को व्यवस्थित करने का सबसे अच्छा तरीका?

तो फोनगैप में फाइल सिस्टम रूट क्यों / दस्तावेज है? ऐप्पल की फाइल सिस्टम प्रोग्रामिंग गाइड के अनुसार दस्तावेज़ फ़ोल्डर इस तरह के कुछ के लिए भी सबसे अच्छा फिट नहीं हो सकता है। ऐसा लगता है कि दस्तावेजों का उपयोग केवल उपयोगकर्ता द्वारा जेनरेट की गई सामग्री के लिए किया जाना चाहिए और ऐप की डेटा फ़ाइलों / संसाधनों को वास्तव में 'लाइब्रेरी' फ़ोल्डर में जाना चाहिए। यह अन्य चीजों के साथ महत्वपूर्ण है क्योंकि कुछ गलत ऐप्स ऐसा करने के लिए ऐप्पल द्वारा अस्वीकार कर दिए जाते हैं + यह भी आईट्यून्स / क्लाउड बैकअप को प्रभावित करता है।

तो अब हमने उन सभी को स्थापित किया है:

  • आप फोनगैप में स्थानीय फाइलों / संसाधनों को सही ढंग से कैसे बनाते हैं?
  • मैं अपने संसाधनों (जेएस, जेएसओएन, एचटीएमएल, सीएसएस, मीडिया इत्यादि) कहां / कैसे रखूं ताकि उन्हें प्रत्येक प्लेटफ़ॉर्म (जैसे / लाइब्रेरी या ओके पर दस्तावेज़ / आईओएस के लिए एक उचित फ़ोल्डर में कॉपी / स्थापित किया जा सके - लेकिन ऐप आंतरिक नहीं रहें)। और निश्चित रूप से अन्य प्लेटफार्मों के लिए भी।
  • इसे ठीक से और क्रॉस-प्लेटफ़ॉर्म तक कैसे पहुंचाया जाए?
  • (साइड सवाल) cordova.js वास्तव में जरूरत है? हमने बाह्य पुस्तकालयों और वेनिला ऑप्टिमाइज़ प्रदर्शन को बाहर करने के लिए वास्तव में कड़ी मेहनत की है, इसलिए मैं घटनाओं और विभिन्न चीजों को फिर से लेने के लिए एक और को शामिल करने के बारे में बहुत पागल नहीं हूं। मुझे एहसास है कि यहां कुछ आंतरिक हुक इस्तेमाल हो सकते हैं - लेकिन शायद हम खुद को शामिल कर सकते हैं जो हमें चाहिए?

यह मेरे जैसा तरीका अधिक जटिल हो गया, हालांकि यह होगा।

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

ज्ञान और प्रतिक्रिया के किसी भी tidbits हमेशा की सराहना की है!


कॉर्डोवा वेब अनुप्रयोगों को आसानी से ढांचे और प्रबंधित करने के कई तरीके हैं। मैं आईओएस, एंड्रॉइड और विंडोज फोन ऐप के निर्माण और संरचना के लिए इंटेल से एक्सडीके को लागत मुक्त समाधान के रूप में सुझाव देता हूं: https://software.intel.com/en-us/intel-xdk


मुझे नहीं लगता कि क्रोम सुरक्षा प्रतिबंध जो आप वेबव्यू या कॉर्डोवा एप्लिकेशन के लिए उचित रूप से बात कर रहे हैं (और वे क्रोम के लिए विशिष्ट नहीं हैं लेकिन किसी भी आधुनिक ब्राउज़र पर लागू होते हैं)।

मैंने एक फोनगैप एप्लिकेशन में www फ़ोल्डर के अंदर स्थित फ़ाइलों से संसाधनों (जेसन फाइल, जावास्क्रिप्ट फाइल या एचटीएमएल टेम्पलेट्स) लोड करने के लिए jquery AJAX फ़ंक्शन का उपयोग करके परीक्षण किया है और यह एंड्रॉइड 2.3, 4.0.4, 4.1.2 और 4.4.2 में भी काम करता है एक नेक्सस 5 पर (इसलिए नए क्रोम वेबव्यू का उपयोग कर)।





cordova