एचटीएमएल 5 आईफोन की गतिशील कैशिंग

Question

हम आईफोन के लिए वेब एप्लिकेशन बना रहे हैं जो ऑफलाइन काम करते हैं। लेकिन हमें गतिशील छवियों को कैश करने में कठिनाई हो रही है। कृपया पढ़ें और मैं उदाहरण के अनुसार बिल्कुल दिखाऊंगा कि मेरा क्या मतलब है और हमने अभी तक क्या किया है।

तो उदाहरण के लिए मान लें कि हम केवल 1 पृष्ठ के साथ एक साधारण सूची एप्लिकेशन बना रहे हैं। एप्लिकेशन का एकमात्र उद्देश्य 5 आइटम सूचीबद्ध करना है, प्रत्येक आइटम जिसमें कुछ टेक्स्ट और 1 छवि है।

एप्लिकेशन में एक साधारण लोगो और कुछ अलग जावास्क्रिप्ट और सीएसएस कोड है। ये स्थैतिक संसाधन कैश मेनिफेस्ट फ़ाइल का उपयोग करके कैश किए गए हैं।

परिदृश्य 1::

2 परिदृश्य के हैं मैं ऑनलाइन हूं और मैं वेब अनुप्रयोग

खोल जब मैं सफारी में सूची आवेदन लोड इसे से बाहर 5 नई यादृच्छिक आइटम लाएगा एक डेटाबेस जिसमें 1000 आइटम हैं। ये सब एक AJAX कॉल (जेएसओएन प्रारूप) के माध्यम से सरल बैकएंड द्वारा परोसे जाते हैं।

5 आइटम युक्त संपूर्ण JSON ऑब्जेक्ट को तुरंत HTML5 स्थानीय संग्रहण में संग्रहीत किया जाता है और ऑफलाइन उपयोग के लिए कैश किया जाता है।

JSON ऑब्जेक्ट की संरचना इस तरह एक सा है:

{ 
    "0" : { 
     id: "3", 
     text: "Some text about item #3", 
     image_url: "http://www.domain.com/image22341.png" 
    }, 
    "1" : { 
     id: "23", 
     text: "Some text about item #23", 
     image_url: "http://www.domain.com/image442321.png" 
    }, 
    "2" : { 
     id: "4", 
     text: "Some text about item #4", 
     image_url: "http://www.domain.com/image2321.png" 
    }, 
    "3" : { 
     id: "432", 
     text: "Some text about item #432", 
     image_url: "http://www.domain.com/image2441.png" 
    }, 
    "4" : { 
     id: "43", 
     text: "Some text about item #43", 
     image_url: "http://www.domain.com/image221.png" 
    } 
} 

आप देख सकते हैं, बहुत ही सरल, पूरे JSON ऑब्जेक्ट स्थानीय भंडारण में संग्रहित है (कि JSON में कुछ त्रुटियों हो सकता है)।

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

ऑनलाइन मोड में, यह सब बढ़िया काम करता है।

परिदृश्य 2: मैं ऑफ़लाइन कर रहा हूँ और मैं वेब अनुप्रयोग

पृष्ठ लोड (क्योंकि यह कैश प्रकट का उपयोग कर एक स्थिर संसाधन के रूप में कैश की गई था लोगो प्रदर्शित किया जाता है), कुछ जावास्क्रिप्ट का पता लगाता है खुल हम वास्तव में ऑफ़लाइन हैं और परिणामस्वरूप आवेदन बैकएंड से संपर्क करने का प्रयास नहीं करता है। इसके बजाय यह पहले से संग्रहीत JSON ऑब्जेक्ट को स्थानीय संग्रहण से पढ़ता है और 5 आइटमों को प्रस्तुत करता है। सभी अनुमानित के रूप में।

टेक्स्ट ठीक प्रदर्शित होता है, लेकिन इस बार, छवियां प्रदर्शित नहीं होती हैं, इसका कारण सरल है, छवि टैग छवि संसाधनों को इंगित कर रहे हैं जो उपलब्ध नहीं हैं। तो यह प्रदर्शित करता है कि छोटी छवि उपलब्ध आइकन नहीं है।

---

अब मेरा सवाल है, क्या किसी भी तरह से उन छवि संसाधनों को कैश करने का कोई तरीका है? तो अगली बार जब हमें उनकी ज़रूरत है, तो उन्हें कैश से लाया जाता है।

यह मैं क्या कोशिश की है है:

