हमारे पास एक वेब एप्लिकेशन है जो उपयोगकर्ताओं को एसवीजी देखने की अनुमति देता है। इन एसवीजी में आमतौर पर ऐसी छवियां होती हैं जो एक सापेक्ष यूआरएल का उपयोग करके लोड की जाती हैं। चूंकि हम इसे एक आईपैड 'वेब ऐप' बनाना चाहते हैं, हम यह भी चाहते हैं कि इसे आईपैड उपयोगकर्ता की होमस्क्रीन में जोड़ा जाए और इसके लिए एचटीएमएल 5 एप्लिकेशन कैश द्वारा कैश किया जाए ताकि उपयोगकर्ता इन एसवीजी और संबंधित छवियों को ऑफलाइन देख सकें।एसवीजी में छवियों को हमेशा आईपैड पर कैश किए जाने पर एप्लिकेशन कैश से क्यों लोड नहीं किया जाता है?
जब हमारा एप्लिकेशन आईपैड होम पेज आइकन से लोड होता है, तो एप्लीकेशन कैश मेनिफेस्ट सही ढंग से पढ़ा जाता है और सभी संदर्भित संसाधन कैश किए जाते हैं। समस्या तब होती है जब उपयोगकर्ता ऑफ़लाइन एप्लिकेशन का उपयोग शुरू करता है। आवेदन के उपयोग के दौरान, पृष्ठ डीओएम से एसवीजी जोड़े और हटा दिए जाते हैं। इसके दौरान, एसवीजी में से कुछ छवियों को एप्लिकेशन कैश से लोड करने में असफल रहा, भले ही वे निश्चित रूप से मौजूद और कैश किए गए हों। इसके बजाए, छवि के लिए अनुरोध सर्वर पर किया गया है, जो स्पष्ट रूप से विफल रहता है क्योंकि उपयोगकर्ता अब ऑनलाइन नहीं है।
दिलचस्प बात यह है कि आईपैड पर सफारी में किसी पृष्ठ पर नेविगेट करते समय यह समस्या उत्पन्न नहीं होती है। यह पूर्ण पृष्ठ वेब ऐप व्यू के लिए विशिष्ट प्रतीत होता है, हालांकि मैं इसकी गारंटी नहीं दे सकता।
मैं काफी आसानी से इस HTML पृष्ठ का उपयोग कर इस पुन: पेश कर सकते हैं:
<!DOCTYPE html>
<html manifest="testfiles.manifest">
<head>
<title>Test</title>
<script src="Javascript/jquery-1.7.1.js" type="text/javascript"></script>
<!-- Remove the browser chrome when the page is loaded from a homescreen icon -->
<meta name="apple-mobile-web-app-capable" content="yes" />
</head>
<body>
<h1>Simple SVG caching test</h1>
<h2>Basket ball SVG</h2>
<p>
<span id="remove">Remove</span> | <span id="add">Add</span>
</p>
<p>
<span id="show">Show</span> | <span id="hide">Hide</span>
</p>
<p>
<span id="reload">Reload</span>
</p>
<embed width='360' height='510' src='TestFiles/Basketball.svg' />
<script type="text/javascript">
$(function()
{
$("#remove").click(function()
{
$("embed").remove();
});
$("#add").click(function()
{
$("<embed width='360' height='510' src='TestFiles/Basketball.svg' />").appendTo("body");
});
$("#show").click(function()
{
$("embed").show();
});
$("#hide").click(function()
{
$("embed").hide();
});
$("#reload").click(function()
{
location.reload(true);
});
})
</script>
</body>
</html>
यह एसवीजी:
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
width="340"
height="340">
<image
width="340"
height="340"
xlink:href="Basketball.png"
x="0"
y="0" />
</svg>
इस छवि को जो एसवीजी द्वारा संदर्भित है:
और यह मैनिफेस्ट फ़ाइल:
CACHE MANIFEST
CACHE:
TestFiles/Basketball.svg
TestFiles/Basketball.png
Javascript/jquery-1.7.1.js
और इन निम्न चरणों के द्वारा:
- ओपन सफारी और (हम एक Windows 2008/आईआईएस सर्वर पर होस्ट) प्रजनन html फ़ाइल के स्थान पर नेविगेट
- में पृष्ठ जोड़ें 'होम स्क्रीन में जोड़ें' बटन का उपयोग कर होम स्क्रीन।
- बंद सफारी और सफारी कैश
- लोड से नव बुकमार्क
- प्रतीक्षा जोड़ा पेज साफ जब तक पेज पूरी तरह से कैश किया गया है। आम तौर पर लगभग 5-10 सेकेंड, लेकिन प्रगति वांछित लॉग आउट करने के लिए आप कुछ एप्लिकेशन कैश ईवेंट से संलग्न कर सकते हैं।
- बुकमार्क
- सूचना कि पृष्ठ सही तरीके से कैश की गई लग से नए जोड़े वाईफ़ाई (या जो भी कनेक्शन आप उपयोग के का मतलब है)
- लोड पेज बंद कर दें। जोड़ें और बटन हटाएं का प्रयोग करें। आपको पृष्ठ पर 'एड' बटन का उपयोग करते समय काफी तेज़ी से ध्यान देना चाहिए। एसवीजी में छवि संसाधन हमेशा एप्लिकेशन कैश से लोड नहीं होता है, भले ही यह स्पष्ट रूप से कैश किया गया हो।
- अनुप्रयोग संचय प्रकट सही है:
जब समस्या इसलिए होती है, तो आप नीचे
स्क्रीन शॉट की तरह कुछ देखना चाहिए मैं पहले से ही कुछ स्पष्ट बातें देख लिया है माइम प्रकार
मेरे प्रश्न हैं:
- किसी को भी पता है कि ऐसा क्यों होता?
- क्या इस मुद्दे पर कोई कामकाज है?
मैंने इसे सेब के साथ एक बग के रूप में लॉग किया है, इसलिए मैं इस प्रश्न को उन प्रतिक्रियाओं के साथ अपडेट करूंगा जो मैं उनसे प्राप्त कर सकता हूं!
धन्यवाद!
एंडी।
क्या आईओएस होम पेज ऐप्स अभी भी आईओएस सफारी में वेबकिट के एक अलग संस्करण का उपयोग करते हैं, या क्या उन्होंने इसे ठीक किया है? कामकाज के लिए: जेएस और/या एचटीएमएल कैशिंग सही ढंग से हैं? क्या आप अपनी छवियों को डेटा यूआरएल के रूप में एन्कोड कर सकते हैं? – robertc
अरे, सुझावों के लिए धन्यवाद, जेएस और एचटीएमएल दोनों कैशिंग सही तरीके से हैं, केवल HTML पृष्ठ पर एसवीजी के अंदर की छवि जिसे एप्लिकेशन कैश से पुनर्प्राप्त नहीं किया जा रहा है। आईओएस होमपेज ऐप और आईओएस सफारी के बारे में, मुझे वास्तव में पता नहीं है। मैं अनुमान लगा रहा था कि उन्होंने थोड़ा अलग संस्करण इस्तेमाल किया था या उनके बीच कुछ अलग था, लेकिन मुझे नहीं पता कि क्या। क्या पता लगाने का कोई तरीका है (मैं भारी आईओएस समर्थक नहीं हूं!)। यदि संभव हो तो हम डेटा यूआरएल को आजमा सकते हैं और इससे बच सकते हैं क्योंकि यह अक्षम होगा यदि हमारे पास एक ही छवि (पृष्ठभूमि या शीर्षलेख) के साथ कई एसवीजी हैं। – Andy
दरअसल, इसके बारे में सोचते हुए, क्या हम अनुरोध के शीर्षकों से वेबकिट संस्करण प्राप्त कर सकते हैं? ... मुझे थोड़ा समय लगेगा जब मुझे थोड़ा समय लगेगा! – Andy