2010-05-07 18 views
42

क्या ब्राउज़र में के अंदर एक एप्लिकेशन बनाना संभव है? एक आवेदन का अर्थ है:एक (HTML5) ब्राउज़र में ऑफ़लाइन मोड ऐप संभव है?

1 कहाँ है कनेक्शन ब्राउज़र और एक दूरदराज के आवेदन सर्वर के बीच (ऑनलाइन मोड):

  • आवेदन ठेठ वेब आधारित मोड में चलाता है
  • आवेदन भंडार ऑफ़लाइन स्टोरेज में उपयोग करने के लिए आवश्यक डेटा ऑफ़लाइन स्टोरेज में उपयोग किया जाना चाहिए (2)
  • एप्लिकेशन सिंक/पुश डेटा (ऑफलाइन मोड के दौरान कैप्चर किया गया) सर्वर पर वापस ऑफ़लाइन मोड से फिर से शुरू होने पर सर्वर मोड

2 कहाँ है कोई संबंध नहीं (ऑफलाइन मोड) ब्राउज़र और एक दूरदराज के आवेदन सर्वर के बीच: (? जावास्क्रिप्ट)

  • आवेदन अब भी चलेगा
  • आवेदन डेटा पेश करेंगे (जिसे ऑफ़लाइन संग्रहीत किया जाता है) उपयोगकर्ता
  • एप्लिकेशन उपयोगकर्ता से इनपुट स्वीकार कर सकता है (और ऑफलाइन स्टोरेज में स्टोर/संलग्न)

क्या यह संभव है? अगर उत्तर हाँ है, तो क्या कोई (रूबी/पायथन/PHP) ढांचा बनाया जा रहा है?

धन्यवाद

+3

एक अनुवर्ती प्रश्न: क्या कोई मौजूदा जावास्क्रिप्ट ढांचायां हैं जो इसे कार्यान्वित करने में आसान बनाती हैं? – Chetan

उत्तर

38