• Base64 छवियों सांकेतिक शब्दों में बदलना और JSON के माध्यम से उन्हें आपूर्ति। यह काम करता है, यह नाटकीय रूप से लाने और प्रतिपादन समय दोनों को बढ़ाता है (हम लगभग 30 सेकंड की वृद्धि, बहुत धीमी बात कर रहे हैं)
• कुछ कैश मैनिफेस्ट हैकिंग/परीक्षण और त्रुटि ..कुछ भी है कि काम करता है नहीं पा सके (आदर्श एक नीति है 'डोमेन पर सभी संसाधनों को कैश के रूप में वे अनुरोध कर रहे हैं कि आवश्यकता है, लेकिन मेरी जानकारी के लिए इस अस्तित्व में नहीं है)

मैं सचमुच इस पर घंटे बिताए और कर सकते हैं है समाधान नहीं मिला ... क्या किसी के पास कोई सुराग है? मुझे पता है कि यह संभव है क्योंकि यदि आप आईफोन के लिए Google Mail HTML5 एप्लिकेशन देखते हैं, तो वे किसी भी तरह से अनुलग्नक को कैश कर सकते हैं और ऑफ़लाइन होने पर भी आप उन्हें पुनर्प्राप्त कर सकते हैं।

एक चीज जिसे हमने कोशिश नहीं की है वह सफारी द्वारा समर्थित SQLite डेटाबेस का उपयोग कर रहा है ... शायद मैं छवियों को एक ब्लॉब के रूप में संग्रहीत कर सकता हूं (अभी भी इसका मतलब है कि इसे फ़ीड से ला रहा है और इस प्रकार धीमा है?) और फिर किसी भी तरह जादुई रूप से स्क्रीन पर एक छवि में कनवर्ट करना .... लेकिन मुझे यह नहीं पता कि यह कैसे करें।

किसी भी मदद की सराहना की है, धन्यवाद।

Answer 1

मैं आपको यह देखने के लिए सलाह दूंगा कि क्या आप अपनी छवियों को पकड़ने के लिए कैनवास का उपयोग कर सकते हैं, क्योंकि उनके पास छवि पिक्सेल डेटा प्राप्त करने/डालने के लिए कुछ गुण हैं, जैसे कि पिक्सेल मानों का सीएसवी (0-255)।

स्रोत: http://developer.apple.com/safari/library/documentation/appleapplications/conceptual/SafariJSProgTopics/Tasks/Canvas.html

im यकीन है कि अगर आप गतिशील रूप से एक कैनवास में छवि स्रोतों का उपयोग कर सकते हैं, लेकिन अगर आप आप एक DB करने के लिए छवि से CSVV डेटा स्थानांतरित और वीजा प्रतिकूल में सक्षम होना चाहिए नहीं कर सकते।

आशा है कि आपको कहीं कहीं ले जायेगा।

उद्धरण

सफारी 4.0 और बाद में एक कैनवास के पिक्सल के सीधे प्रभाव समर्थन करते हैं। आप getImageData() फ़ंक्शन के साथ कैनवास के कच्चे पिक्सेल डेटा प्राप्त कर सकते हैं और createImageData() फ़ंक्शन के साथ मैनिपुलेटेड पिक्सल के लिए एक नया बफर बना सकते हैं।

---

अद्यतन:।

मैंने पाया इस लिंक आप भी में रुचि हो सकती

http://wecreategames.com/blog/?p=210

http://wecreategames.com/blog/?p=219 // इसके अलावा कैनवास क्रमबद्धता :)

Answer 2

साथ विचार ध्यान दें

यहां एक कोड है जो AJAX से एक छवि डाउनलोड करता है और उसे बेस 64 में परिवर्तित करता है स्ट्रिंग। इस स्ट्रिंग के साथ आप इसे स्थानीय स्टोरेज में सहेज सकते हैं और इसे आईएमजी की स्रोत प्रॉपर्टी को ऑफ़लाइन में असाइन कर सकते हैं।

function _arrayBufferToBase64(buffer) { 
    var binary = ''; 
    var bytes = new Uint8Array(buffer); 
    var len = bytes.byteLength; 
    for (var i = 0; i < len; i++) { 
     binary += String.fromCharCode(bytes[ i ]); 
    } 
    return window.btoa(binary); 
} 


var xhr = new XMLHttpRequest(); 
xhr.open('GET', 'an_image.png', true); 
xhr.responseType = 'arraybuffer'; 

xhr.onload = function(e) { 
     if (this.status == 200) { 
      var string_with_bas64_image = _arrayBufferToBase64(this.response); 

      // You can save this string to local storag or set it to an img elemment this way 

      document.getElementById("img").src = "data:image/png;base64," + string_with_bas64_image; 
     } 
}; 

xhr.send(); 

आप इसे यहाँ का परीक्षण कर सकते हैं: http://jsbin.com/ivifiy/1/edit

इस कलाओं के साथ

आप एक localStorage कैश लिख सकते हैं।

_arrayBufferToBase64 यहां से निकाला जाता है: ArrayBuffer to base64 encoded string