हां, यह संभव है।

  • आपको Javascript में आवेदन लिखते हैं, और किसी भी तरह का पता लगाने के लिए कि क्या ब्राउज़र ऑफलाइन मोड में है (सबसे सरल एक समय में एक बार एक सर्वर मतदान पर है) की जरूरत है। (संपादित करें: ऑफलाइन मोड का पता लगाने के बेहतर तरीके के लिए टिप्पणियां देखें)

  • सुनिश्चित करें कि आपके एप्लिकेशन में केवल स्थिर HTML, जेएस और सीएसएस फ़ाइलें हैं (या अपनी स्क्रिप्ट में मैन्युअल रूप से कैशिंग नीति सेट करें ताकि आपका ब्राउज़र याद रखे उन्हें ऑफ़लाइन मोड में)। पेज को अपडेट सर्वर के माध्यम से नहीं, जे एस डोम हेरफेर के माध्यम से किया जाता है (जैसे ExtJS http://www.extjs.com के रूप में एक रूपरेखा तुम यहाँ मदद मिलेगी)

  • भंडारण के लिए, ऐसे PersistJS के रूप में एक मॉड्यूल का उपयोग (http://github.com/jeremydurham/persist-js) है, जो स्थानीय भंडारण का उपयोग करता है डेटा का ट्रैक रखने के लिए ब्राउज़र का। जब कनेक्शन बहाल किया जाता है, सर्वर के साथ सिंक्रनाइज़ करें।

  • आपको छवियों और अन्य संपत्तियों को प्री-कैश करने की आवश्यकता है, अन्यथा यदि आप पहले उनका उपयोग नहीं करते हैं तो वे ऑफ़लाइन मोड में अनुपलब्ध होंगे।

  • फिर से: आपके ऐप का बड़ा हिस्सा जावास्क्रिप्ट में होना आवश्यक है, यदि PHP पहुंच योग्य नहीं है तो PHP/रूबी/पायथन फ्रेमवर्क आपको थोड़ा सा मदद करेगा। सर्वर संभवतः जितना संभव हो सके उतना आसान रखा जा सकता है, डेटा को स्टोर और लोड करने के लिए एक REST- जैसे AJAX API।

+11

आप यह जांचने के लिए नेविगेटर.ऑनलाइन का उपयोग कर सकते हैं कि कोई ब्राउज़र ऑनलाइन है –

+5

नेविगेटर .ऑनलाइन कई ब्राउज़रों में सटीक मूल्य नहीं देता है। उदाहरण के लिए http://code.google.com/p/chromium/issues/detail?id=7469 देखें। – kpozin

+1

@kpozin वेबकिट में समस्या को ठीक किया गया था, इसलिए अब सभी प्रमुख ब्राउज़र फ़ायरफ़ॉक्स नेविगेटर में –

-1

Google गियर्स का http://code.google.com/apis/gears/ पर एक नज़र डालें। हालांकि उन्हें HTML5 के पक्ष में चरणबद्ध किया गया है। हालांकि, ऐसा लगता है कि एचटीएमएल 5 के रूप में धक्का दिया जा रहा है Google गियर्स है।

0

मैं यह भी ढूंढ रहा था, मुझे HTML5 Offline Web Apps पता चला। हैवेन्ट ने इसे

विशिष्ट ऑनलाइन वेब अनुप्रयोगों के उपयोगकर्ता केवल इंटरनेट से कनेक्शन होने पर एप्लिकेशन का उपयोग करने में सक्षम हैं। जब वे ऑफ़लाइन जाते हैं, तो वे अब अपने ई-मेल की जांच नहीं कर सकते हैं, अपनी कैलेंडर अपॉइंटमेंट ब्राउज़ कर सकते हैं या अपने ऑनलाइन टूल के साथ प्रस्तुतिकरण तैयार नहीं कर सकते हैं। इस बीच, मूल अनुप्रयोग उन विशेषताओं को प्रदान करते हैं: ई-मेल क्लाइंट स्थानीय रूप से कैश फ़ोल्डर्स, कैलेंडर स्थानीय रूप से उनकी घटनाओं को संग्रहीत करते हैं, प्रेजेंटेशन पैकेज स्थानीय रूप से अपनी डेटा फ़ाइलों को संग्रहीत करते हैं।

15

"Let's Take This Offline" chapter में मार्क तीर्थ की (ऑनलाइन) पुस्तक Dive Into HTML5 एचटीएमएल 5 तकनीकों के साथ ऑफ़लाइन वेब क्षुधा लेखन की एक बहुत अच्छा अवलोकन है।

नोट: चूंकि मार्क पिलग्रीम का मूल गोता एचटीएमएल 5 लिंक में नीचे आता है।

प्रतियां अब अन्य स्थानों के बीच here पाई जा सकती हैं।

4

जेक आर्किबाल्ड ने "ऑफ़लाइन कुकबुक" लिखा था। ServiceWorker के साथ एक आधुनिक (9 दिसंबर 2014) और अच्छा दृष्टिकोण:

http://jakearchibald.com/2014/offline-cookbook/

0

जावास्क्रिप्ट आप वेबसाइट ऑफ़लाइन मोड के लिए एक विकल्प देने के लिए और UpUp Javascript Framework कहा जाता है। एक छोटी सी लिपि जो सुनिश्चित करती है कि आपकी साइट हमेशा आपके उपयोगकर्ताओं के लिए है जब वे विमान पर हों या समुद्र के नीचे 20,000 लीग हों।

<html> 
<head> 
    <meta charset="UTF-8"> 
    <title>Lonely Globe Advisor</title> 
</head> 
<body> 
    <h1>Top Hotels in Rome</h1> 
    <ol> 
    <li>Villa Domus - Via Piacenza 9, Rome, Italy</li> 
    <li>Hotel Trivelli - Piazza Barberini 11, Rome, Italy</li> 
    </ol> 
    <script src="/upup.min.js"></script> 
    <script> 
    UpUp.start({ 
     'content-url': 'offline.html', 
     'assets': ['css/bootstrap.min.css', 'css/offline.css'] 
    }); 
    </script> 
</body> 
</html> 

अब सामग्री हमारे उपयोगकर्ताओं को देखने जब वे ऑफ़लाइन हैं, offline.html की सामग्री है। यह सिर्फ एक साधारण HTML फ़ाइल है, हमारी साइट पर किसी अन्य पृष्ठ से अलग नहीं है। bootstrap.min.css और offline.css:

हमारे offline.html फ़ाइल दो सीएसएस फ़ाइलें हैं। आइए सुनिश्चित करें कि ये कैश किए गए हैं और ऑफ़लाइन होने पर हमारे उपयोगकर्ताओं के लिए उपलब्ध हैं

+0

ड्राबैक/फीचर: यह केवल https पर काम कर रहा है .. – Kamal

+0

कि यह एक बग नहीं है, यह एक सुविधा है। – Rob